CODEWITHSUNDEEP
androidgoogle-playthemesandroid-appcompatsearchview
d370urn3ur
d370urn3ur

Reputation: 1746

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!

Upvotes: 14

Views: 16471

Answers (3)

R. Zag&#243;rski
R. Zag&#243;rski

Reputation: 20258

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.

Upvotes: 12

Kushan
Kushan

Reputation: 5984

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

Upvotes: 1

Harshad Pansuriya
Harshad Pansuriya

Reputation: 20920

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 :

enter image description here

Upvotes: 2

Related Questions