Chủ đề.AppCompat được sử dụng để đặt chủ đề chung cho toàn bộ ứng dụng. ThemeOverlay.AppCompat được sử dụng để ghi đè (hoặc "lớp phủ") chủ đề đó cho các chế độ xem cụ thể, đặc biệt là Thanh công cụ.
Hãy xem ví dụ về lý do tại sao điều này là cần thiết.
Chủ đề ứng dụng với ActionBar
ActionBar thường được hiển thị trong ứng dụng. Tôi có thể chọn màu của nó bằng cách đặt giá trị colorPrimary
. Tuy nhiên, việc thay đổi chủ đề sẽ thay đổi màu của văn bản trên ActionBar.
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Từ màu chính của tôi là màu xanh đậm, có lẽ tôi nên sử dụng một trong những chủ đề mà sử dụng một màu chữ nhẹ tại quầy bar hành động vì văn bản màu đen là khó đọc.
Ẩn các ActionBar và sử dụng một Toolbar
Toàn bộ vấn đề của việc sử dụng Theme.AppCompat hơn Theme.Material là để chúng tôi có thể cho phép các phiên bản cũ của Android để sử dụng theme vật liệu thiết kế của chúng tôi. Vấn đề là các phiên bản Android cũ hơn không hỗ trợ ActionBar. Do đó, documentation khuyến nghị ẩn ActionBar và thêm Thanh công cụ vào bố cục của bạn. Để ẩn ActionBar, chúng tôi phải sử dụng một trong các chủ đề NoActionBar
.Những hình ảnh sau đây hiển thị Thanh công cụ với ActionBar bị ẩn.
Nhưng nếu tôi muốn một cái gì đó giống như một chủ đề Ánh sáng với một DarkActionBar? Vì tôi phải sử dụng NoActionBar, đó không phải là một lựa chọn.
Trọng App Theme
Đây là nơi ThemeOverlay đến. Tôi có thể xác định chủ đề tối ActionBar trong cách bố trí xml Toolbar của tôi.
<android.support.v7.widget.Toolbar
...
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Điều này cuối cùng cho phép chúng tôi có hiệu quả mà chúng tôi muốn. Chủ đề Dark.ActionBar lớp phủ chủ đề ứng dụng Ánh sáng cho dịp đặc biệt này.
- App Theme:
Theme.AppCompat.Light.NoActionBar
- Toolbar Theme:
ThemeOverlay.AppCompat.Dark.ActionBar
Nếu bạn muốn menu popup để có ánh sáng bạn có thể thêm này:
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
Tiếp tục Nghiên cứu
Tôi đã học điều này thông qua thử nghiệm và thông qua việc đọc các bài viết sau.