Help us understand the problem. What is going on with this article?

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

More than 5 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でたくさん定義があります。

finc
健康寿命を伸ばすアプリFiNCの開発・運営を行うモバイルヘルステクノロジーベンチャー
https://finc.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away