Search code examples
androidandroid-layoutandroid-viewsearchviewandroid-styles

Google search alike SearchView


I've would like set to grey color(icons and text) but now is showing as white color.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="end">

    <TextView
        android:id="@+id/tv_toolbar_title"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Titulo_ventana"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="end"
        android:orientation="horizontal"
        android:padding="10dp">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:elevation="@dimen/cardview_default_elevation">

            <android.support.v7.widget.SearchView
                android:id="@+id/mySearchview"
                android:label="@string/app_name"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:theme="@style/Base.Widget.AppCompat.SearchView">
            </android.support.v7.widget.SearchView>

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


    </LinearLayout>



</LinearLayout>

I'd would like to reach something like this searchview within the toolbar and gray textcolor:

The left and right menu icons are optional. The searchview is foldable by default, I don't mind if this feature should be changed.

enter image description here


Solution

  • The search view, that you want to achieve in fact is not a SearchView. It's a custom component. Here's the view tree that can be obtained using Hierarchy Viewer tool:

    enter image description here

    Here's the OverlaySearchPlateContainer:

    enter image description here

    As you can see from package name, it is shipped with Play Services, thus source code is not available.

    Nevertheless, we can compare that tree with the tree of SearchView. Here's tree that can be obtained when ordinary SearchView is used:

    enter image description here

    Thus, you can see, that OverlaySearchPlateContainer is not a descendant of a SearchView, hence the UI you want to achieve cannot be accomplished using solely styles/themes.

    I would recommend to not reinvent a wheel and to utilize 3rd party libraries, for example SearchBar-SearchView, where SearchView widget looks like this:

    enter image description here