1 page.title=Material Design cho Android 2 page.tags=Material,design 3 page.type=thit k 4 page.image=images/cards/design-material-for-android_2x.jpg 5 6 @jd:body 7 8 <!-- developer docs box --> 9 <a class="notice-developers right" href="{@docRoot}training/material/index.html"> 10 <div> 11 <h3>Ti liu cho Nh pht trin</h3> 12 <p>To ng dng vi Material Design</p> 13 </div> 14 </a> 15 16 <!-- video box --> 17 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> 18 <div> 19 <h3>Video</h3> 20 <p>Gii thiu Material Design</p> 21 </div> 22 </a> 23 24 <!-- video box --> 25 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> 26 <div> 27 <h3>Video</h3> 28 <p>Giy v Mc: Nhng vt liu quan trng</p> 29 </div> 30 </a> 31 32 <!-- video box --> 33 <a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> 34 <div> 35 <h3>Video</h3> 36 <p>Material Design trong Google I/O App</p> 37 </div> 38 </a> 39 40 41 42 <p itemprop="description">Material design l mt hng dn ton din v thit k 43 trc quan, chuyn ng v tng tc gia nhiu nn tng v thit b. Hin nay Android c h tr 44 nhng ng dng theo phong cch material design. s dng material design trong ng dng Androi ca mnh, hy lm theo hng dn nu 45 trong <a href="http://www.google.com/design/spec">c t material design</a> v s dng 46 nhng thnh phn v tnh nng mi sn c trong Android 5.0 (API mc 21) tr ln.</p> 47 48 <p>Android cung cp nhng phn t sau bn dng ng dng theo phong cch material design:</p> 49 50 <ul> 51 <li>Mt giao din mi</li> 52 <li>Widget mi cho cc dng xem phc tp</li> 53 <li>API mi cho bng v hot hnh ty chnh</li> 54 </ul> 55 56 <p> bit thm thng tin v trin khai material design trn Android, hy xem 57 <a href="{@docRoot}training/material/index.html">To ng dng vi Material Design</a>.</p> 58 59 60 <h3>Giao din Material</h3> 61 62 <p>Giao din material mang n mt phong cch mi cho ng dng ca bn v cc widget h thng, cho php bn t 63 bng mu ca chng v hot hnh mc nh cho phn hi chm v chuyn tip hot ng.</p> 64 65 <!-- two columns --> 66 <div style="width:700px;margin-top:25px;margin-bottom:20px"> 67 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 68 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" /> 69 <div style="width:140px;margin:0 auto"> 70 <p style="margin-top:8px">Giao din material ti</p> 71 </div> 72 </div> 73 <div style="float:left;width:250px;margin-right:0px;"> 74 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" /> 75 <div style="width:140px;margin:0 auto"> 76 <p style="margin-top:8px">Giao din material sng</p> 77 </div> 78 </div> 79 <br style="clear:left"/> 80 </div> 81 82 <p> bit thm thng tin, hy xem phn <a href="{@docRoot}training/material/theme.html">S dng Giao din Material 83 </a>.</p> 84 85 86 <h3>Danh sch v Th</h3> 87 88 <p>Android cung cp hai loi widget mi hin th th v danh sch bng phong cch 89 v hot hnh material design:</p> 90 91 <!-- two columns --> 92 <div style="width:700px;margin-top:25px;margin-bottom:20px"> 93 <div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 94 <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" /> 95 <p>Widget <code>RecyclerView</code> mi l mt phin bn c th ghp ni hn ca <code>ListView</code> 96 c h tr nhiu kiu b tr khc nhau v ci thin hiu nng.</p> 97 </div> 98 <div style="float:left;width:250px;margin-right:0px;"> 99 <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> 100 <p>Widget <code>CardView</code> mi cho php bn hin th nhng mu thng tin quan trng bn trong 101 th vi din mo v cm nhn nht qun.</p> 102 </div> 103 <br style="clear:left"/> 104 </div> 105 106 <p> bit thm thng tin, hy xem phn <a href="{@docRoot}training/material/lists-cards.html">To Danh sch 107 v Th</a>.</p> 108 109 110 <h3> bng Dng xem</h3> 111 112 <p>Bn cnh cc thuc tnh X v Y, dng xem trong Android nay c 113 thm thuc tnh Z. Thuc tnh mi ny biu din cao ca mt dng xem v s quyt nh:</p> 114 115 <ul> 116 <li>Kch c ca bng: dng xem c gi tr Z cao hn s t bng ln hn.</li> 117 <li>Th t v: dng xem c gi tr Z cao hn s xut hin pha trn nhng dng xem khc.</li> 118 </ul> 119 120 <div style="width:290px;margin-left:35px;float:right"> 121 <div class="framed-nexus5-port-span-5"> 122 <video class="play-on-hover" autoplay> 123 <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> 124 <source src="{@docRoot}design/videos/ContactsAnim.webm"/> 125 <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> 126 </video> 127 </div> 128 <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> 129 <em> pht li phim, nhp vo mn hnh thit b</em> 130 </div> 131 </div> 132 133 <p> bit thm thng tin, hy xem phn <a href="{@docRoot}training/material/shadows-clipping.html">nh ngha 134 bng v Dng xem Ct hnh</a>.</p> 135 136 137 <h3>Hot hnh</h3> 138 139 <p>API hot hnh mi cho php bn to hot hnh ty chnh cho phn hi chm trong iu khin UI, 140 thay i trng thi xem v chuyn tip hot ng.</p> 141 142 <p>Nhng API ny cho php bn:</p> 143 144 <ul> 145 <li style="margin-bottom:15px"> 146 Phn hi li s kin chm trong dng xem ca mnh bng hot hnh <strong>phn hi chm</strong>. 147 </li> 148 <li style="margin-bottom:15px"> 149 n v hin dng xem bng hot hnh <strong>hin hnh trn</strong>. 150 </li> 151 <li style="margin-bottom:15px"> 152 Chuyn gia cc hot ng bng hot hnh <strong>chuyn tip hot ng</strong> ty chnh. 153 </li> 154 <li style="margin-bottom:15px"> 155 To hot hnh t nhin hn bng <strong>chuyn ng cong</strong>. 156 </li> 157 <li style="margin-bottom:15px"> 158 To hot hnh cho cc thay i trong mt hoc nhiu thuc tnh dng xem bng hot hnh <strong>thay i trng thi dng xem</strong>. 159 </li> 160 <li style="margin-bottom:15px"> 161 Th hin hot hnh trong cc <strong>ni dung v c theo danh sch trng thi</strong> gia nhng thay i v trng thi dng xem. 162 </li> 163 </ul> 164 165 <p>Hot hnh phn hi chm c tch hp vo mt vi dng xem tiu chun, v d nh cc nt. Cc API mi ny 166 cho php bn ty bin nhng hot hnh ny v thm chng vo dng xem ty chnh ca mnh.</p> 167 168 <p> bit thm thng tin, hy xem phn <a href="{@docRoot}training/material/animations.html">nh ngha Hot hnh 169 Ty chnh</a>.</p> 170 171 172 <h3>Ni dung v c</h3> 173 174 <p>Nhng kh nng mi ny ca ni dung v c s gip bn trin khai cc ng dng theo phong cch material design:</p> 175 176 <ul> 177 <li><strong>Ni dung v c vc-t</strong> c th thay i kch c m khng lm mt sc nt v hon ho 178 cho cc biu tng trong ng dng n sc.</li> 179 <li><strong>Nhum ni dung v c</strong> cho php bn nh ngha nh bitmap thnh mt n alpha v nhum 180 mu cho chng theo thi gian chy.</li> 181 <li><strong>Trch xut mu</strong> cho php bn t ng trch xut mu ni bt t 182 hnh nh bitmap.</li> 183 </ul> 184 185 <p> bit thm thng tin, hy xem phn <a href="{@docRoot}training/material/drawables.html">Lm vic vi 186 Ni dung V c</a>.</p> 187
