SearchView with border and text

问题

I want to make my SearchView like this:

How can I implement in Java ?

回答1:

What you see in the image is the Material TextInput with OutLined style. You can read more about that and the Filled style in the official docs here.

Also, don't forget you'll need material library for this. For that, do

implementation 'com.google.android.material:material:1.2.0-alpha06'

Now, what you can do with it is to make it like above by adding startDrawable and CornerRadius:

Create the XML widget as below and put a startIcon.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/editTextLayout"
    style="@style/TextInputLayoutAppearanceOutLined"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="Search View"
    app:hintEnabled="true"
    app:startIconDrawable=" *** Your ICON *** ">

      <com.google.android.material.textfield.TextInputEditText
         android:id="@+id/edittext"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:inputType="text"
         android:textSize="12sp" />

     </com.google.android.material.textfield.TextInputLayout>

Then, this is the style TextInputLayoutAppearanceOutLined, put it in your style.xml file:

<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">@style/HintText</item>
<item name="helperTextTextAppearance">@style/HintText</item>

<item name="android:textColor">@color/dark_grey</item>
<item name="android:textColorHint">@color/colorAccent</item>
<item name="hintTextColor">@color/colorAccent</item>
<item name="boxStrokeColor">@color/colorAccent</item>
<item name="startIconTint">@color/colorAccent</item>
<item name="boxBackgroundColor">@color/white</item>

<item name="boxCornerRadiusBottomEnd">@dimen/_26sdp</item>
<item name="boxCornerRadiusBottomStart">@dimen/_26sdp</item>
<item name="boxCornerRadiusTopEnd">@dimen/_26sdp</item>
<item name="boxCornerRadiusTopStart">@dimen/_26sdp</item>

<item name="boxStrokeWidthFocused">1dp</item>


<item name="hintEnabled">true</item>
<item name="hintAnimationEnabled">true</item>

<item name="colorControlNormal">@color/colorAccent</item>
<item name="colorControlActivated">@color/colorPrimary</item>

Obviously, you can set this in XML as well, but style gives you more control over your app to change the element everywhere by one edit.

Now, you'll have what you want your SearchView to look like, but further to make it act like a SearchView, you need to set filtering for your ListAdapter to make it work.

For that, you can look here.

回答2:

make search view in layout file first

        <SearchView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_round"/>

then the make drawable and name it bg_round and put the code below to that drawable

<?xml version="1.0" encoding="utf-8"?>
    <shape
           xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
      <solid android:color="#fff"/> // this the the inner background color
      <stroke android:width="5dp" //this is for the stroke of the border
      android:color="@android:color/black"/> //this is the stroke color
      <corners android:radius="4cdp" /> //this is the corner radius
    </shape>

来源：https://stackoverflow.com/questions/61840702/searchview-with-border-and-text

标签

java

android

searchview