0

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.

stackbiz
  • 1,136
  • 1
  • 5
  • 22
  • Check this https://stackoverflow.com/questions/58074174/how-to-change-the-navigation-icon-color/58074791#58074791 – Gabriele Mariotti Jun 07 '20 at 14:21
  • It's not working in that link, I'm not use com.google.android.material.appbar.MaterialToolbar, I'm using androidx.appcompat.widget.Toolbar. I found a solution for java code: call Toolbar.setNavigationIcon can change the icon and the tint, but I don't know how to set the color in XML style format. Thanks. – stackbiz Jun 07 '20 at 16:31
  • But there is also a trouble for setting NavitationIcon in java code because it is required to setNavigationIcon in every Fragment. If there are 100 fragments, then must call setNavigationIcon 100 times. Please help to find the XML style solution – stackbiz Jun 07 '20 at 16:37
  • You have to check if you are using a Material Components theme or AppCompat theme. With appcompat use the colorControlNormal as mentioned in the same link. – Gabriele Mariotti Jun 07 '20 at 17:57
  • I have added more detail to the post, please help to check, thanks. – stackbiz Jun 07 '20 at 18:53
  • Did you try the answer? Just override with `android:theme` the `colorControlNormal` (not `android:colorControlNormal`. Also since you are using the Material Components Library you should use a Material Components theme. – Gabriele Mariotti Jun 07 '20 at 20:55
  • Thanks for your help, I have posted the answer here. – stackbiz Jun 08 '20 at 04:06

1 Answers1

0

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.

stackbiz
  • 1,136
  • 1
  • 5
  • 22