1page.title=マテリアル テーマの使用 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>このレッスンでの学習内容</h2> 8<ol> 9 <li><a href="#ColorPalette">カラーパレットをカスタマイズする</a></li> 10 <li><a href="#StatusBar">ステータスバーをカスタマイズする</a></li> 11 <li><a href="#Inheritance">テーマ個別のビュー</a></li> 12</ol> 13<h2>関連ドキュメント</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Android でのマテリアル デザイン</a></li> 17</ul> 18</div> 19</div> 20 21 22<p>新しいマテリアル テーマでは、次のものが提供されます。</p> 23 24<ul> 25 <li>カラーパレットを設定できるシステム ウィジェット</li> 26 <li>システム ウィジェットのタッチ フィードバック アニメーション</li> 27 <li>アクティビティ遷移アニメーション</li> 28</ul> 29 30<p>マテリアル テーマの外観は、ブランド イメージにあわせて自分のカラーパレットでカスタマイズできます。 31<a href="#fig3">図 3</a> のように、アクションバーやステータスバーにテーマ属性で色を付けることができます。 32</p> 33 34<p>システム ウィジェットには、新しいデザインやタッチ フィードバックがあります。カラーパレット、タッチ フィードバック、アクティビティ遷移は、自分のアプリ向けにカスタマイズできます。 35</p> 36 37<p>マテリアル テーマは次のように定義されます。</p> 38 39<ul> 40 <li><code>@android:style/Theme.Material</code> （暗色バージョン）</li> 41 <li><code>@android:style/Theme.Material.Light</code> （明色バージョン）</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43</ul> 44 45<p>使用できるマテリアル スタイルのリストについては、API リファレンスの 46{@link android.R.style R.style} をご覧ください。</p> 47 48<!-- two columns, dark/light material theme example --> 49<div style="width:700px;margin-top:25px;margin-bottom:10px"> 50<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 51 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238"> 52 <div style="width:170px;margin:0 auto"> 53 <p style="margin-top:8px;font-size:12px"><strong>図 1</strong> 暗い色のマテリアル テーマ</p> 54 </div> 55</div> 56<div style="float:left;width:250px;margin-right:0px;"> 57 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238"> 58 <div style="width:170px;margin:0 auto"> 59 <p style="margin-top:8px;font-size:12px"><strong>図 2</strong> 明るい色のマテリアル テーマ</p> 60 </div> 61</div> 62<br style="clear:left"> 63</div> 64 65<p class="note"> 66<strong>注: </strong>マテリアル テーマは、Android 5.0（API レベル 21）以降でのみ使用できます。 67<a href="{@docRoot}tools/support-library/features.html#v7">v7 サポート ライブラリ</a>は、一部のウィジェットに対してマテリアル デザイン スタイルでテーマを提供し、カラーパレットのカスタマイズをサポートしています。 68 69詳細については、 70<a href="{@docRoot}training/material/compatibility.html">互換性の維持</a>をご覧ください。 71</p> 72 73 74<h2 id="ColorPalette">カラーパレットをカスタマイズする</h2> 75 76<p style="margin-bottom:30px">ブランド イメージに合うようにテーマの基本色をカスタマイズするには、次の例に示すようにマテリアル テーマから継承する場合、テーマ属性を使ってカスタムカラーを定義します。 77</p> 78 79<pre> 80<resources> 81 <!-- inherit from the material theme --> 82 <style name="AppTheme" parent="android:Theme.Material"> 83 <!-- Main theme colors --> 84 <!-- your app branding color for the app bar --> 85 <item name="android:colorPrimary">@color/primary</item> 86 <!-- darker variant for the status bar and contextual app bars --> 87 <item name="android:colorPrimaryDark">@color/primary_dark</item> 88 <!-- theme UI controls like checkboxes and text fields --> 89 <item name="android:colorAccent">@color/accent</item> 90 </style> 91</resources> 92</pre> 93 94<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3"> 95<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" /> 96<p class="img-caption" style="margin-bottom:0px"> 97<strong>図 3</strong> マテリアル テーマのカスタマイズ</p> 98</div> 99 100 101<h2 id="StatusBar">ステータスバーをカスタマイズする</h2> 102 103<p>マテリアル テーマを使うと、ステータスバーを簡単にカスタマイズできます。ブランド イメージに合わせて、またコントラストで白色のステータス アイコンを際立たせて色を設定できます。 104ステータスバーのカスタムカラーを設定するには、マテリアル テーマを拡張するときに <code>android:statusBarColor</code> 属性を使用します。 105 106デフォルトでは <code>android:statusBarColor</code> は <code>android:colorPrimaryDark</code> の値を継承します。 107</p> 108 109<p>また、ステータスバーの背景を描くこともできます。たとえば、白色のステータス アイコンが見にくくならないように薄い暗色のグラデーションを付けて、ステータスバーを写真の上に透過的に表示したい場合、 110 111<code>android:statusBarColor</code> 属性に 112<code>@android:color/transparent</code> を指定してウィンドウ フラグを必要に応じて調整します。アニメーションやフェードには、{@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} メソッドも使用できます。 113 114</p> 115 116<p class="note"> 117<strong>注: </strong>ステータスバーはメインのツールバーと明確に分かれている必要があります。ただし、背景に画面の端から端まで表示される鮮やかな画像やメディア コンテンツを使用したり、アイコンが見にくくならないようにグラデーションを使用する場合は例外です。 118 119 120</p> 121 122<p>ナビケーションとステータスバーをカスタマイズするときは、どちらも透過的にするか、ステータスバーだけを変更します。 123その他のケースではナビゲーション バーは黒色のままにする必要があります。</p> 124 125 126<h2 id="Inheritance">テーマ個別のビュー</h3> 127 128<p>XML レイアウト定義の各要素では、テーマのリソースを参照する <code>android:theme</code> 属性を指定できます。 129この属性は、要素や子要素のテーマを変更し、インターフェースの一定の割合を占めるテーマ カラーパレットを変更する場合に役立ちます。 130 131</p> 132
