Android Material Design のタブの仕様まとめ

Tabs - Components - Google design guidelines

共通の仕様

• タブの高さ : 48dp
• indicatorの高さ : 2dp
• タブ間に区切り線なし
• 文字サイズ : 14sp Roboto Medium
• 文字位置 : ベースライン = タブ下端から20dp
• 文字色 :
  • 選択・非選択で同じ色 : 選択 = #ffffff、非選択 = #99ffffff
  • 選択・非選択で別の色 : 選択 = indicatorの色、非選択 = 無彩色

http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7OWxWU0JiNjA4Vzg/components_tabs_usage_specs1.png

Fixed Tabs

■ full-screen width

• タブ幅 : 画面幅 / タブ数
• タブ数 : せいぜい4つまで。タブレットではタブが横に広がりすぎるので centered か left offset の方がよい

■ centered

• タブ幅 : 12dp + 最も長いラベル幅 + 12dp（タブレットでは24dp）
• タブ数 : タブ幅 x タブ数が画面幅を超えない数まで可能
• タブは中央に寄せる

■ left offset

• タブ幅 : 12dp + ラベル幅 + 12dp（タブレットでは24dp）
• タブ数 : オフセット + タブ幅の和が画面幅を超えない数まで可能
• 画面左端から選択されているタブのラベル左端までのオフセット = 72dp（タブレットでは 80dp）

＊Types of tabs の Fixed tabs に「Fixed tabs have equal width, based on the widest tab label.」とあるので、それに従ったのが centered、しかし隣の画像をみると Scrollable と同じようにタブによって幅が変わっているのでそれに従ったのが left offset とした。

Scrollable

• タブ幅 : 12dp + ラベル幅 + 12dp（タブレットでは24dp）
• 画面左端から選択されているタブのラベル左端までのオフセット = 72dp（タブレットでは 80dp）