Change title color in toolbar?

Question

I have a toolbar that I use, and set title with:

((ActionBarActivity)getActivity()).getSupportActionBar().setTitle("Home");

Is there a way to change the color from black to white?

I tried making its own theme and setting it in the xml like this, but no dice:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme2" parent="Theme.AppCompat">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="android:textColorPrimary">@color/primary_text</item>
        <item name="android:textColorSecondary">@color/secondary_text</item>

    </style>

    <style name="Widget.MyApp.ActionBar" parent="Widget.AppCompat.ActionBar">
        <item name="android:background">@color/primary</item>
        <item name="theme">@style/ThemeOverlay.MyApp.ActionBar</item>
        <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    </style>

    <style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
        <item name="android:textColorPrimary">#FFFFFF</item>
    </style>



</resources>

XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5e5e5"
    android:orientation="vertical" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/primary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.MyApp.ActionBar">

        <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/statsSpin"
            android:spinnerMode="dropdown"
            android:textColor="#FFFFFF"/>


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



    <ListView
        android:id="@+id/yourStats"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:dividerHeight="0px"
        android:divider="@null"

        >
    </ListView>



</LinearLayout>

it is repeated question answered at http://stackoverflow.com/a/2285722/2149195 — RBK, Mar 10 '15 at 02:02
@RaviKoradiya That answer is outdated, FWIW, for an old version of Android. — , Nov 09 '15 at 20:58
It's not an answer but an info. You don't need to write ((ActionBarActivity)getActivity()).getSupportActionBar().setTitle("Home"); to change the Toolbar Title. Just write setTitle(getString(R.string.title)); that's it — codepeaker, Mar 10 '17 at 18:19

score 56 · Accepted Answer · answered Mar 10 '15 at 01:43

56

Programatically:

toolbar.setTitleTextColor(0xFFFFFFFF);

answered Mar 10 '15 at 01:43

tachyonflux

20,103
7
48
67

1

it will support above api 23 – Asthme Sep 19 '15 at 05:10
8

Not if you're using the AppCompat library. – zundi May 23 '16 at 20:14
1

worked for me with: `toolbar.setTitleTextColor(android.graphics.Color.WHITE);` .. thanks! – Gene Bo Jul 26 '16 at 23:38
1

can we get a modern answer with darktheme awareness? – behelit Jun 08 '19 at 23:56

ianhanniballake · Answer 2 · 2017-05-20T02:59:37.443

Per the Theme vs Style blog post by the creator of AppCompat and the post on version 21 of AppCompat, a DarkActionBar toolbar (i.e., a Toolbar with a dark background and light text), can be accomplished by adding android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar's XML:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/primary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/statsSpin"
        android:spinnerMode="dropdown"/>


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

