Search code examples
androidmenusearchview

searchview rounded background with menu


I am trying to put a rounded rectangle for my search view bar, but I have no idea how. I've tested many other codes I could find on stackoverflow, but since I am using a menu with an item, which no other codes used, it is difficult to figure it out.

Here's my java code:

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.example_menu, menu);

        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView = (SearchView) searchItem.getActionView();

        searchView.setImeOptions(EditorInfo.IME_ACTION_DONE);

        searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
            @Override
            public boolean onQueryTextSubmit(String query) {
                return false;
            }

            @Override
            public boolean onQueryTextChange(String newText) {
                adapter.getFilter().filter(newText);
                return false;
            }
        });
        return true;
    }

And here's my XML code:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/search_view_menu">

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="ifRoom|collapseActionView"/>

</menu>

Solution

  • Here is the solution to your problem.

    1. Create a curved background for your Edittext in drawable folder
    2. Add that curved background to Edittext

    Solution Code:

    Create a file called curve_edittext_bg in Drawable folder

        <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <solid android:color="#ffffff"/>
                <corners android:radius="6dp" />
                <stroke
                    android:width="1dp"
                    android:color="#27000000"
                    />
            </shape>
        </item>
    </selector> 
    

    Now Add curve_edittext_bg to the Edittext

        <TextView
                    android:layout_width="match_parent"
                    android:layout_height="50dp"
                    android:drawableStart="@drawable/ic_location_blast_blue"
                    android:drawableEnd="@drawable/search"
                    android:drawablePadding="10dp"
                    android:background="@drawable/curve_edittext_bg"
                    android:ellipsize="end"
                    android:layout_margin="10dp"
                    android:layout_alignParentTop="true"
                    android:gravity="start|center_vertical"
                    android:padding="16dp"
                    android:text="Search location"
                    android:textColor="@color/quantum_grey600" /> 
    

    We are done 👍

    Sample Output

    Output Image