1 page.title=Android 2 page.tags=Material,design, 3 page.image=images/cards/design-material-for-android_2x.jpg 4 5 @jd:body 6 7 <!-- developer docs box --> 8 <a class="notice-developers right" href="{@docRoot}training/material/index.html"> 9 <div> 10 <h3></h3> 11 <p></p> 12 </div> 13 </a> 14 15 <!-- video box --> 16 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> 17 <div> 18 <h3></h3> 19 <p></p> 20 </div> 21 </a> 22 23 <!-- video box --> 24 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> 25 <div> 26 <h3></h3> 27 <p></p> 28 </div> 29 </a> 30 31 <!-- video box --> 32 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> 33 <div> 34 <h3></h3> 35 <p>Google I/O </p> 36 </div> 37 </a> 38 39 40 41 <p itemprop="description"> 42 Android 43 Android <a href="http://www.google.com/design/spec"></a> Android 5.0 (API 21) 44 45 </p> 46 47 <p>Android </p> 48 49 <ul> 50 <li></li> 51 <li></li> 52 <li> API</li> 53 </ul> 54 55 <p> Android <a href="{@docRoot}training/material/index.html"></a> 56 </p> 57 58 59 <h3></h3> 60 61 <p> Activity 62 </p> 63 64 <!-- two columns --> 65 <div style="width:700px;margin-top:25px;margin-bottom:20px"> 66 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 67 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" /> 68 <div style="width:140px;margin:0 auto"> 69 <p style="margin-top:8px"></p> 70 </div> 71 </div> 72 <div style="float:left;width:250px;margin-right:0px;"> 73 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" /> 74 <div style="width:140px;margin:0 auto"> 75 <p style="margin-top:8px"></p> 76 </div> 77 </div> 78 <br style="clear:left"/> 79 </div> 80 81 <p><a href="{@docRoot}training/material/theme.html"></a> 82 </p> 83 84 85 <h3></h3> 86 87 <p>Android 88 </p> 89 90 <!-- two columns --> 91 <div style="width:700px;margin-top:25px;margin-bottom:20px"> 92 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 93 <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" /> 94 <p> <code>RecyclerView</code> <code>ListView</code> 95 </p> 96 </div> 97 <div style="float:left;width:250px;margin-right:0px;"> 98 <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> 99 <p> <code>CardView</code> 100 </p> 101 </div> 102 <br style="clear:left"/> 103 </div> 104 105 <p><a href="{@docRoot}training/material/lists-cards.html"></a> 106 </p> 107 108 109 <h3></h3> 110 111 <p> X Y Android Z 112 </p> 113 114 <ul> 115 <li>Z </li> 116 <li>Z </li> 117 </ul> 118 119 <div style="width:290px;margin-left:35px;float:right"> 120 <div class="framed-nexus5-port-span-5"> 121 <video class="play-on-hover" autoplay> 122 <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> 123 <source src="{@docRoot}design/videos/ContactsAnim.webm"/> 124 <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> 125 </video> 126 </div> 127 <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> 128 <em></em> 129 </div> 130 </div> 131 132 <p><a href="{@docRoot}training/material/shadows-clipping.html"></a> 133 </p> 134 135 136 <h3></h3> 137 <p> API UI 138 </p> 139 140 <p> API </p> 141 142 <ul> 143 <li style="margin-bottom:15px"> 144 <strong></strong> 145 </li> 146 <li style="margin-bottom:15px"> 147 <strong></strong> 148 </li> 149 <li style="margin-bottom:15px"> 150 <strong></strong> 151 </li> 152 <li style="margin-bottom:15px"> 153 <strong></strong> 154 </li> 155 <li style="margin-bottom:15px"> 156 <strong></strong> 157 </li> 158 <li style="margin-bottom:15px"> 159 <strong></strong> 160 </li> 161 </ul> 162 163 <p> API 164 </p> 165 166 <p><a href="{@docRoot}training/material/animations.html"></a> 167 </p> 168 169 170 <h3></h3> 171 172 <p></p> 173 174 <ul> 175 <li><strong></strong> 176 </li> 177 <li><strong></strong> Alpha 178 </li> 179 <li><strong></strong> 180 </li> 181 </ul> 182 183 <p><a href="{@docRoot}training/material/drawables.html"></a> 184 </p> 185