Android studio implements the search bar

Time:2021-11-26

preface

1、 What is a custom control?

The system’s own controls are directly or indirectly inherited from view, which is the most basic UI component library in Android. When the built-in controls of the system cannot meet the requirements, custom controls are made according to the inherited structure of the controls, such as the top search bar

2、 Manufacturing steps

1. Introduction layout

If a search bar is written in the layout of each activity, the code will be repeated. This problem can be solved by introducing layout.
First, create a select.xml layout in the layout directory. The code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@drawable/back001">

    <ImageView
        android:id="@+id/select_p01"
        android:layout_marginTop="2dp"
        android:layout_width="46dp"
        android:layout_height="41dp"
        android:src="@drawable/select_photo01" />

    <EditText
        android:id="@+id/select01"
        android:layout_marginTop="6dp"
        android:layout_width="250dp"
        android:layout_height="35dp"
        android:layout_marginLeft="10dp"
         <!-- Adopt EditText_ Shap01 style -- >
        android:background="@drawable/edittext_shape01"/>

    <ImageButton
        android:id="@+id/select_p02"
   <!--  Clear button background -- >
        style="?android:attr/borderlessButtonStyle"
        android:layout_marginTop="0dp"
        android:layout_width="53dp"
        android:layout_height="50dp"
   <!--  The function of fitxy is to "maintain the length width ratio of the picture" -- >
        android:scaleType="fitXY"
        android:src="@drawable/select_photo02" />

</LinearLayout>

2. Layout analysis

The layout above is supplemented here:

1) . set the layout background to back001


android:background="@drawable/back001"

2) Select import picture_ photo01

In order to make the search bar not monotonous, import picture decoration


android:src="@drawable/select_photo01"

3.

3. EditText is adopted_ Shape01 style

The EditText provided by the system is only a straight line, which will be turned into a circular input box here


android:background="@drawable/edittext_shape01"

Before change:

After change:

edittext_ Shape01 code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="#FFFFFF" >
    </solid>
    <!--  Set fillet -- >
    <corners
        android:radius="3dp"
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" >
    </corners>
    <!--  Set border -- >
    <stroke android:width="1dip" android:color="#ff000000" />

</shape>

4. Import picture select_ Photo02 decoration


android:scaleType="fitXY"
android:src="@drawable/select_photo02" 

Note: fitxy is more important!

test

After writing the layout, you can call select01 as a custom control:


<include layout="@layout/select01" />

The search bar layout can be introduced with just one line of include statement

Comparison before and after introduction:

Before introduction

After introduction

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.