How to style Android SearchView like in Google Pla

问题:

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

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

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:

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:

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>

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!

回答1:

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.

回答2:

You have to use this Custom Implementation of SearchView.

https://github.com/Quinny898/PersistentSearch

Android Studio:

Add the Sonatype repository if you have not already:

maven {
        url "https://oss.sonatype.org/content/repositories/snapshots"
    }

Import it as a dependency:

compile 'com.quinny898.library.persistentsearch:library:1.1.0-SNAPSHOT'

In your layout:

<com.quinny898.library.persistentsearch.SearchBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/searchbox"
        />

Output :

回答3:

I myself was trying to build this. Ended up just making the search button an ImageButton. a click on this would Trigger a Fragment to be added on top which would contain an Edittext inside an layout made to look like this. and this Fragment consisted of a listview below this searchbox to show suggestions.

Tip: Keep the Fragment's rootlayout without any background and set clickable to true to achieve best results with a transparent pane