Implement a search bar like Google Maps' in an Android application

Question

I'm building an app that makes use of Google Maps API, and I want it to have a floating search bar at the top, exactly like the one present in Google Maps app.

I've found out about Places Autocomplete, but the application will not search for places but another kind of data that the users will have created.

I've also found out about a library named Float Search View, but it's been discontinued for some time already, therefore I'd like to pass on this. I'd also like to create it manually because this is the first Android app I'll be building, I want to learn.

I have tried implementing a SearchView in my XML:

<android.support.v7.widget.SearchView
    android:id="@+id/searchView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:iconifiedByDefault="false"
    app:queryHint="@string/search_hint"
    android:theme="@style/SearchBar"/>

With a white background and elevation:

<style name="SearchBar">
    <item name="android:background">@color/colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>

To see if I could get close to it, but the result very weird.

I'd tried other ways like adding a Toolbar, but the result was the same.

I want a result just like Google Maps' search bar at the top. How do I do it?

You're going to have to build some UI stuff. Then what is your question? — Tim Biegeleisen, Jul 01 '18 at 04:24

score 5 · Accepted Answer · answered Jul 01 '18 at 06:02

There's probably nothing special about the Google Maps UI. My guess would be it's a custom view on top of a full screen MapView. You can do something just like it by having a toolbar-like layout in the same container as the MapView that is full screen.

Here's an XML layout to get you started:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.gms.maps.MapView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_add_24dp" />

            <EditText
                android:hint="Try gas stations, ATMs"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_search_24dp" />

        </LinearLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

This looks like this (imagine the red is where the MapView would be):

From here, you just need to style your "toolbar" as needed.

Hope that helps!

Ah! Ok. I really thought it was something else. Thank you! – Jul 01 '18 at 06:12 — , Jul 01 '18 at 06:12

score 0 · Answer 2 · answered Oct 18 '18 at 11:25

you can use something like this

<com.google.android.gms.maps.MapView
    android:id="@+id/mapview"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    />

<SearchView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:layout_margin="10dp"
    android:focusable="auto"
    android:iconifiedByDefault="false" />

Add this into a FrameLayout. – grrigore Jan 11 '19 at 11:59 — grrigore, Jan 11 '19 at 11:59

Implement a search bar like Google Maps' in an Android application

2 Answers2