Search code examples
androidandroid-layoutandroid-toolbarandroid-search

I'm trying to create this Search bar on Android


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.


Solution

  • 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>