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,

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>