1page.title=Bắt đầu 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>Bài học này hướng dẫn bạn cách</h2> 8<ol> 9 <li><a href="#ApplyTheme">Áp dụng Chủ đề Material</a></li> 10 <li><a href="#Layouts">Thiết kế Bố trí của Bạn</a></li> 11 <li><a href="#Depth">Quy định Độ cao trong Dạng xem của Bạn</a></li> 12 <li><a href="#ListsCards">Tạo Danh sách và Thẻ</a></li> 13 <li><a href="#Animations">Tùy chỉnh Hoạt hình của Bạn</a></li> 14</ol> 15<h2>Bạn cũng nên đọc</h2> 16<ul> 17 <li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li> 18 <li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li> 19</ul> 20</div> 21</div> 22 23 24<p>Để tạo ứng dụng với material design:</p> 25 26<ol> 27 <li style="margin-bottom:10px"> 28 Xem phần <a href="http://www.google.com/design/spec">đặc tả phong cách material design</a>.</li> 29 <li style="margin-bottom:10px"> 30 Áp dụng chủ đề <strong>material</strong> cho ứng dụng của bạn.</li> 31 <li style="margin-bottom:10px"> 32 Tạo <strong>bố trí</strong> của bạn theo hướng dẫn về material design.</li> 33 <li style="margin-bottom:10px"> 34 Quy định <strong>độ cao</strong> cho dạng xem của bạn để đổ bóng.</li> 35 <li style="margin-bottom:10px"> 36 Sử dụng <strong>widget</strong> hệ thống cho danh sách và thẻ.</li> 37 <li style="margin-bottom:10px"> 38 Tùy chỉnh <strong>hoạt hình</strong> trong ứng dụng của bạn.</li> 39</ol> 40 41<h3>Duy trì tính tương thích ngược</h3> 42 43<p>Bạn có thể thêm nhiều tính năng material design vào ứng dụng của mình trong khi vẫn duy trì tính tương thích với 44các phiên bản Android trước 5.0. Để biết thêm thông tin, hãy xem phần 45<a href="{@docRoot}training/material/compatibility.html">Duy trì Tính tương thích</a>.</p> 46 47<h3>Cập nhật ứng dụng của bạn với material design</h3> 48 49<p>Để cập nhật một ứng dụng hiện tại bằng material design, hãy cập nhật các bố trí của bạn theo 50hướng dẫn về material design. Cũng nhớ kết hợp chiều sâu, phản hồi chạm và 51hoạt hình.</p> 52 53<h3>Tạo ứng dụng mới với material design</h3> 54 55<p>Nếu bạn tạo một ứng dụng mới với các tính năng của material design, <a href="http://www.google.com/design/spec">hướng dẫn về material design</a> cung cấp cho bạn một 56khuôn khổ thiết kế súc tích. Làm theo hướng dẫn đó và sử dụng chức năng mới trong khuôn khổ Android 57để thiết kế và phát triển ứng dụng của bạn.</p> 58 59 60<h2 id="ApplyTheme">Áp dụng Chủ đề Material</h2> 61 62<p>Để áp dụng chủ đề material trong ứng dụng của mình, hãy quy định một kiểu kế thừa từ 63<code>android:Theme.Material</code>:</p> 64 65<pre> 66<!-- res/values/styles.xml --> 67<resources> 68 <!-- your theme inherits from the material theme --> 69 <style name="AppTheme" parent="android:Theme.Material"> 70 <!-- theme customizations --> 71 </style> 72</resources> 73</pre> 74 75<p>Chủ đề material cung cấp các widget hệ thống được cập nhật để bạn có thể đặt bảng màu và 76hoạt hình mặc định cho phản hồi chạm và chuyển tiếp hoạt động. Để biết thêm chi tiết, hãy xem phần 77<a href="{@docRoot}training/material/theme.html">Sử dụng Chủ đề Material</a>.</p> 78 79 80<h2 id="Layouts">Thiết kế Bố trí của Bạn</h2> 81 82<p>Bên cạnh việc áp dụng và tùy chỉnh chủ đề material, bố trí của bạn cần tuân thủ 83<a href="http://www.google.com/design/spec">hướng dẫn về material design</a>. Khi thiết kế 84bố trí của bạn, hãy đặc biệt chú ý tới điều sau đây:</p> 85 86<ul> 87<li>Lưới đường cơ sở</li> 88<li>Dòng chính</li> 89<li>Giãn cách</li> 90<li>Kích cỡ mục tiêu chạm</li> 91<li>Cấu trúc bố trí</li> 92</ul> 93 94 95<h2 id="Depth">Quy định Độ cao trong Dạng xem của Bạn</h2> 96 97<p>Dạng xem có thể đổ bóng và giá trị độ cao của một dạng xem 98xác định kích cỡ bóng và thứ tự vẽ của nó. Để đặt độ cao của một dạng xem, hãy sử dụng thuộc tính 99<code>android:elevation</code> trong bố trí của bạn:</p> 100 101<pre> 102<TextView 103 android:id="@+id/my_textview" 104 android:layout_width="wrap_content" 105 android:layout_height="wrap_content" 106 android:text="@string/next" 107 android:background="@color/white" 108 android:elevation="5dp" /> 109</pre> 110 111<p>Thuộc tính <code>translationZ</code> mới cho phép bạn tạo những hoạt hình phản ánh các thay đổi 112tạm thời về độ cao của một dạng xem. Thay đổi về độ cao có thể hữu ích khi 113<a href="{@docRoot}training/material/animations.html#ViewState">phản hồi lại các cử chỉ 114chạm</a>.</p> 115 116<p>Để biết thêm chi tiết, hãy xem phần <a href="{@docRoot}training/material/shadows-clipping.html">Định nghĩa 117Đổ bóng và Dạng xem Cắt hình</a>.</p> 118 119 120<h2 id="ListsCards">Tạo Danh sách và Thẻ</h2> 121 122<p>{@link android.support.v7.widget.RecyclerView} là một phiên bản dễ ghép nối hơn của {@link 123android.widget.ListView} có hỗ trợ các kiểu bố trí khác nhau và cung cấp những cải tiến về hiệu năng. 124{@link android.support.v7.widget.CardView} cho phép bạn hiện các mẩu thông tin bên trong thẻ với 125một diện mạo nhất quán giữa các ứng dụng. Ví dụ về mã sau đây minh họa cách thêm 126{@link android.support.v7.widget.CardView} vào bố trí của bạn:</p> 127 128<pre> 129<android.support.v7.widget.CardView 130 android:id="@+id/card_view" 131 android:layout_width="200dp" 132 android:layout_height="200dp" 133 card_view:cardCornerRadius="3dp"> 134 ... 135</android.support.v7.widget.CardView> 136</pre> 137 138<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/lists-cards.html">Tạo Danh sách 139và Thẻ</a>.</p> 140 141 142<h2 id="Animations">Tùy chỉnh Hoạt hình của Bạn</h2> 143 144<p>Android 5.0 (API mức 21) bao gồm các API mới để tạo hoạt hình tùy chỉnh trong ứng dụng của bạn. 145Ví dụ, bạn có thể cho phép chuyển tiếp hoạt động và định nghĩa một chuyển tiếp ra bên trong một 146hoạt động:</p> 147 148<pre> 149public class MyActivity extends Activity { 150 151 @Override 152 protected void onCreate(Bundle savedInstanceState) { 153 super.onCreate(savedInstanceState); 154 // enable transitions 155 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); 156 setContentView(R.layout.activity_my); 157 } 158 159 public void onSomeButtonClicked(View view) { 160 getWindow().setExitTransition(new Explode()); 161 Intent intent = new Intent(this, MyOtherActivity.class); 162 startActivity(intent, 163 ActivityOptions 164 .makeSceneTransitionAnimation(this).toBundle()); 165 } 166} 167</pre> 168 169<p>Khi bạn bắt đầu một hoạt động khác từ hoạt động này, chuyển tiếp ra được kích hoạt.</p> 170 171<p>Để tìm hiểu thêm về các API hoạt hình mới, hãy xem <a href="{@docRoot}training/material/animations.html">Định nghĩa Hoạt hình Tùy chỉnh</a>.</p> 172