android change toolbar title color to white

Question

The toolbar title in my application displays grey color instead of white.Below is the code.Please help me!!I have edited the code.I have included java code and entire activity_main.xml

Java code:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

activity_main.xml:

   <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/relative"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg7"
       >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#50000000"
            app:theme="@style/ActionBarThemeOverlay"
            app:popupTheme="@style/ActionBarPopupThemeOverlay"

            />

        <com.miguelcatalan.materialsearchview.MaterialSearchView
            android:id="@+id/search_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/MaterialSearchView"/>

        <ImageView
            android:id="@+id/image2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="#90000000" />

        <RelativeLayout
            android:id="@+id/relative2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_gravity="right|center_vertical"
                android:layout_marginLeft="20dp"
                android:background="@drawable/marker"></ImageView>

            <fr.ganfra.materialspinner.MaterialSpinner
                android:id="@+id/spinner1"

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"

                android:layout_marginLeft="50dp"
                android:layout_marginRight="10dp"
                app:ms_alignLabels="false"
                app:ms_arrowColor="@color/arrow"
                app:ms_arrowSize="8dp"
                app:ms_hintColor="@color/hint"
                app:ms_multiline="true"
                app:ms_thickness="0.0dp"
                app:popupTheme="@android:color/transparent"

                />


        </RelativeLayout>


    </RelativeLayout>

styles.xml:

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

</style>

colors.xml: <

color name="colorPrimary">#8C9EFF</color>
    <color name="colorPrimaryDark">#903F51B5</color>
    <color name="colorAccent">#ffffff</color>

Screenshot:

Answer 1

Add this to your theme:

<item name="actionBarStyle">@style/Widget.ActionBar</item>

And then create this style:

<style name="Widget.ActionBar" parent="@style/Widget.AppCompat.ActionBar">
    <item name="titleTextStyle">@style/TextAppearance.Widget.ActionBar.Title</item>
    <item name="subtitleTextStyle">@style/TextAppearance.Widget.ActionBar.Subtitle</item>
</style>

<style name="TextAppearance.Widget.ActionBar.Title" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

<style name="TextAppearance.Widget.ActionBar.Subtitle"
           parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle">
    <item name="android:textColor">@color/white</item>
</style>

Answer 2

Try this :

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="@style/HeaderBar"
app:theme="@style/ActionBarThemeOverlay"
app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

And you can have the full control of your ui elements with these styles:

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

 <style name="HeaderBar">
<item name="android:background">?colorPrimary</item>
 </style>

<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:background">@android:color/white</item>
<item name="android:textColor">#000</item>
</style>

Answer 3

set the theme of the application to AppTheme in AndroidManifest.xml

Hope this helps.

UPDATE Change the parent of the style to DarkActionBar and see what happesn.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

</style>

Answer 4

<android.support.v7.widget.Toolbar
    android:id="@+id/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="50dp"
    android:background="#ffffff"
    app:theme="@style/ThemeOverlay.AppCompat.Light">

Answer 5

You can use toolbar inside app bar

<android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleTextColor="#FFFFFF" />
    </android.support.design.widget.AppBarLayout>

or in your style.xml file

style.xml

<style name="AppTheme1" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/primary_color</item>
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:popupMenuStyle">@style/popupMenuStyle</item>
    </style>

    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/primary_color</item>
        <item name="android:icon">@drawable/ic_logo</item>

         <!--this is you want-->

        <item name="android:titleTextStyle">@style/MyTheme.ActionBar.TitleTextStyle</item>
    </style>

    <style name="MyTheme.ActionBar.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#ffffff</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="popupMenuStyle" parent="@android:style/Widget.PopupMenu">
        <item name="android:popupBackground">@color/new_popup_color</item>
    </style>

Answer 6

in your toolbar

 style="@style/TitleTextWhite"

This goes in styles.xml

<style name="TitleTextWhite">
    <item name="android:textColor">@color/White</item>
</style>

Answer 7

this is other way to change the toolbar color using java

toolbar.setTitleTextColor(ContextCompat.getColor(getApplicationContext(), R.color.YOUR_COLOR));

If your min API level is under 23, it could do the job.

As always, If I'm wrong, please correct me.