CODEWITHSUNDEEP
androidtoolbar
Selorbis
Selorbis

Reputation: 571

How to change toolbar color

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

Upvotes: 20

Views: 70687

Answers (7)

M&#233;lanie Marliacy
M&#233;lanie Marliacy

Reputation: 1

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>

Upvotes: 0

Aditya varale
Aditya varale

Reputation: 467

set Color from resource file

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

Upvotes: 5

Acuna
Acuna

Reputation: 1837

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.

Upvotes: 2

user4328851
user4328851

Reputation:

Use this

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

Upvotes: 1

Selorbis
Selorbis

Reputation: 571

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

Upvotes: 27

MrPlow
MrPlow

Reputation: 1224

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

Upvotes: 1

ianhanniballake
ianhanniballake

Reputation: 199795

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.

Upvotes: 8

Related Questions