Clash Royale CLAN TAG#URR8PPP

Create search box like Material Design 2018

I want to create in an Android Studio project a search box that it's like Google Maps app search box. How can I do that? Is there a sample to reproduce it?
Thanks in advise

This is the
Search box

2 Answers
2

You can use a FrameLayout as search box and replace it with a custom Fragment.

FrameLayout

Fragment

This is a sample code for the search box that you attached.

Search box Fragment Layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_margin="16dp"
android:background="@drawable/search_box_style"
android:gravity="center_vertical"
android:orientation="horizontal">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:src="@drawable/ic_dehaze_black_24dp" />

<EditText
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_weight="1"
android:background="#00ffffff"
android:gravity="center_vertical" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:src="@drawable/ic_mic_black_24dp" />
</LinearLayout>


you can use your components in Fragment.

Fragment

search_box_style.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
<stroke
android:width="0.1dp"
android:color="#7b7b7b" />
<corners android:radius="4dp" />
</shape>


And you can set Listeners for your Fragment items.

Listeners

Fragment

Rather than creating everything yourself which kind of is reinventing the wheel, you can use this open source library which not only let you create searchview easily but also allows you to style it and have many other options that are complex to access when do it all yourself.
Here is a screenshot showing what this lib can do:

Otherwise, you can use Android searchview component, set some background and add styling to make it look as you want.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.