16

I have simple question.

How I can change Toolbar's color/or theme to white when clicked on Search icon?

I want Toolbar to be White(with back arrow colored black/grey) whenever search icon is clicked. I have added SearcView (android.support.v7.widget.SearchView) in MenuItem

This enter image description here

To

enter image description here

And then back to original Toolbar color when Back button is clicked.

Faizan Mubasher
  • 4,427
  • 11
  • 45
  • 81

1 Answers1

18

enter image description here

In Activity/Fragment code:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.activity_menu, menu);

    MenuItem searchMenuItem = menu.findItem(R.id.search);
    if (searchMenuItem == null) {
        return true;
    }

    searchView = (SearchView) searchMenuItem.getActionView();
    MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {

        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            // Set styles for expanded state here
            if (getSupportActionBar() != null) {
                getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.RED));
            }
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            // Set styles for collapsed state here
            if (getSupportActionBar() != null) {
                getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.BLUE));
            }
            return true;
        }
    });

    return true;
}

And actual menu's xml is:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/search"
        android:title="@string/search_title"
        android:icon="@drawable/ic_menu_search"
        app:showAsAction="always|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView" />
</menu>

To change the color of back/X-buttons for expanded view add this into your styles:

<item name="colorControlNormal">@color/my_great_color</item>

To make change of the color smoother - you can animate it: Animate change of view background color on Android

I hope, it helps

Community
  • 1
  • 1
Konstantin Loginov
  • 15,802
  • 5
  • 58
  • 95
  • Thanks! What you mentioned is partially working. Back arrow becomes invisible though it is present but the color of back arrow and background is same – Faizan Mubasher Dec 30 '15 at 11:43
  • @FaizanMubasher Added screenshot - back arrow stays the same, it's absolutely visible. Though, you can always change it's color following this tip: http://stackoverflow.com/questions/26788464/how-to-change-color-of-the-back-arrow-in-the-new-material-theme (also in the onMenuItemActionExpand and onMenuItemActionCollapse) – Konstantin Loginov Dec 30 '15 at 11:48
  • You are right! Actually I am changing color from **Blue** to **White**, thats why back arrow seems to be invisible. Moreover, text color in SearchView is also white. Anyhow, thanks. – Faizan Mubasher Dec 30 '15 at 11:56
  • Its not working bro. Back arrow icon color doesn't change. – Faizan Mubasher Dec 30 '15 at 12:36
  • 1
    @FaizanMubasher my bad - I found one working solution - add `@color/my_great_color` into your styles. (updated the answer) – Konstantin Loginov Dec 30 '15 at 14:24
  • Perfect! Its working but it requires current minimum API level 21 while mine is 15. – Faizan Mubasher Dec 30 '15 at 14:40
  • @FaizanMubasher just tested on API level 19 - it works like a charm. People write, that "android:colorControlNormal" works only on API 21+, but "colorControlNormal" works in compat mode. – Konstantin Loginov Dec 30 '15 at 15:08