Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 302
pdegand59 Avatar asked Jul 04 '16 09:07

pdegand59


People also ask

What is the toolbar in Android?

Overview. Toolbar was introduced in Android Lollipop, API 21 release and is the spiritual successor of the ActionBar. It's a ViewGroup that can be placed anywhere in your XML layouts. Toolbar's appearance and behavior can be more easily customized than the ActionBar.

How do I remove the default toolbar?

You can just use Theme. AppCompat. NoActionBar and it'll work, even if Theme is in red.

What is mobile toolbar?

On Android devices, a TOOLBAR can be used to define the action views that appear in the Android action bar. Toolbar action views are listed first and ordered as they are defined in the TOOLBAR section, followed by the default action views for remaining actions that are not part of the TOOLBAR definition.


1 Answers

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

like image 114
Chris Banes Avatar answered Oct 05 '22 17:10

Chris Banes