Search code examples
javaandroidsearchview

SearchView with border and text

I want to make my SearchView like this:
enter image description here

How can I implement in Java ?

Solution

  • 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'

    enter image description here

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

    1. 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>

    2. 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.

    1. 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.