Search code examples
androidgoogle-playthemesandroid-appcompatsearchview

How to style Android SearchView like in Google Play Store app?

I am trying to style a SearchView in a toolbar to look / behave like the SearchView in the Google Play Store app. It seems to wrap the searchview in a cardview but it also seems to integrate up button / drawer toggle behavior.

This is the main activity searchView, it has integrated drawer toggle

MainActivity SearchView

when you click on it, the drawer toggle changes to arrow (that when clicked will remove focus from the search view)

enter image description here

When you click on an app in the store, you go to app detail page and you have what looks like iconified version of the search view as a collapsed action item with up button:

enter image description here

Finally if you click on search icon it expands as an action item (with a kind of ripple animation) and displays all the way across the screen and incorporates the up button:

enter image description here

When I try to do it myself I have a lot of problems. I tried to wrap the searchview in a cardview and put that in a toolbar. It works but there is always padding on the left side that I can't remove (I tried contentInsetStart, doesn't work):

<android.support.v7.widget.Toolbar
    android:id="@+id/activityCatalogToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:contentInsetStart="0dp"
    app:contentInsetLeft="0dp">

    <android.support.v7.widget.CardView
        android:id="@+id/activityCatalogSearchContainer"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="end"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:layout_marginRight="8dp"
        android:layout_marginLeft="8dp"
        app:cardCornerRadius="4dp"
        app:cardElevation="8dp">

        <android.support.v7.widget.SearchView
            android:id="@+id/activityCatalogSearch"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:queryHint=""
            android:iconifiedByDefault="false"/>

    </android.support.v7.widget.CardView>

</android.support.v7.widget.Toolbar>

enter image description here

I have also tried to remove the toolbar and replace it with just a FrameLayout. This allows me to control the padding but obviously I lose the toolbar functionalities (up button, etc) and also introduces theming problems (icons and text disappear).

Does anyone have an idea how they are doing this? I don't want to add another library just to style widgets that already exist in the framework. Thanks!

Solution

  • You might try to deep dive into this project:

    https://android.googlesource.com/platform/packages/apps/Dialer/

    For Lollipop or Marshmallow, or N it has a SearchEditTextLayout which is what you need:

    Advantage

    • a code made by Google, not third party.