Designing Toolbar and using Floating Action Buttons

Question

Although there is some information on the Internet on more or less how the extended Toolbar works and how you are meant to add different Views to it, I would like to have a step-by-step guide for me and everyone else who wants to implement the extended Toolbar into their apps (specifically, how to add views to the Toolbar, what measurements I should use for margins between different Views and the Toolbar, etc.

If possible, I would also like to implement floating action buttons and some of the material design animations as I can't see any classes or built in methods for this in Android.

Answer 1

---

UPDATE:

After Google I/O 2015, you can use the Design Support Library to achieve the material design views such as the Floating Action Button (FAB). The Toolbar would still be created using the v7 Support Library as shown below.

---

Designing the Toolbar:

Looking at these specifications and guidelines from Google, I managed to setup my extended Toolbar how I wanted using the correct specifications and measurements.

In my case, I was using Fragments to change the main content (where the Views inside the extended Toolbar would also be different), so I had a layout file for the activity, and different layout files for my other fragments. The layout of my main activity was:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include android:id="@+id/main_toolbar" layout="@layout/toolbar" />

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/main_toolbar" />
</RelativeLayout>

The @layout/toolbar simply referred to the following layout (the layout I was using for a standard Toolbar (i.e. of normal height, just like an ActionBar)):

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

And the content in the FrameLayout (in the layout for the main activity) would be changed in Java. One of my fragments needed two Spinners and I wanted to embed these into an extended Toolbar. The Toolbar, conveniently, can be used as a ViewGroup, so I created and used the following layout for one of my fragments:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/extended_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:contentInsetStart="72dp"
        app:contentInsetEnd="16dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|center_horizontal"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

            <include layout="@layout/toolbar_space_margin" />

            <Spinner
                android:id="@+id/spinner_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <Spinner
                android:id="@+id/spinner_two
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"/>

            <include layout="@layout/toolbar_space_margin" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/extended_toolbar" >

        <!-- The main content of that activity layout -->

    </ScrollView>
</RelativeLayout>

The ?attr/colorPrimary refers to the primary colour (colorPrimary), which I defined in styles.xml. The two attributes contentInsetStart and contentInsetEnd I think are like padding for the Toolbar. This means that the LinearLayout will be 72dp from the left edge of the Toolbar and will be also 16dp from the right edge of it. Also, I had referenced twice @layout/toolbar_space_margin which was the basically an empty view I had used for the top and bottom margins:

<?xml version="1.0" encoding="utf-8"?>
<Space
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="16dp" />

Using Floating Action Buttons:

As for using Floating Action Buttons, I found various tutorials and a Stack Overflow post about this, so I used those. I should've researched that part of the question a little better...

I hope others who came across this issue with design will find this answer useful.

Answer 2

Heree is a nice tutorial on How to work with the brand new Toolbar.

After integrating the toolbar into your Activity, you could be able to add menu items as usual.(through onCreateOptionMenu() and also through xxx_menu.xml)

and... Here is a tutorial about the FAB aka Floating-Action-Button.