CODEWITHSUNDEEP
androidtoolbarsearchview
Kahan Bhalani
Kahan Bhalani

Reputation: 193

Why is the android.widget.SearchView not expanding on single click and instead moves the icon to left side?

I am using android.widget.SearchView inside MaterialToolbar and have also set the correct attributes inside the menu reource file. But when I click the search icon, it doesn't expand. Instead, the search icon moves to the left side. On clicking it again, it expands but the search icon still appears inside the EditText.


Layout file

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:title="@string/app_name" />

</com.google.android.material.appbar.AppBarLayout>

Menu file

<?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/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.widget.SearchView" />

</menu>


Before clicking

Before clicking

After clicking

After clicking

SearchView hint

Upvotes: 2

Views: 1871

Answers (2)

Mike M.
Mike M.

Reputation: 39181

Though the documentation suggests using the framework SearchView, I've always found that the support/androidx SearchView plays nicer with the library components – e.g., AppCompatActivity, MaterialToolbar, etc. – though I'm not sure exactly what causes these little glitches. Indeed, using androidx.appcompat.widget.SearchView here in lieu of android.widget.SearchView for the actionViewClass got rid of that misplaced search icon upon expanding.

However, the AutoCompleteTextView inside the SearchView still has a similar search icon as a hint because it's not ending up with the right style. I initially expected that setting the Toolbar as the support ActionBar would've integrated that with the other relevant styles for the children, but it seems SearchView's style, for some reason, is normally set with a ThemeOverlay.*.ActionBar on the <*Toolbar> acting as the ActionBar.

Though most sources seem to indicate that the various ThemeOverlay.*.ActionBar styles only adjust the colorControlNormal attribute, they actually set the searchViewStyle to the appropriate Widget.*.SearchView.ActionBar value, too, so it's doubly important that we add a proper overlay. For example, in keeping with changing to the androidx version:

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
    ... />

This could also work by setting that as the actionBarTheme in your Activity's theme instead, but be warned that it can be overridden by attributes on the <*Toolbar> itself, like it would be in the given setup by style="@style/Widget.MaterialComponents.Toolbar.Primary".

If you're not using Material Components, ThemeOverlay.AppCompat styles are available as well. And if you're using only platform classes, similar styles are available in the system namespace; e.g., @android:style/ThemeOverlay.Material.Dark.ActionBar.

The initial revision of this answer removed that hint icon manually, as at the time I was unaware of how exactly the given setup was failing. It shouldn't be necessary to do that now, but if you'd like to customize this further, that example simply replaced the menu <item>'s app:actionViewClass attribute with an app:actionLayout pointing to this layout:

<androidx.appcompat.widget.SearchView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/search_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:searchHintIcon="@null" />

The searchHintIcon setting is all that was needed for the example here, but you can set whatever applicable SearchView attributes you'd like.

If you're going this route, it might be preferable to set style="@style/Widget.AppCompat.SearchView.ActionBar", which includes the searchHintIcon setting, and ensures the correct overall style for the SearchView, as suggested by Artem Mostyaev in comments below.

Upvotes: 3

Dennis Nguyen
Dennis Nguyen

Reputation: 474

the above method does not work for me. I don't know why but a tried this and succeed. Refer to the search hint icon through SearchView and set it's visibility to GONE:

ImageView icon = (ImageView) mSearchView.findViewById(androidx.appcompat.R.id.search_mag_icon);
icon.setVisibility(View.GONE);

And then add this line:

mSearchView.setIconified(false);

Upvotes: 0

Related Questions