Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
56
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

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

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
56
Help us understand the problem. What are the problem?