Posted at

MaterialDesignでよく使うサイズのまとめ

More than 3 years have passed since last update.

MaterialDesignの特徴の1つとして、全てのコンポーネントが8dp四方のグリッドに沿ってデザインされています。

MaterialDesign: Layout > Metrics & keylines

とりわけ余白は重要視されていて、適切な余白を設定することでいろんなことを表現しようとしているようです。

その中でも、特によく使うサイズをまとめてみました。またAndroidアプリ開発では、そのような固定値はdimens.xmlファイルにまとめることが推奨されているので、実装例として作ってみました。

<resources>

<!-- リストアイテムの余白 -->
<dimen name="list_item_first_left_margin">16dp</dimen>
<dimen name="list_item_second_left_margin">72dp</dimen>
<dimen name="list_item_right_margin">16dp</dimen>

<!-- リストの余白 -->
<dimen name="list_vertical_margin">8dp</dimen>

<!-- リストの高さ -->
<dimen name="list_sigle_line_height">48dp</dimen>
<dimen name="list_icon_and_text_height">56dp</dimen>
<dimen name="list_two_line_height">72dp</dimen>
<dimen name="list_three_line_height">88dp</dimen>

<!-- ボタンの大きさ -->
<dimen name="button_height">36dp</dimen>
<dimen name="button_minimum_width">88dp</dimen>

<!-- CardViewのコンテンツの余白 -->
<dimen name="card_contens_padding">24dp</dimen>

<!-- SnackBarの大きさ -->
<dimen name="snackbar_single_line_height">48dp</dimen>
<dimen name="snackbar_multi_line_height">80dp</dimen>
</resources>

ビジュアル的に確認するのは、公式のガイドラインを見た方が早いです。

Componentsにまとまってます。よく使うのはこの辺りだと思います。

- Lists

- Buttons

- Cards

- Dialogs

ちなみにフォントサイズについてはAppCompatにたくさん定義されているので、それを使うのが良さそうです。

フォントサイズは、@dimen/abc_text_size_xxxでいろいろありますし、スタイルとしても@style/TextAppearance.AppCompat.xxxxでたくさん定義があります。