CODEWITHSUNDEEP
androidandroid-edittextsearchbar
hhaider
hhaider

Reputation: 1

Prevent EditText in SearchBar from covering MenuItem Button

I cannot figure out how to get the EditText to not cover the area where my MenuItem icon button is within this SearchBar.

Is there no best way this is handled?

Layout snippet:

    <com.google.android.material.search.SearchBar
        android:id="@+id/app_config_search_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/app_config_toolbar"
        android:hint="@string/search_hint"
        app:menu="@menu/menu_searchbar">

        <EditText
            android:id="@+id/app_config_edit_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="text"/>
    </com.google.android.material.search.SearchBar>

search bar image

The 'X' clear icon button (MenuItem) is not clickable as the EditText is fully covering the whole width of the SearchBar.

I have tried changing layout_width to wrap_content, and a specific value e.g. 10dp, but nothing is able to change it.

I tried de-nesting EditText out of the SearchBar and I can then click on the button, but then I can't type into anything since EditText is no longer within the SearchBar.

Upvotes: 0

Views: 33

Answers (2)

hhaider
hhaider

Reputation: 1

I used a ConstraintLayout within the SearchBar to control the proportion of the EditText which prevents it from covering the SearchBar Menu.

    <com.google.android.material.search.SearchBar
    android:id="@+id/app_config_search_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/app_config_toolbar"
    android:hint="@string/search_hint"
    app:menu="@menu/menu_searchbar">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/app_config_edit_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintWidth_percent="0.8"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:inputType="text" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.search.SearchBar>

Upvotes: 0

Mahmoud Kamal
Mahmoud Kamal

Reputation: 1

you can use SearchView and make layout_anchor with SearchBar search view will handle clear text function correctly.

    <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/searchTopBarLayout"
        android:layout_width="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_height="wrap_content">
        <com.google.android.material.search.SearchBar
            android:id="@+id/searchBar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="Search"/>
    </com.google.android.material.appbar.AppBarLayout>
    <com.google.android.material.search.SearchView
        android:id="@+id/searchField"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:autofillHints="no"
        android:drawablePadding="10dp"
        android:imeOptions="actionSearch"
        android:inputType="text"
        android:maxLines="1"
        android:hint="Search"
        app:layout_anchor="@id/searchBar"
        app:iconifiedByDefault="false"
        app:queryHint="Search"
        app:searchIcon="@null">
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/searchResult"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    </com.google.android.material.search.SearchView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 0

Related Questions