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

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:

SearchView

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

Toolbar

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

1 Answer
1

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!

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.