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

Just Add the following code....

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:id="@+id/toolbar"
    android:background="@color/colorPrimary"
    android:elevation="8dp"
    android:layout_margin="5dp"
    >
     //add whatever elements you want to add in here.
</android.support.v7.widget.Toolbar>

Answer 2

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>

Answer 3

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    **android:layout_margin="10dp"
    android:elevation="5dp"**
    />

Answer 4

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 5

Here is the code for the floating toolbar, just copy and paste.

This is an example of a floating toolbar using Appcompat, It can be working under many layouts like Relative, Coordinator, or DrawerLayout. You can increase elevation to make it more effective.

floating toolbar with Edit text or Search box

<LinearLayout
    android:background="@color/colorWhite"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">


<androidx.appcompat.widget.Toolbar
    android:background="@drawable/floating_toolbar"
    android:id="@+id/app_toolbar"
    android:elevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="50dp">

<EditText
    android:gravity="start"
    android:id="@+id/search_bar"
    android:background="@drawable/edit_text_no_border"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Search here.." />

</androidx.appcompat.widget.Toolbar>       
</LinearLayout>

---

drawable/floating_toolbar.xml file for set background shadows.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="rectangle">
        <solid android:color="#6FA5A5A5" />
        <corners android:radius="6dp"/>
    </shape>
</item>
<item android:top="1dp" android:right="1dp" android:left="1dp" android:bottom="1dp">
    <shape
        android:shape="rectangle">
        <solid android:color="@color/colorWhite"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

---

drawable/edit_text_no_border.xml file for EditText without an outline box or bottom border to make it clean matching background.

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

Emoji = ThumbsUp

Answer 6

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>