I'm trying to create this Search bar on Android

Question

I'm trying to create this search bar on Android, where the magnifying glass on the left is fixed, the background in the search box is white with round corners, the spaces between left side, back button, right side, search box, right side are 16dp. What's the better approach?

I tried using menu and item but I wasn't lucky.

score 3 · Answer 1 · answered May 02 '19 at 15:34

Android has a ready-made search box which you can use if you import android.widget.SearchView. It has most if not all of the features that you asked for and it is already done. You just have to add it to your layout. There are also methods which fire whenever someone types in the Search box, or clicks the magnifying glass. You can hide the magnifying glass and/or the X icons if you want, or show them as in your example. It would be best for you to use the standard Android SearchView, rather than write your own, because that way, it adheres to the standard UI guidelines that every user is already familiar with.

You can adjust the spacing by adding padding in your .xml layout file.

devB78 · Accepted Answer · 2019-05-03T17:59:18.713

The solution I found was putting SearchView inside of the toolbar:

<android.support.v7.widget.Toolbar
    android:id="@+id/restaurant_search_menu_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/MYSTYLE"
    app:contentInsetStartWithNavigation="0dp"
    app:contentInsetStart="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
 android:subtitleTextAppearance="@style/MYSTYLE.SubTitle.TextAppearance">

    <SearchView
        android:id="@+id/menu_search_view"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:imeOptions="actionDone"
        android:closeIcon="@drawable/ic_dls_glyph_close"
        android:searchIcon="@drawable/ic_dls_icon_search_filled"
        android:background="@drawable/white_background_rounded"
        android:iconifiedByDefault="false"
        tools:queryHint="Search for a menu item"/>

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

I'm trying to create this Search bar on Android

2 Answers2