Wie man ein Thema auf eine Android Toolbar anwendet?

Question

Ich habe übermäßig viel Zeit damit verbracht, herauszufinden, wie man ein einfaches Design auf eine Toolbar anwendet, bin aber absolut ratlos. Insbesondere möchte ich die Farbe des Titels und des Untertitels und des Überlaufmenüsymbols (drei Punkte) ändern. Ich kann die Textfarben erfolgreich im Layout einstellen, aber nicht im Theme, ich habe keine Ahnung warum.

<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> 

Das PopupOverlay Thema auf das Überlaufmenü Popup angelegt wird, so dass die Toolbar Theme klar angewendet wird, aber die TextAppearance nicht funktioniert, bleibt der Text schwarz. Ich habe eine sehr große Vielfalt an alternativen Formen versucht, aber ohne Freude. Wenn ich etwas versuche und es nicht funktioniert, weiß ich nicht, wo ich überhaupt anfangen soll zu verstehen, warum. Tipps zum Debuggen von Themes wie diesem sind willkommen! Es ist zutiefst frustrierend, einige Stunden zu verlieren, was sehr einfache UI-Styling-Änderungen sein sollte, aber die vielen Facetten von Layouts, Stilen, Themen & AppCompat lassen mich völlig verwirrt und raten.

Answer 1

Nach Sie sollten arbeiten:

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" /> 

Ergebnis:

Hinweis: Ich habe den Stil absichtlich so hässlich wie möglich gemacht. : <

Also, wie findest du das heraus? Nun, im Fall der textAppearances betrachten Sie nur die Elternklassen, z.B. TextAppearance.Widget.AppCompat.Toolbar.Title.

<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> 

Ein Klick auf die Mutter wieder ergibt sich folgendes Bild:

<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> 

Also zusammenfassend wir kennen alle Eigenschaften, die wir jetzt zwicken Dort gibt es so etwas wie dieses schließlich finden. Das Anwenden eines Stils auf das Toolbar anstelle eines Themas ist jedoch mehr oder weniger das Ergebnis eines Versuchs- und Fehlerprozesses. ;)