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.0API 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> 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 2 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>Android X Y 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 138 <p> API UI 139 </p> 140 141 <p> API </p> 142 143 <ul> 144 <li style="margin-bottom:15px"> 145 <strong> </strong> 146 </li> 147 <li style="margin-bottom:15px"> 148 <strong></strong> 149 </li> 150 <li style="margin-bottom:15px"> 151 <strong></strong> 152 </li> 153 <li style="margin-bottom:15px"> 154 <strong></strong> 155 </li> 156 <li style="margin-bottom:15px"> 157 <strong></strong> 1 158 </li> 159 <li style="margin-bottom:15px"> 160 <strong> </strong> 161 </li> 162 </ul> 163 164 <p> API 165 </p> 166 167 <p><a href="{@docRoot}training/material/animations.html"> </a> 168 </p> 169 170 171 <h3></h3> 172 173 <p> </p> 174 175 <ul> 176 <li><strong></strong> 177 </li> 178 <li><strong></strong> 179 </li> 180 <li><strong></strong> 181 </li> 182 </ul> 183 184 <p><a href="{@docRoot}training/material/drawables.html"></a> 185 </p> 186