Develop Reference

How to change the color of "Home" icon at the leftmost by using XML style in Android 10

The ActionBar has two icons, one is the "Overflow" icon at the rightmost, the other is the "Home" icon (Three horizontal lines icon) at the leftmost.
The color of the ActionBar "Overflow" (Rightmost) icon can be changed by the following style:
<style name="ActionBarOverflowStyle" parent="#style/Widget.AppCompat.ActionButton.Overflow" >
<item name="android:tint">#color/red</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionOverflowButtonStyle">#style/ActionBarOverflowStyle</item>
</style>
But how to change the color of "Home" icon at the leftmost by using XML style?
Also when navigating to the next fragment, the "Back" icon will appear in the ActionBar, how to change the color of "Back" icon at the leftmost by using XML style?
Here is the layout xml:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.PopupOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.AppBarOverlay" />
</com.google.android.material.appbar.AppBarLayout>
Here is the style xml:
<style name="MyThemeOverlay_Toolbar" parent="#style/ThemeOverlay.MaterialComponents.ActionBar">
<item name="android:tint">#color/red</item>
<item name="android:iconTint">#color/red</item>
<item name="android:colorControlNormal">#color/red</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionOverflowButtonStyle">#style/ActionBarOverflowStyle</item>
<item name="android:actionBarStyle">#style/MyThemeOverlay_Toolbar</item>
</style>
The color of "Menu" icon can't be changed with this style configuration.
Thanks.

With the help of #GabrieleMariotti, here is the answer for setting both "Home" and "Overflow" icons.
Firstly, remove android:theme attribute from AppBarLayout and Toolbar from layout xml:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.AppBarLayout>
Secondly, set the following items in the styles xml:
<style name="ActionButtonOverflow" parent="#style/Widget.AppCompat.ActionButton.Overflow" >
<item name="android:tint">#color/yellow</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#color/red</item>
<item name="android:actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
</style>
Thanks.

Unable to text Toolbar text color

I have this code in my Activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("My title");
In styles.xml, I have this:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
//more stuff
</style>
<style name="Toolbar" parent="Theme.AppCompat">
<item name="android:textAppearance">#style/Toolbar.Text</item>
</style>
<style name="Toolbar.Text">
<item name="android:textColor">#android:color/white</item>
</style>
and the Toolbar layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar" />
I want the toolbar's text to be white, but it is black. I have tried lot of things but I really can't change it.

Whatever it is, The issue is come from this line :
<style name="Toolbar" parent="Theme.AppCompat">
And this: app:theme="#style/Toolbar" (You've used app instead of android, Be careful about that)
And you don't really need to do that.
Just use this line for the Toolbar:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
So:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme" />
Then you should see the white text and etc
As you can see, I've set the app:popupTheme to AppTheme which the parameter is :
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
After adding that line to the Toolbar, Now you can remove these:
<style name="Toolbar" parent="Theme.AppCompat">
<item name="android:textAppearance">#style/Toolbar.Text</item>
</style>
<style name="Toolbar.Text">
<item name="android:textColor">#android:color/white</item>
</style>
Then the only thing you should do is setting the parent for app:popupTheme to this :
Theme.AppCompat.Light.NoActionBar
Which it can be your Activity style parent.
That's it :)

Use the editor for this. Go to tools->android->theme editor. There you can find the option for changing the colors.

you may be using SDK less than 23 you can try this
In xml :-
android:titleTextColor="#color/colorPrimary"
In fragment
toolbar.setTitleTextColor(Color.RED);

Transparent action bar not being fully transparent. (Leaves weirdbox)

I've tried setting the action bar I custom-made for my application to be transparent. However instead of being completely transparent, it leaves a weird elevation shadow:
http://puu.sh/rdYyb/04ce0147f6.jpg
The XML for the bar:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/OverviewFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_alert" />
<RelativeLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
The styles XML for my themes:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light"></style>
How I programatically try to remove the elevation and background in the activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbarlayout);
appBarLayout.setElevation(0);
toolbar.setElevation(0);
appBarLayout.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent));
toolbar.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent));
But despite all this the box (shown in the link) still persists... I'm not sure what's going on? Does anyone see anything wrong in my code?

try putting inside app bar
app:elevation="0dp"
this inside your toolbar
android:background="#android:color/transparent"

I think you need to use "android:alpha="0.5" or use setAlpha() method.

i tried this and its worked for me and add this four line into toolbar widget in xml file.
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"

Android Support Toolbar Styling

I am trying to implement a Light Theme of AppCompat with a dark toolbar (action bar), however when adding the toolbar dynamically or using <include /> the text fails to display in the correct color (black instead of white). The default action bar is styled correctly, but when I add the toolbar it is not.
Here is my code:
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"
app:theme="#style/AppTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="?attr/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
app:title="#string/action_settings"
/>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#ff299725</item>
<item name="colorPrimaryDark">#ff1d691b</item>
<item name="colorAccent">#ff5fb10b</item>
</style>
</resources>
However I get this in preview and live environment:
I have tried different versions of AppCompat (v.22.1, v.22.2, v.21.0.3) all replicate the issue, I have tried adding extra styles for textColor and all that happens is that it styles everything white.
Any help SO legends?

In your toolbar.xml, remove the app:theme attribute and use this instead:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Also, depending on how you're implementing toolbar, you may want to change your base theme (in styles.xml) to use the NoActionBar variant, like so:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

styles.xml
<style name="Toolbar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/xxx</item>
<item name="android:background">#color/xxx</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/xxx</item>
<item name="gapBetweenBars">4dp</item>
</style>
my_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="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar"
/>

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

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" />

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

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>

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.

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>