page.title=マテリアル テーマの使用 @jd:body
新しいマテリアル テーマでは、次のものが提供されます。
マテリアル テーマの外観は、ブランド イメージにあわせて自分のカラーパレットでカスタマイズできます。 図 3 のように、アクションバーやステータスバーにテーマ属性で色を付けることができます。
システム ウィジェットには、新しいデザインやタッチ フィードバックがあります。カラーパレット、タッチ フィードバック、アクティビティ遷移は、自分のアプリ向けにカスタマイズできます。
マテリアル テーマは次のように定義されます。
@android:style/Theme.Material
(暗色バージョン)@android:style/Theme.Material.Light
(明色バージョン)@android:style/Theme.Material.Light.DarkActionBar
使用できるマテリアル スタイルのリストについては、API リファレンスの {@link android.R.style R.style} をご覧ください。
図 1 暗い色のマテリアル テーマ
図 2 明るい色のマテリアル テーマ
注: マテリアル テーマは、Android 5.0(API レベル 21)以降でのみ使用できます。 v7 サポート ライブラリは、一部のウィジェットに対してマテリアル デザイン スタイルでテーマを提供し、カラーパレットのカスタマイズをサポートしています。 詳細については、 互換性の維持をご覧ください。
ブランド イメージに合うようにテーマの基本色をカスタマイズするには、次の例に示すようにマテリアル テーマから継承する場合、テーマ属性を使ってカスタムカラーを定義します。
<resources> <!-- inherit from the material theme --> <style name="AppTheme" parent="android:Theme.Material"> <!-- Main theme colors --> <!-- your app branding color for the app bar --> <item name="android:colorPrimary">@color/primary</item> <!-- darker variant for the status bar and contextual app bars --> <item name="android:colorPrimaryDark">@color/primary_dark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="android:colorAccent">@color/accent</item> </style> </resources>
図 3 マテリアル テーマのカスタマイズ
マテリアル テーマを使うと、ステータスバーを簡単にカスタマイズできます。ブランド イメージに合わせて、またコントラストで白色のステータス アイコンを際立たせて色を設定できます。
ステータスバーのカスタムカラーを設定するには、マテリアル テーマを拡張するときに android:statusBarColor
属性を使用します。
デフォルトでは android:statusBarColor
は android:colorPrimaryDark
の値を継承します。
また、ステータスバーの背景を描くこともできます。たとえば、白色のステータス アイコンが見にくくならないように薄い暗色のグラデーションを付けて、ステータスバーを写真の上に透過的に表示したい場合、
android:statusBarColor
属性に
@android:color/transparent
を指定してウィンドウ フラグを必要に応じて調整します。アニメーションやフェードには、{@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} メソッドも使用できます。
注: ステータスバーはメインのツールバーと明確に分かれている必要があります。ただし、背景に画面の端から端まで表示される鮮やかな画像やメディア コンテンツを使用したり、アイコンが見にくくならないようにグラデーションを使用する場合は例外です。
ナビケーションとステータスバーをカスタマイズするときは、どちらも透過的にするか、ステータスバーだけを変更します。 その他のケースではナビゲーション バーは黒色のままにする必要があります。
XML レイアウト定義の各要素では、テーマのリソースを参照する android:theme
属性を指定できます。
この属性は、要素や子要素のテーマを変更し、インターフェースの一定の割合を占めるテーマ カラーパレットを変更する場合に役立ちます。