This will change text color and the default colors to many attributes (such as your Spinner to light text as is needed for the dark background.

Prior to [AppCompat 22.1](https://android-developers.googleblog.com/2015/04/android-support-library-221.html), you had to use `app:theme` - if you are using a version later than that (which you should at this point), then yes, you should be using `android:theme` everywhere. I've updated my answer to reflect today's best practices. — ianhanniballake, May 20 '17 at 02:59

score 28 · Answer 3 · answered Sep 30 '15 at 12:00

28

Create a new style in application base theme

  <style name="custom_toolbar" parent="@style/Widget.AppCompat.Toolbar">
        <item name="titleTextColor">#replace with color</item>
  </style>

and use the style for the toolbar

  <item name="toolbarStyle">@style/custom_toolbar</item>

answered Sep 30 '15 at 12:00

Sanal

418
6
17

2

Note that "toolbarStyle" attribute only api 21+ – eugeneek Nov 03 '15 at 07:33

score 10 · Answer 4 · answered Apr 26 '17 at 13:40

I know there are a lot of answers above hope, it will help someone who doesn't understand above answers.

Android has view called Toolbar.This view has title which always takes as default color from color.xml resources which item name is accent.You can change your toolbar color in two way.

Via xml which I recommend you to do that, here below you can see example

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:titleTextColor="@color/White" />Here you can change it.Remember APP attribute not ANDROID

Via programmatically within activity or fragment.

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setTitleTextColor(ContextCompat.getColor(this, R.color.colorAccent));

score 6 · Answer 5 · answered Feb 22 '16 at 07:31

6

If you want to change only title text color than, Try this one..

getSupportActionBar().setTitle(Html.fromHtml("<font color='#746E66'>"+titleText+"</font>"));

it works..!!

answered Feb 22 '16 at 07:31

Sandip Patel

501
4
14

score 3 · Answer 6 · answered Oct 19 '17 at 04:26

You can define custom tool bar style by extending Widget.AppCompat.Toolbar and setting titleTextAppearance and subtitleTextAppearance properties. This way you can change color and text size of title and subtitle of toolbar for reference http://www.zoftino.com/android-toolbar-tutorial .

<style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/MyToolBarStyle</item>
    </style>
    <style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="titleTextAppearance">@style/MyTitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/MySubTitleTextAppearance</item>
    </style>
    <style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">25dp</item>
        <item name="android:textColor">#ff3d00</item>
    </style>
    <style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">20dp</item>
        <item name="android:textColor">#1976d2</item>
    </style>

score 2 · Answer 7 · edited Mar 05 '23 at 15:48

Here I fixed it using the code below and it works on every API level:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
    <item name="toolbarStyle">@style/CustomToolBarStyle</item>
</style>

<style name="CustomToolBarStyle" parent="@style/Widget.AppCompat.Toolbar">
    <item name="titleTextColor">@color/title_text_color</item>
</style>

score 1 · Answer 8 · answered Aug 14 '17 at 09:10

It can be changed programatically as you can above answer. But reduce code complexity, you should change it via style.xml First of all create attrs.xml to under res/values folder than add two reference to attrs.xml folder like below

attrs.xml

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
    <attr name="toolbar_theme" format="reference" />
    <attr name="toolbar_theme_title" format="reference" />
</resources>

After defination of reference than create a style in style.xml like below

style.xml

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="colorPrimary">#00A4E4</item>
      <item name="colorPrimaryDark">#AB0634</item>
      <item name="colorAccent">#AB0634</item>
      <item name="toolbar_theme">@style/CustomTheme.Toolbar</item>
      <item name="toolbar_theme_title">@style/CustomTheme.Toolbar.Title</item>
      <item name="android:textColorPrimary">@color/black</item>
      <item name="android:textColorSecondary">@android:color/black</item>
      <item name="windowActionModeOverlay">true</item>
</style>

<style name="CustomTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
     <!-- if you have a navigationdrawer you change it color also -->
     <item name="colorControlNormal">#AB0634</item>
</style>

<style name="CustomTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
     <!-- Set title size -->
     <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>
     <!-- Set title color -->
     <item name="android:textColor">#AB0634</item>
</style>

Now we have created toolbar_theme and toolbar_theme_title reference in attrs.xml than give these references to our custom theme in style.xml

Finally we give this reference to toolbar like below

<android.support.v7.widget.Toolbar
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="?attr/colorPrimary"
     android:theme="?attr/toolbar_theme"
     app:titleTextAppearance="?attr/toolbar_theme_title"
     android:elevation="4dp"
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Thats it. You can give this theme programatically or set in androidmanifest.xml like below.

programmatically

 public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setTheme(R.style.CustomTheme); // (for Custom theme)
    this.setContentView(R.layout.myactivity);

androidmanifest.xml

 <application
     android:theme="@style/CustomTheme">

or

 <activity
     android:theme="@style/CustomTheme">

score 0 · Answer 9 · answered Sep 13 '16 at 06:01

0

To extend on tachyonflux, to set color with a HEX

 toolbar.setTitleTextColor(Color.parseColor("#519c3f"));

answered Sep 13 '16 at 06:01

ZeroNine

721
1
11
29

score 0 · Answer 10 · answered Feb 10 '17 at 15:47

toolbar.setTitleTextColor(getResources().getColor(R.color.black));

(toolbar is the name you've give your toolbar in your acitivyt class) (In your colors values xml set your desired colors and reference it to the color name you chose, as seen here I keep some of my main colors normal names) Took me a while to figure this out myself but this is the only way I can get it to work, the ThemEditor should allow this but it is what it is.

score 0 · Answer 11 · answered Apr 05 '17 at 07:05

In xml:

app:titleTextColor="@color/White" as

<android.support.v7.widget.Toolbar
    android:id="@+id/tb_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/AppTheme.DarkToolbar"
    app:titleTextColor="@color/White" />

score 0 · Answer 12 · answered Jul 14 '17 at 09:05

Use this code

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:titleTextColor="@color/colorAccent"
        app:theme="@style/ToolbarColoredBackArrow"
        app:subtitleTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

score 0 · Answer 13 · answered Dec 13 '17 at 07:54

You can change the theme of your action bar using the attribute actionBarTheme as follow. Although it has been added in API level 21 it seems to be compatible with older APIs.

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="actionBarTheme">@style/AppTheme.AppBarOverlay</item>
</style>

score 0 · Answer 14 · answered Apr 02 '18 at 09:27

0

In Kotlin, using Sandip's answer:

with(getSupportActionBar()) {
        val titleText: String = title.toString()
        setTitle(Html.fromHtml("<font color='#746E66'>" + titleText + "</font>"))
    }

answered Apr 02 '18 at 09:27

Jerry U

618
9
22

score 0 · Answer 15 · answered Sep 25 '18 at 10:34

0

You can change it programmatically by using following code.

toolbar.setTitleTextColor(android.graphics.Color.WHITE);

answered Sep 25 '18 at 10:34

Junaid Ali

175
1
2
14

score 0 · Answer 16 · answered Mar 26 '19 at 21:04

0

Inside of android.support.v7.widget.Toolbar, add this line:

local:titleTextColor="@color/the_color_you_want"

answered Mar 26 '19 at 21:04

score 0 · Answer 17 · answered May 07 '20 at 13:34

I found the rather simple solution.

It can be done by the following ways (by XML or programmatically).

First (XML solution):

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways"
    app:popupTheme="@style/Theme.AppCompat.NoActionBar"
    app:titleTextColor="@color/white" />

Second (programmatically):

val toolbar = findViewById<Toolbar>(R.id.toolbar)
toolbar.setTitleTextColor(Color.WHITE)

The second solution requires min SDK version over 21, for your note.

Change title color in toolbar?

17 Answers17

Linked