Cách áp dụng chủ đề cho Thanh công cụ Android?

Question

Tôi đã dành một lượng thời gian không cố định để tìm hiểu cách áp dụng một số kiểu dáng đơn giản cho Thanh công cụ, nhưng hoàn toàn bị bối rối. Cụ thể là tôi muốn thay đổi màu của Tiêu đề và Phụ đề và biểu tượng menu tràn (ba dấu chấm). Tôi có thể đặt màu văn bản thành công trong bố cục, nhưng không phải trong Chủ đề, tôi không biết tại sao.

<android.support.v7.widget.Toolbar 
    theme="@style/Toolbar" 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="?attr/actionBarSize" 
    android:background="@color/orange" 
    app:popupTheme="@style/AppTheme.PopupOverlay" 
    /> 

styles.xml:

<style name="Toolbar" parent="Widget.AppCompat.Toolbar"> 
    <item name="titleTextStyle">@style/ToolbarTitle</item> 
    <item name="titleTextAppearance">@style/ToolbarTitleTextAppearance</item> 
    <item name="popupTheme">@style/AppTheme.PopupOverlay</item> 
</style> 

<style name="ToolbarTitle" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Title"> 
    <item name="titleTextAppearance">@style/ToolbarTitleTextAppearance</item> 
    <item name="android:textColor">#FF0000</item> 
</style> 

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"> 
</style> 

Chủ đề PopupOverlay được áp dụng cho menu tràn popup, vì vậy các Theme Toolbar được rõ ràng đang được áp dụng, nhưng TextAppearance không hoạt động, văn bản vẫn là màu đen. Tôi đã thử rất nhiều hình thức thay thế nhưng không có niềm vui. Khi tôi thử một cái gì đó và nó không hoạt động tôi đang ở một mất mát để biết nơi để thậm chí bắt đầu tìm hiểu để hiểu tại sao. Mẹo để gỡ lỗi các vấn đề như thế này được hoan nghênh! Thật khó chịu khi mất vài giờ để thay đổi kiểu dáng giao diện người dùng rất đơn giản, nhưng nhiều khía cạnh của bố cục, kiểu dáng, chủ đề & AppCompat khiến tôi hoàn toàn bối rối và đoán.

Answer 1

Tiếp theo nên làm việc cho bạn:

styles.xml

<style name="Base_ToolbarStyle"> 
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item> 
    <item name="android:background">?colorPrimary</item> 
    <item name="android:theme">@style/Base_ToolbarTheme</item> 
    <item name="titleTextAppearance">@style/CustomTitleTextAppearance</item> 
    <item name="subtitleTextAppearance">@style/CustomSubTitleTextAppearance</item> 
</style> 

<style name="Base_ToolbarTheme"> 
    <!-- Color used for the title of the Toolbar - as long as not overridden --> 
    <item name="android:textColorPrimary">@color/pink_500_primary</item> 
    <!-- Used to color back button and three dots --> 
    <item name="android:textColorSecondary">@color/yellow_500_primary</item> 
</style> 

<style name="CustomTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"> 
    <item name="android:fontFamily">@string/ff_roboto_condensed</item> 
    <item name="android:textSize">16sp</item> 
    <item name="android:textColor">@color/amber_500_primary</item> 
    <item name="android:textStyle">bold</item> 
</style> 

<style name="CustomSubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle"> 
    <item name="android:fontFamily">@string/ff_roboto_condensed</item> 
    <item name="android:textSize">14sp</item> 
    <item name="android:textColor">@color/pink_500_primary</item> 
    <item name="android:textStyle">italic</item> 
</style> 

Layout.xml

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    style="@style/Base_ToolbarStyle" 
    android:layout_width="match_parent" 
    android:layout_height="?actionBarSize" 
    android:elevation="4dp" /> 

Kết quả:

Lưu ý: tôi đã thực hiện các phong cách có mục đích như xấu xí càng tốt. : <

Vậy làm thế nào để bạn tìm ra điều này. Trong trường hợp của textAppearances bạn chỉ cần nhìn vào các lớp cha mẹ, ví dụ: TextAppearance.Widget.AppCompat.Toolbar.Title. Ở đó bạn sẽ tìm thấy một cái gì đó giống như cuối cùng này:

<style name="TextAppearance.Material.Widget.ActionBar.Title" 
     parent="TextAppearance.Material.Title"> 
    <item name="textSize">@dimen/text_size_title_material_toolbar</item> 
    <item name="textColor">?attr/textColorPrimary</item> 
</style> 

Nhấp vào phụ huynh một lần nữa cho thấy như sau:

<style name="TextAppearance.Material"> 
    <item name="textColor">?attr/textColorPrimary</item> 
    <item name="textColorHint">?attr/textColorHint</item> 
    <item name="textColorHighlight">?attr/textColorHighlight</item> 
    <item name="textColorLink">?attr/textColorLink</item> 
    <item name="textSize">@dimen/text_size_body_1_material</item> 
    <item name="fontFamily">@string/font_family_body_1_material</item> 
</style> 

Vì vậy, trong bản tóm tắt chúng ta biết tất cả các thuộc tính chúng ta có thể điều chỉnh ngay bây giờ. Áp dụng một phong cách cho các Toolbar thay vì một chủ đề là nhiều hơn hoặc ít hơn kết quả của một số quá trình thử và lỗi mặc dù. ;)