How to change toolbar color

Question

I've been searching how to customize the toolbar, for example how to add background color, but I don't understand how it works.

I've been trying to add a custom style for my toolbar but any result ...

The Manifest

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Design">

The style.xml file

<resources>

    <style name="Theme.Design" parent="Base.Theme.Design">
    </style>

    <style name="Base.Theme.Design" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/red</item>
        <item name="colorPrimaryDark">@color/red</item>
        <item name="colorAccent">@color/red</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="android:windowActionBarOverlay">true</item>
        <item name="windowActionBarOverlay">true</item>
    </style>    
    ...

And the toolbar in layout

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

Cannonade

Answer 1

Thanks, but any solution works.

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

or

toolbar.setBackgroundColor(Color.parseColor("#80000000"));

May be because my toolbar is in android.support.design.widget.CoordinatorLayout (to put a android.support.design.widget.FloatingActionButton) ?

Cannonade

Answer 2

In fact, there was a Android Developers pro-tip which go into details on how to color the Toolbar using colorPrimary.

You were definitely on the right track, adding colorPrimary to your theme. What you need is to set the background on the Toolbar:

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

Note, if you have a dark colorPrimary and a light theme, you'll need to also add android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" to ensure the text and icons are white over the dark background.

Pome

but how can i do it dynamically as i am using common toolbar throughout the app and sometimes we want different style, especially gradient background to the same toolbar somewhere, that should also allow me to change font style of toolbar title or for the textview that is under that toolbar?! – Disease

Answer 3

set Color from resource file

toolbar.setBackgroundColor(getResources().getColor(R.color.red));

Petrous

Answer 4

Try to use

<item name="android:windowBackground">@color/primary</item>

in your styles. It's the same tag name with window background, but changes the toolbar background color only when you use it with your toolbar styles.

Bull

Answer 5

Use this

toolbar.setBackgroundColor((Color.parseColor("#80000000")));

Dental

Thank you, but it don't work. May be because i'm in a CoordinatorLayout ? – Cannonade

Answer 6

You can set the background in the xml.

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

Rafferty

Thank you, but it don't work. May be because i'm in a CoordinatorLayout ? – Cannonade

Answer 7

My answer is put in your styles.xml :

 <item name="android:textColor">@color/colorPrimaryDark</item>

Like in my folder :

<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">

<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:fontFamily">@font/asap</item>
<item name="android:textColor">@color/colorPrimaryDark</item>

</style>

Worst