CODEWITHSUNDEEP
androidtoolbarandroid-appcompat
pdegand59
pdegand59

Reputation: 13029

Toolbar default style and Navigation Icon

I have a Toolbar inside an AppBarLayout. Here is the XML of both views : 

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarlayout"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:theme="@style/App.ThemeOverlay.Toolbar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"/>

</android.support.design.widget.AppBarLayout>

With the theme : 

<style name="App.ThemeOverlay.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

And the Theme applied to the Activity :

<style name="App.Theme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@android:color/white</item>
</style>

Now, I want to apply a custom titleTextAppearance for the toolbar.

I know that I can use app:titleTextAppearance in my layout's XML but I want to configure it from the theme so that every Toolbar of my app will have the same style without setting the text appearance in every layout.

After a bit of digging in AppCompat source code, I found that Toolbar uses the toolbarStyle of the current theme as its default theme.

The default value of this style is Widget.AppCompat.ActionBar.

So my first guess is to override this style in my theme overlay, and change the titleTextAppearance in this new style :

<style name="App.ThemeOverlay.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="toolbarStyle">@style/App.Style.Toolbar</item>    
</style>

<style name="App.Style.Toolbar" parent="Widget.AppCompat.ActionBar">
    <item name="titleTextAppearance">@style/App.TextAppearance.Toolbar.Title</item>
</style>

<style name="App.TextAppearance.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:textColor">#00FF00</item> (this is some green)
    <item name="android:textAllCaps">true</item>
</style>

This actually overrides the titleTextAppearance of my toolbar but it's also breaking the navigation icon :

Toolbar Style Fail

What is wrong with my configuration that breaks the navigation icon ?

For the record, I tried to remove the toolbarStyle of the theme overlay and used directly in the layout's XML of the toolbar style="@style/App.Style.Toolbar".

This correctly applies the title text appearance and it's not breaking the navigation icon, but this is not optimal as I would have to apply the style to every toolbar of my app, and that's what I'm trying to avoid from the beginning.

Thanks for the helps, Pierre

Upvotes: 6

Views: 4160

Answers (1)

Chris Banes
Chris Banes

Reputation: 31871

Your default style should extend Widget.AppCompat.Toolbar, not Widget.AppCompat.ActionBar. After that it will work just fine.

Upvotes: 6

Related Questions