CODEWITHSUNDEEP
androidandroid-5.0-lollipopandroid-styles
Khronos
Khronos

Reputation: 381

Changing Lollipop Toolbar Text Colour

I'm trying to style the text in a Lollipop toolbar. However no matter what I try, the colour always comes from the app's "text_primary" style item and not from styles I try to override it with.

Below is an example. I'm trying to make the text white.

Example

colors.xml:

<resources>
    <color name="primary">#8BC34A</color>
    <color name="primary_dark">#669900</color>
    <color name="accent">#64DD17</color>
    <color name="text_primary">#333</color>
    <color name="text_secondary">#424242</color>
    <color name="photo_tint">#424242</color>

    <color name="toolbarTitleText">#fff</color>
    <color name="toolbarActionMenuTextColor">#333</color>
    <color name="toolbarTextColorSecondary">#fff</color>
</resources>

styles.xml:

<resources>
    <style name="AppTheme" parent="AppTheme.Base">

        <item name="android:colorPrimary">@color/primary</item>
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
        <item name="android:colorAccent">@color/accent</item>
        <item name="android:textColorPrimary">@color/text_primary</item>
        <item name="android:textColor">@color/text_secondary</item>
        <item name="android:navigationBarColor">@color/primary_dark</item>

    </style>

    <style name="ToolbarTheme" parent="Theme.AppCompat">
        <item name="android:textColorPrimary">@color/toolbarTitleText</item>
        <item name="android:textColorPrimaryInverse">@color/toolbarTitleText</item>
        <item name="actionMenuTextColor">@color/toolbarActionMenuTextColor</item>
        <item name="android:textColorSecondary">@color/toolbarTextColorSecondary</item>
    </style>

</resources>

toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"
    app:theme="@style/ToolbarTheme"
    android:theme="@style/ToolbarTheme"
    android:titleTextAppearance="@color/toolbarTitleText"
    android:subtitleTextAppearance="@color/toolbarTitleText"
    app:titleTextAppearance="@color/toolbarTitleText"
    app:subtitleTextAppearance="@color/toolbarTitleText"
    />

As you can see, I've tried several ways to apply the "ToolbarTheme" style in toolbar.xml. However nothing is working.

Upvotes: 4

Views: 2141

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

You can set a theme for your toolbar:

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ActionBarThemeOverlay"
        android:background="?attr/colorPrimaryDark" />

Then in your styles.xml:

   <style name="ActionBarThemeOverlay" parent="">
        <item name="textColorPrimary">#fff</item>
        <item name="colorControlNormal">#fff</item>
        <item name="colorControlHighlight">#3fff</item>
    </style>

Upvotes: 1

Khronos
Khronos

Reputation: 381

Fixed.

Change "Theme.AppCompat.Light" to "Theme.AppCompat.Light.DarkActionBar" in styles.xml and the text is white.

Upvotes: 2

Related Questions