Search code examples
androidandroid-actionbarmaterial-designandroid-themeandroid-statusbar

The theme doesn't apply with custom action bar


I am using Theme.Main for almost all of my classes, but some of them require additional elements in the action bar. For that reason I've created custom action bar and Theme.CustomTheme.

Theme:

<style name="Theme.Main" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">#212121</item>
    <item name="colorPrimaryVariant">#000000</item>
    <item name="colorOnPrimary">#FFFFFF</item>
    <!-- <item name="colorSecondary">#2962FF</item> -->
    <!-- <item name="colorSecondaryVariant">#0039CB</item> -->
    <item name="colorSecondary">#000000</item>
    <item name="colorSecondaryVariant">#000000</item>
    <item name="colorOnSecondary">#FFFFFF</item>
    <item name="colorError">#F44336</item>
    <item name="colorOnError">#FFFFFF</item>
    <item name="colorSurface">#FFFFFF</item>
    <item name="colorOnSurface">#212121</item>
    <item name="android:colorBackground">@color/background</item>
    <item name="colorOnBackground">#212121</item>
</style>

<!-- Custom theme -->
<style name="Theme.CustomTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">#212121</item>
    <item name="colorPrimaryVariant">#000000</item>
    <item name="colorOnPrimary">#FFFFFF</item>
    <!-- <item name="colorSecondary">#2962FF</item> -->
    <!-- <item name="colorSecondaryVariant">#0039CB</item> -->
    <item name="colorSecondary">#000000</item>
    <item name="colorSecondaryVariant">#000000</item>
    <item name="colorOnSecondary">#FFFFFF</item>
    <item name="colorError">#F44336</item>
    <item name="colorOnError">#FFFFFF</item>
    <item name="colorSurface">#FFFFFF</item>
    <item name="colorOnSurface">#212121</item>
    <item name="android:colorBackground">@color/background</item>
    <item name="colorOnBackground">#212121</item>
</style>

Custom xml with custom action bar:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/custom_toolbar2"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="text"
            android:textColor="@android:color/white"
            android:textSize="18sp"
            android:textStyle="bold" />

    </com.google.android.material.appbar.MaterialToolbar>

</com.google.android.material.appbar.AppBarLayout>

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/appBarLayout" />
</RelativeLayout>

Manifest for this class:

<activity android:name=".TestActivity"
    android:theme="@style/Theme.CustomTheme">
</activity>

The problem is that when I apply my custom theme with custom action bar, my status bar color is blue. I haven't specified this color anywhere whatsoever. I believe the theme didn't apply. When I use my Theme.Main without any custom action bars, everything's fine. Any ideas? Thank you.


Solution

  • Changing the status bar color can be done by two ways

    • XML Put this attribute in the theme

      <item name="colorPrimaryDark">#F44336</item>

    For API level 21 and above use

    <item name="android:statusBarColor">#F44336</item>
    
    • Programatically

      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setStatusBarColor(Color.parseColor("#0288d1")); }