How to customize the “up” button when the searchView is being expanded?

Question

Background

My app has the ability to search for items (which are other apps) using the SearchView on the ActionBar.

The app uses the support library of Google, and it works well on all versions of Android from API 9 .

The problem

On Lollipop, when I click the search action item in order to start searching, I notice that the up/back button on the top-left corner gets to be white, which is bad for this case since the actionbar background is also quite white:

Weird thing is that it doesn't always occur, and I don't think it occurs on Android versions that aren't Lollipop (tested on multiple emulators and devices).

Another weird thing is that the navigation drawer icon seems ok, as well as the X icon inside the searchView.

Here's the XML of the toolbar I have:

<android.support.v7.widget.Toolbar
    android:id="@+id/activity_app_list__toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize" />

the "colorPrimary" is set to be : #ffEFEFEF .

Also, the theme's parent of the activity is "Theme.AppCompat.Light.NoActionBar" , as I've set the toolbar to be the actionBar.

The question

How can I fix this issue?

What is the cause for this issue? How come it works fine on other Android versions?

Answer 1

It seems like a known issue: https://code.google.com/p/android/issues/detail?id=78346 .

workaround is here: https://code.google.com/p/android/issues/detail?id=78346#c5 , meaning:

values-21/themes.xml:

<style name="MyTheme" parent="Theme.AppCompat">
    <item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>

That's it. Hope it gets fixed later.

In order to customize it, I assume I can use it, and also choose the color using "colorControlNormal"

Answer 2

I'd guess the "app:collapseIcon" attribute is what you were looking for?

<android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="@dimen/toolbarHeight"
         app:collapseIcon="@drawable/collapseBackIcon" />

Answer 3

How can I fix this issue?

I created a utility class for this (and other) problems. Get it here:

https://gist.github.com/consp1racy/96958a1dedf5a99d4ca5

Part 1: Call the following method in your Activity.onCreate(Bundle):

ToolbarUtils.fixToolbar(mToolbar);

Part 2: The code uses value android:colorControlNormal from the Toolbar "theme" you specified in the layout. If you use support library and defined only colorControlNormal you need to add the following line after it:

<item name="android:colorControlNormal" tools:ignore="NewApi">?attr/colorControlNormal</item>

What is the cause of this issue?

After a lot of thought and experiments it seems that the arrow uses the original bitmap, which is white, without any coloring, which is wrong.

Note: The menu overflow icon also reads the android:colorControlNormal so now it will display correct color as well.

EDIT: Prerequisites:

Your Toolbar should have attributes similar to the following

<!-- custom toolbar theme -->
<item name="theme">@style/ThemeOverlay.MyApp.ActionBar</item>
<!-- light popup menu theme, change this if you need to -->
<item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
<!-- app bar background color -->
<item name="android:background">@color/material_deep_orange_500</item>

Then the toolbar theme should look something like this

<!-- example uses dark app bar template, feel free to change it to light if you need to -->
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <!-- this line defines title text color -->
    <item name="android:textColorPrimary">@color/material_white_100</item>
    <!-- this line defines subtitle text color -->
    <item name="android:textColorSecondary">@color/material_white_70</item>
    <!-- this line defines up/hamburger/overflow icons color -->
    <item name="colorControlNormal">@color/material_black_54</item>
    <!-- this line is necessary for proper coloring on lollipop - do not delete it -->
    <item name="android:colorControlNormal" tools:ignore="NewApi">?attr/colorControlNormal</item>
</style>