Floating Toolbar with Appcompat

Question

How to create a floating toolbar like the following image as proposed in the material design guidelines and in the Google Map application.

Answer 1

I've worked with the Toolbar before and all the comments from CommonsWare are absolutely correct.

The Toolbar widget (https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) have absolutely nothing special or different than any other Viewgroup and does not behave differently than any other ViewGroup.

Put it inside a FrameLayout, put a layout_margin parameter on it, make the layout_width NOT match_parent and that's it.

Put it inside an LinearLayout with orientation=horizontal and you can use the layout_weight to control the size in percentage. Or just use plain dip if that suits your needs.

Answer 2

Since you are following the Material Design concept I am assuming your are using Coordinator Layout as your Main Layout and Not Frame Layout.

Before anything else we need to declare the important dependencies.

dependencies {
    compile 'com.android.support:design:22.2.1'
    compile 'com.android.support:cardview-v7:22.2.1'
}

Expected/Similar Output

XML snippet

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true">

    <FrameLayout
        android:id="@+id/frmlyout_locationnote_mapholder"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- You can add your Map here-->
        <ImageView
            android:id="@+id/imgvw_locationnote_background"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop" />
    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/tlbr_locationnote_mainmenu"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.v7.widget.CardView>
    </LinearLayout>


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_locationnote_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_plus_white_24dp"
        app:layout_anchor="@id/frmlyout_locationnote_mapholder"
        app:layout_anchorGravity="bottom|right" />

</android.support.design.widget.CoordinatorLayout>

Answer 3

I think Mark's suggestion for picking up the CardView "look" in the comment above deserves this derivative answer:

Just put a Toolbar in a CardView:

<android.support.v7.widget.CardView
    android:id="@+id/map_toolbar_container"
    android:layout_width="@dimen/whatever_you_want"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardElevation="8dp"
    app:cardBackgroundColor="#324">

    <android.support.v7.widget.Toolbar
        android:id="@+id/wld_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"/>

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