Android Theme.AppCompat.Light with Dark Toolbar (for light text)

Question

I have an app using Theme.AppCompat.Light which I need to use so Dialogs have the light theme. But this makes the text in my toolbar black, where I'd rather it be white. I've tried setting the toolbar's specific app:theme to AppCompat.Dark.Actionbar, but no luck... I searched around for a while and couldn't find a specific question and answer to this.

Here's my default AppTheme:

<style name="AppTheme.Parent" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/blue</item>
    <item name="colorPrimaryDark">@color/dark_blue</item>
    <item name="colorAccent">@color/pink</item>

    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
</style>

Here's my toolbar.xml:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="@dimen/abc_action_bar_default_height_material"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Have you try to set the `style` attribute on your toolbar? – Gaëtan Dec 18 '14 at 16:32 — Gaëtan, Dec 18 '14 at 16:32
@Gaëtan just tried it, and same issue. – Jeff Martin Dec 18 '14 at 17:23 — Jeff Martin, Dec 18 '14 at 17:23

reVerse · Accepted Answer · 2014-12-18T21:06:32.883

17

In order to change the color of the title in your Toolbar you simply have to add the attribute android:textColorPrimary to your Toolbar style.

Please see the following example for even more attributes of the Toolbar.

Example

<style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
    <!-- 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>
    <!-- Color of the Toolbar -->
    <item name="android:background">#455a64</item>
</style>

Result

picture of the result

edited Dec 18 '14 at 21:06

answered Dec 18 '14 at 20:54

reVerse

35,075
22
89
84

1

Unfortunately, this doesn't do anything for me :s. Out of curiosity, what's your min SDK version? – Jeff Martin Dec 18 '14 at 22:21
1

14 but this shouldn't matter at all. Did you set the style properly in the `app:theme`? – reVerse Dec 18 '14 at 22:54
I tried again and it worked... I think the issue with your code was the parent="ThemeOverlay.AppCompat.ActionBar". I used "parent="Theme.AppCompat.Light" and got the results instead. Marking yours as right as it had the right code essentially (setting textColorPrimary in a dedicated Toolbar style). Thanks! – Jeff Martin Dec 18 '14 at 23:08
Great to hear. Actually the parent stuff is optional afaik. – reVerse Dec 18 '14 at 23:15
interesting... not sure what it is/was then. The new Toolbar code is pretty wonky still, it seems. – Jeff Martin Dec 18 '14 at 23:23
On a related note: from my experience with `AppCompat`, you should still define the `background` in the Toolbar's xml and not on the Toolbar style you apply with `app:theme` (in this case, `MyToolbarStyle`) or the color will be propagated to the overflow menu, even if you set a `app:popupTheme`, which might be inappropriate in many cases. – user1987392 Feb 07 '15 at 18:05
The menu background is white and the menu text color is white = box of white – Someone Somewhere Aug 27 '16 at 13:57
setting the "android:background" in the style to the primary color, did fix it the menu background color to not be white. (I was previously setting the toolbar background in the layout xml and I got a white option menu background) – Someone Somewhere Aug 27 '16 at 14:16

score 2 · Answer 2 · answered Dec 18 '14 at 17:46

2

You can customize toolbar yourself no need to set default text, use your own textview :

<android.support.v7.widget.Toolbar
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="?attr/colorPrimary"
   android:minHeight="@dimen/abc_action_bar_default_height_material">

   <!-- Below will add your text in the center of toolbar -->
   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Your Text"
        android:textColor=#ff0000
        android:textStyle="bold"/>

</android.support.v7.widget.Toolbar>

answered Dec 18 '14 at 17:46

Abhinav Puri

4,254
1
16
28

There's no need to add an additional `TextView` to the `Toolbar` in order to change the color of the title. `android:textColorPrimary` does this already - see my answer as well. – reVerse Dec 18 '14 at 20:55
There is no option called android:textColorPrimary for android.support.v7.widget.Toolbar. (At least for API 16) – Dmitry Guselnikov Jun 14 '15 at 12:56
@elf_zwölf Not for the Toolbar itself but for the `Style` which you can apply to the `Toolbar` – reVerse Jun 15 '15 at 15:13

score 0 · Answer 3 · answered Aug 13 '17 at 06:05

While custom styling may work, the AppCompat library already provides an easy way to do this. If your Toolbar's background color is dark/doesn't provide enough contrast, use `ThemeOverlay.AppCompat.Dark as its parent:

<style name="MyTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark" />

Then style your `Toolbar accordingly:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/some_dark_color"
    android:theme="@style/MyTheme.PopupOverlay" />

Toolbars using backgrounds with lighter colors should use ThemeOverlay.AppCompat.Light as their parent.

score 0 · Answer 4 · answered Apr 14 '21 at 14:01

try this work in 2021, the first set of themes in the activity android:theme="@style/AppTheme.NoActionBar" and set theme in xml

 <style name="AppTheme.NoActionBar">
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    <item name="windowNoTitle">true</item>
</style>

Android Theme.AppCompat.Light with Dark Toolbar (for light text)

4 Answers4

Example

Result

Linked