CODEWITHSUNDEEP
androidtoolbar
Nemesis
Nemesis

Reputation: 1148

Proper toolbar styling

I would like to avoid applying a style to the toolbars in all layouts, so I have a style I created for it:

<style name="DarkToolbar" >
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:textColorSecondary">@color/white</item>
        <item name="android:background">@color/blue</item>
        <item name="android:elevation">4dp</item>
</style>

And I added it to my theme as follows:

<style name="Theme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/blue</item>
        <item name="colorAccent">@color/blue</item>
        <item name="android:toolbarStyle">@style/DarkToolbar</item>
</style>

This is the resulting toolbar: toolbar with style applied in theme

As you can see, the title and subtitle have the wrong formatting. If I remove the style from the theme and apply it directly to the toolbar in the layout, I get the following result instead:

enter image description here

Both images use the same style. One is applied through the app theme with 

<item name="android:toolbarStyle">@style/DarkToolbar</item>

and the second one is applied directly to the toolbar with

style="@style/DarkToolbar"

Does anyone know the reason for the difference? Also, does anyone know why the 

<item name="android:textColorPrimary">@color/white</item>
<item name="android:textColorSecondary">@color/white</item>

Are not being applied?

Thanks

Upvotes: 1

Views: 650

Answers (3)

Randhir Gupta
Randhir Gupta

Reputation: 64

You are setting parent as no action bar in your theme, as this will give you the run time exception and null point exception as there is no action bar or tool bar to set the title/sub-title. Try adding parent in your theme with toolbar or action bar likes this. 

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="DarkToolbar">
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:textColorSecondary">@color/white</item>
        <item name="android:background">@color/blue</item>
        <item name="android:elevation">4dp</item>
    </style>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/blue</item>
        <item name="colorAccent">@color/blue</item>
        <item name="android:toolbarStyle">@style/DarkToolbar</item>
    </style>
</resources>

Upvotes: 0

Ait Bri
Ait Bri

Reputation: 587

I think this has to do with

< item name="android:theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar< /item>

in your style

I personally find styling toolbar text quite complicated, so mostly end up with my own TextView. How about using your own TextView inside toolbar. It would be easy, though a bit lengthy.

Upvotes: 0

princeparadoxes
princeparadoxes

Reputation: 498

Add parent="Widget.AppCompat.Toolbar" to your toolbar style. It is default style for toolbar.

For example:

<style name="DarkToolbar" parent="Widget.AppCompat.Toolbar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:textColorSecondary">@color/white</item>
    <item name="android:background">@color/blue</item>
    <item name="android:elevation">4dp</item>
</style>

Upvotes: 2

Related Questions