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:

enter image description here

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?

Have you tried adding `android:theme="@android:style/ThemeOverlay.Material.Light.ActionBar"` to your `Toolbar`? — ianhanniballake, Dec 07 '14 at 23:16
@ianhanniballake It doesn't exist, so now I tried this: android:theme="@style/Widget.AppCompat.Light.ActionBar" , but it also doesn't do anything... — android developer, Dec 08 '14 at 17:55

score 17 · Accepted Answer · answered Dec 08 '14 at 19:04

17

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"

answered Dec 08 '14 at 19:04

android developer

114,585
152
739
1,270

1

This is waaaaay easier :D Thanks. – Eugen Pechanec Dec 08 '14 at 19:10
@EugenPechanec Yes, sorry to make one that's shorter than yours... :) – android developer Dec 08 '14 at 19:29

score 10 · Answer 2 · answered Feb 18 '16 at 13:11

10

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

answered Feb 18 '16 at 13:11

Julian Horst

805
8
15

How do I use the normal one, just with the right color? – android developer Feb 18 '16 at 21:05
I don't think there is a possibility to access the standard system up/back drawable for this. I'd suggest to just set the navigationIcon and collapseIcon manually with custom drawables, which you can also tint yourself etc. – Julian Horst Feb 19 '16 at 10:13

Eugen Pechanec · Answer 3 · 2014-12-08T18:52:13.357

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>

But I didn't use "colorControlNormal" . I used the one that the support library provides... — android developer, Dec 08 '14 at 18:29
@androiddeveloper Review and apply the code i added. This is what I use and it works. Once you put in your colors it should work just fine. — Eugen Pechanec, Dec 08 '14 at 18:53

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

Background

The problem

The question

3 Answers3

Linked