ozapa
ozapa

Reputation: 281

AppCompat toolbar dark theme style not working on pre 21 devices

First of all I have repeatedly read and applied everything posted here, but it does not solve my problem. It seems that every answer posted here is to apply style to theme attribute of the toolbar, i've tried it it got me nowhere, so let me explain what my problem is:

I want to have light theme everywhere except the toolbar. On Lollipop devices, it's not a problem, but on pre Lollipop devices toolbars Title and overflow button always adopts MyTheme parent style, so I get dark Title and dark overflow button (it's my only button there) it seems like theme attribute is malfunctioning in Toolbar.

I'm using AppCompatActivity for my base class, my minimum api is 15 and AppCompat version is 22.2.1.0

Here's my code:

<android.support.v7.widget.Toolbar     
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>



<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/primary_color</item> 
    <item name="colorPrimaryDark">@color/dark_primary_color</item> 
    <item name="colorAccent">@color/accent_color</item>
    <item name="android:statusBarColor">@color/dark_primary_color</item>
    <item name="selectableItemBackground">?android:attr/selectableItemBackground</item>
</style>

Toolbar with dark title

my hamburger item is white because I inflate image from resource

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.Title = "Sport";

if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
    Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);

 if (SupportActionBar != null){
 SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_menu_white_24dp);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
}

Upvotes: 4

Views: 3742

Answers (2)

ozapa
ozapa

Reputation: 281

This is what worked for me in the end:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:titleTextColor="@android:color/white"
    local:theme="@style/ToolbarTheme"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<style name="ToolbarTheme"  parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">@color/primary_color</item>
    <!-- Used to for the title of the Toolbar -->
    <item name="android:textColorPrimary">#fff</item>
    <!-- Used to for the title of the Toolbar when parent is Theme.AppCompat.Light -->
    <item name="android:textColorPrimaryInverse">#fff</item>
    <!-- Used to color the text of the action menu icons -->
    <item name="android:textColorSecondary">#fff</item>
    <!-- Used to color the overflow menu icon -->
    <item name="actionMenuTextColor">#fff</item>
</style>

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary_color</item> 
    <item name="colorPrimaryDark">@color/dark_primary_color</item> 
    <item name="colorAccent">@color/accent_color</item>
    <item name="android:statusBarColor">@color/dark_primary_color</item>
    <item name="colorControlNormal">#fff</item>
</style>

In this case ColorControlNormal colored overflow icon and titleTextColor colored Title. It seems that in my case ToolbarTheme doesn't work. I don't have a clue why is it, but now I don't care. This is not an optimal solution but it works.

Upvotes: 1

KudzieChase
KudzieChase

Reputation: 261

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>

Try This combination in your toolbar code it should work just fine.

Upvotes: 1

Related Questions