Come applicare un tema a una barra degli strumenti Android?

Question

Ho trascorso una quantità eccessiva di tempo cercando di capire come applicare un semplice stile a una barra degli strumenti, ma sono completamente perplesso. Nello specifico voglio cambiare il colore del titolo e sottotitolo e l'icona del menu di overflow (tre punti). Posso impostare correttamente i colori del testo nel layout, ma non nel tema, non ho idea del perché.

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

Il tema PopupOverlay viene applicato al pop-up menu di overflow, quindi è chiaramente applicato il tema barra degli strumenti, ma il TextAppearance non funziona, il testo rimane nero. Ho provato una grande varietà di forme alternative ma senza gioia. Quando provo qualcosa e non funziona non riesco a capire da dove cominciare a cercare di capire perché. Suggerimenti per il debug di problemi di questo tipo sono i benvenuti! È profondamente frustrante perdere diverse ore in quello che dovrebbe essere un cambio di stile dell'interfaccia utente molto semplice, ma le molteplici sfaccettature di layout, stili, temi & AppCompat mi lasciano completamente confuso e indovinato.

Answer 1

seguente dovrebbe funzionare per voi:

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

Risultato:

Nota: Ho fatto lo stile di proposito brutto come possibile. : <

Quindi come si fa a capire. Bene, nel caso dello textAppearances, basta osservare le classi genitore, ad es. TextAppearance.Widget.AppCompat.Toolbar.Title. Ci troverete qualcosa di simile a questo alla fine:

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

Cliccando sul genitore rivela ancora una volta il seguente:

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

Quindi, in sintesi sappiamo tutti gli attributi che possono modificare ora. Applicare uno stile allo Toolbar invece che a un tema è più o meno il risultato di qualche processo di prova ed errore. ;)