1 page.title= Material Design 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"> Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 22 <p> Material Design :</p> 23 24 <ul> 25 <li> , ;</li> 26 <li> ;</li> 27 <li> .</li> 28 </ul> 29 30 <p> Material Design , . 31 , , <a href="#fig3">3</a>. 32 </p> 33 34 <p> . , . 35 </p> 36 37 <p> Material Design :</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> Material Design . 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>. Material Design .</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>. Material Design .</p> 60 </div> 61 </div> 62 <br style="clear:left"> 63 </div> 64 65 <p class="note"> 66 <strong>.</strong> Material Design Android 5.0 ( API 21) . 67 <a href="{@docRoot}tools/support-library/features.html#v7"> v7</a> 68 Material Design . . 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"> Material Design: 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>. Material Design.</p> 98 </div> 99 100 101 <h2 id="StatusBar"> </h2> 102 103 <p> Material Design , . 104 , <code>android:statusBarColor</code> Material Design. 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> . 113 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} . 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
