Android Toolbar color not being set by colorPrimary
Toolbar will not get primary color from your theme. You have to set the following xml property of the toolbar
android:background="@color/primary"
This is my working implementation of toolbar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary"
android:minHeight="?actionBarSize">
</android.support.v7.widget.Toolbar>
Hope it works for you too.
Style and theme are different.
The style is local to the Toolbar view, for example the background color.
The theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.
More info here.
With Material Components Library:
the
android:background
attribute in the layout:<com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"
apply the default style:
style="@style/Widget.MaterialComponents.Toolbar.Primary"
or customize the style inheriting from it:<com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" style="@style/Widget.MaterialComponents.Toolbar.Primary"
override the default color using the
android:theme
attribute:<com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/MyThemeOverlay_Toolbar"
with:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textColorPrimary">....</item>
<item name="colorPrimary">@color/.....
<item name="colorOnPrimary">@color/....</item>
</style>
With design support library:
<android.support.v7.widget.Toolbar
style="@style/HeaderBar"/>
where:
<style name="HeaderBar">
<item name="android:background">?colorPrimary</item>
</style>
Otherwise you can define the background for your Toolbar
.
<android.support.v7.widget.Toolbar
android:background="?attr/colorPrimary">
You have to use android:
prefixed attributes in the theme for android 5+, as the non-prefixed variant is only for the app compat parts for versions < android 5.
So you should have one values/styles.xml
for pre-android 5 and one values-v21/styles.xml
for android 5+.
In the v21 styles you define your theme as following:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">@color/light_purple</item>
<item name="android:colorPrimaryDark">@color/dark_purple</item>
<item name="android:colorAccent">@color/dark_purple</item>
</style>
As you now define the colorPrimary attribute once simply as colorPrimary
for pre-Lollipop and once as android:colorPrimary
for Lollipop devices, you can no longer directly use ?attr/colorPrimary
. Instead, like others here said before, you should define your own style for the toolbar, but for both variations:
values/styles.xml:
<style name="Toolbar">
<item name="android:background">?attr/colorPrimary</item>
</style>
values-v21/styles.xml:
<style name="Toolbar">
<item name="android:background">?android:attr/colorPrimary</item>
</style>
And use the style for your toolbar:
<android.support.v7.widget.Toolbar
style="@style/Toolbar"
Like this the background color and other styles can be set on all versions and is still changeable by the colorPrimary
that is set in the theme(s).