How To Customize Searchview Edittext?

I want to customize my searchview edittext which expanded when I click on searchview icon to be like this image And I tried the custom style to do that but I got this result in th

Solution 1:

While I do not clearly understand what your requirements are exactly, I would like to point out one thing though. For Applying a style to a SearchView we have to use the theme attribute, your code seems okay, maybe your changes are not being applied for now I believe. So try using the android:theme attribute for your style as follows. The rest of your requirements should easily come by to you with some trial and error I believe. Thanks.

<androidx.appcompat.widget.SearchView
android:id="@+id/searchView"android:theme="@style/SearchViewStyle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginTop="8dp"android:layout_marginEnd="8dp"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="parent">

Here is how I would recommend you to update your style to get as close as possible to your design.

<stylename="SearchViewStyle"parent="Widget.AppCompat.SearchView"><itemname="searchIcon">@drawable/ic_baseline_dark_search_24</item><itemname="queryBackground">@android:color/transparent</item><itemname="queryHint">"search_hint"</item><itemname="iconifiedByDefault">false</item><itemname="android:textColorHint">@color/white</item><itemname="android:background">@drawable/radius_drawable</item></style>

And you can modify your drawable and get rid of the padding and size since you are using wrap_content in your layout

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"><solidandroid:color="#4F4F4F" /><cornersandroid:radius="18dp" /></shape>