clooock
clooock

Reputation: 183

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

Upvotes: 0

Views: 1391

Answers (2)

Arslan Shoukat
Arslan Shoukat

Reputation: 439

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:

enter image description here

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

Upvotes: 1

Arya
Arya

Reputation: 94

You can use a FrameLayout as search box and replace it with a custom 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.

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.

Upvotes: 0

Related Questions