Android development implements rounded search box

<color name="grey">#F3EDED</color>1. Add as fill color in res/values/colors.xml .
Then create a new bg_searchview.xml file under the res/drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 圆角度 -->
    <corners android:radius="35dp"/>
    <!-- 使用填充色 -->
    <solid android:color="@color/grey"/>
</shape>

2. Use the SearchView search component in the layout file, and use the above bg_searchview.xml to set the rounded corners and fill colors:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <SearchView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/bg_searchview"
        android:iconifiedByDefault="false"
        android:imeOptions="actionSearch"
        android:queryBackground="@drawable/bg_searchview"
        android:queryHint="搜索"
        android:submitBackground="@drawable/bg_searchview"
        app:theme="@style/AppSearchView" />
</LinearLayout>

The effect is as follows:
insert image description here

4. If you want to center the search prompt in the search box, you can add a styles.xml file under the res/values ​​folder:

<resources>
    <style name="AppSearchView" parent="Widget.AppCompat.SearchView" >
        <item name="android:textAlignment">center</item>
    </style>
</resources>

Use to center the SearchView search component in the layout file app:theme="@style/AppSearchView" :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <SearchView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/bg_searchview"
        android:iconifiedByDefault="false"
        android:imeOptions="actionSearch"
        android:queryBackground="@drawable/bg_searchview"
        android:queryHint="搜索"
        android:submitBackground="@drawable/bg_searchview"
        app:theme="@style/AppSearchView"
 />
</LinearLayout>

The effect is as follows:
insert image description here

Guess you like

Origin blog.csdn.net/qq_33697094/article/details/131126131