1page.title=Sử dụng Chủ đề Material 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="#ColorPalette">Tùy chỉnh Bảng màu</a></li> 10 <li><a href="#StatusBar">Tùy chỉnh Thanh Trạng thái</a></li> 11 <li><a href="#Inheritance">Tạo Chủ đề Dạng xem Riêng</a></li> 12</ol> 13<h2>Bạn cũng nên đọc</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li> 17</ul> 18</div> 19</div> 20 21 22<p>Chủ đề material mới cung cấp:</p> 23 24<ul> 25 <li>Widget hệ thống cho phép bạn đặt bảng màu của chúng</li> 26 <li>Hoạt hình phản hồi chạm cho widget hệ thống</li> 27 <li>Hoạt hình chuyển tiếp hoạt động</li> 28</ul> 29 30<p>Bạn có thể tùy chỉnh diện mạo của chủ đề material 31theo nhận diện thương hiệu của mình bằng một bảng màu mà bạn kiểm soát. Bạn có thể nhuộm màu thanh hành động và 32thanh trạng thái bằng cách sử dụng các thuộc tính chủ đề như minh họa trong <a href="#fig3">Hình 3</a>.</p> 33 34<p>Widget hệ thống có một thiết kế mới và hoạt hình phản hồi chạm. Bạn có thể tùy chỉnh 35bảng màu, hoạt hình phản hồi chạm và chuyển tiếp hoạt động cho ứng dụng của mình.</p> 36 37<p>Chủ đề material được định nghĩa là:</p> 38 39<ul> 40 <li><code>@android:style/Theme.Material</code> (phiên bản tối)</li> 41 <li><code>@android:style/Theme.Material.Light</code> (phiên bản sáng)</li> 42 <li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li> 43</ul> 44 45<p>Để biết danh sách các kiểu material mà bạn có thể sử dụng, hãy xem tài liệu tham chiếu API cho 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>Hình 1</strong>. Giao diện material tối</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>Hình 2</strong>. Giao diện material sáng</p> 60 </div> 61</div> 62<br style="clear:left"> 63</div> 64 65<p class="note"> 66<strong>Lưu ý:</strong> Chủ đề material chỉ sẵn có trong Android 5.0 (API mức 21) trở 67lên. <a href="{@docRoot}tools/support-library/features.html#v7">Thư viện Hỗ trợ v7</a> 68cung cấp chủ đề mang phong cách material design cho một số widget và hỗ trợ tùy chỉnh 69bảng màu. Để biết thêm thông tin, hãy xem phần 70<a href="{@docRoot}training/material/compatibility.html">Duy trì Tính tương thích</a>. 71</p> 72 73 74<h2 id="ColorPalette">Tùy chỉnh Bảng màu</h2> 75 76<p style="margin-bottom:30px">Để tùy chỉnh các màu cơ bản của chủ đề cho phù hợp với nhãn hiệu của bạn, hãy định nghĩa 77màu tùy chỉnh của bạn bằng thuộc tính chủ đề khi bạn kế thừa từ chủ đề material:</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>Hình 3.</strong> Tùy chỉnh chủ đề material.</p> 98</div> 99 100 101<h2 id="StatusBar">Tùy chỉnh Thanh Trạng thái</h2> 102 103<p>Chủ đề material cho phép bạn dễ dàng tùy chỉnh thanh trạng thái để bạn có thể quy định 104màu cho phù hợp với nhãn hiệu của mình và đảm bảo đủ độ tương phản để hiển thị biểu tượng trạng thái màu trắng. Để 105đặt màu tùy chỉnh cho thanh trạng thái, hãy sử dụng thuộc tính <code>android:statusBarColor</code> khi 106bạn mở rộng chủ đề material. Theo mặc định, <code>android:statusBarColor</code> kế thừa 107giá trị của <code>android:colorPrimaryDark</code>.</p> 108 109<p>Bạn cũng có thể tự vẽ phía sau thanh trạng thái. Ví dụ, nếu bạn muốn hiển thị 110thanh trạng thái trong suốt trên một ảnh chụp, với graddien hơi tối để đảm bảo biểu tượng 111trạng thái màu trắng nhìn thấy được. Để làm vậy, hãy đặt thuộc tính <code>android:statusBarColor</code> thành 112<code>@android:color/transparent</code> và điều chỉnh cờ cửa sổ nếu cần. Bạn cũng có thể 113sử dụng phương thức {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} cho hoạt hình 114hoặc hiệu ứng mờ dần.</p> 115 116<p class="note"> 117<strong>Lưu ý:</strong> Thanh trạng thái cần luôn có một bản vẽ rõ ràng từ 118thanh công cụ chính, trừ trường hợp bạn hiển thị nội dung hình ảnh hoặc phương tiện phong phú từ cạnh tới cạnh phía sau 119những thanh này và khi bạn sử dụng gradient để đảm bảo rằng các biểu tượng vẫn nhìn thấy được. 120</p> 121 122<p>Khi bạn tùy chỉnh thanh điều hướng và trạng thái, hãy khiến cả hai đều trong suốt hoặc chỉ sửa đổi 123thanh trạng thái. Thanh điều hướng nên giữ lại màu đen trong mọi trường hợp khác.</p> 124 125 126<h2 id="Inheritance">Tạo Chủ đề Dạng xem Riêng</h3> 127 128<p>Những phần tử trong định nghĩa bố trí XML có thể quy định thuộc tính <code>android:theme</code> để 129tham chiếu tới một tài nguyên chủ đề. Thuộc tính này sửa đổi chủ đề cho phần tử và bất cứ 130phần tử con nào, điều này có ích đối với việc thay đổi bảng màu của chủ đề trong một phần cụ thể 131của giao diện.</p> 132
