In this blog we have defined Floating Toolbar which is new component into android with the introduction of material design. Floating Toolbar view just expand after click on Floating Action button with some icons.

With the help of some following steps learn how to create Floating Toolbar.

Step-1- Create a menu xml file main.xml,

This file contains of all items which will appear in Floating Toolbar .

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/unreadmessage"
        android:icon="@drawable/ic_markunread"
        android:title="Mark unread"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/copymessage"
        android:icon="@drawable/ic_copy"
        android:title="Copy"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/googleplus"
        android:icon="@drawable/ic_google"
        android:title="Google+"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/facebook"
        android:icon="@drawable/ic_facebook"
        android:title="Facebook"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/twitter"
        android:icon="@drawable/ic_twitter"
        android:title="Twitter"
        app:showAsAction="ifRoom" />
</menu>

Step-2 After this I have created all vector drawable xml files in which I have defined some custom Floating Toolbar icons. You can also use icons images in place of these custom icons in drawable folder.

Here is brief introduction about Vector Drawables.

What is Vector Drawable ?

Vector Drawable is a new feature which was introduced in Lollipop to draw images using only code. This is supported only by Android 5.0  and there are not any support-library.

How to create Vector Drawables?

When you need to create vector drawable then first you have to create vector shape in drawable xml file. Defined as below.

<vector

</vector>

Next, you have to add path tags between vector's tags. Path tags defines path to draw images. Path tags contains some properties to be drawn shape such as fillColor,pathData, etc.

You can also create your own vector assets using following line of code:

Right click on drawable folder then select new ----->Vector Assets

After that you will see Vector Assets Studio window then click on choose button and select image.

1-ic_copy.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M16,1L4,1c-1.1,0 -2,0.9 -2,2v14h2L4,3h12L16,1zM19,5L8,5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h11c1.1,0 2,-0.9 2,-2L21,7c0,-1.1 -0.9,-2 -2,-2zM19,21L8,21L8,7h11v14z"/>
</vector>

2-ic_facebook.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportHeight="24"
    android:viewportWidth="24">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M19,4V7H17A1,1 0 0,
        0 16,
        8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,
        4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,
        22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</vector>

3- ic_google.xml

<!-- drawable/facebook_box.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportHeight="24"
    android:viewportWidth="24">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M19,4V7H17A1,1 0 0,
        0 16,
        8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,
        4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,
        22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</vector>

4- ic_unread

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M20,4L4,4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2L22,6c0,-1.1 -0.9,-2 -2,-2zM20,8l-8,5 -8,-5L4,6l8,5 8,-5v2z"/>
</vector>

5- ic_reset

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M14,12c0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2 0.9,2 2,2 2,-0.9 2,-2zm-2,-9c-4.97,0 -9,4.03 -9,9H0l4,4 4,-4H5c0,-3.87 3.13,-7 7,-7s7,3.13 7,7 -3.13,7 -7,7c-1.51,0 -2.91,-0.49 -4.06,-1.3l-1.42,1.44C8.04,20.3 9.94,21 12,21c4.97,0 9,-4.03 9,-9s-4.03,-9 -9,-9z"/>
</vector>

6- ic_share

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
</vector>

7- ic_twitter

<!-- drawable/twitter_box.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z" />
</vector>

Step-3 activity_main.xml

<?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:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <com.github.rubensousa.floatingtoolbar.FloatingToolbar
        android:id="@+id/floatingToolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:floatingMenu="@menu/main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingactionbutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_share" />

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

Step-4 Add the following to your build gradle file.

repositories{
  maven { url "https://jitpack.io" }
}

dependencies {
  compile 'com.github.rubensousa:FloatingToolbar:0.3'
}

Step 5 Main Activity

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.Toast;
import com.github.rubensousa.floatingtoolbar.FloatingToolbar;

public class MainActivity extends AppCompatActivity implements FloatingToolbar.ItemClickListener {

    private FloatingToolbar mFloatingToolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floatingactionbutton);
        mFloatingToolbar = (FloatingToolbar) findViewById(R.id.floatingToolbar);
        mFloatingToolbar.setClickListener(this);
        mFloatingToolbar.attachFab(fab);
    }

    @Override
    public void onItemClick(MenuItem item) {
        if(item.getItemId()==R.id.unreadmessage){
            Toast.makeText(MainActivity.this,"Action unread...",Toast.LENGTH_SHORT).show();
        }
        if(item.getItemId()==R.id.copymessage){
            Toast.makeText(MainActivity.this,"Action copy...",Toast.LENGTH_SHORT).show();
        }
        if(item.getItemId()==R.id.googleplus){
            Toast.makeText(MainActivity.this,"Action google...",Toast.LENGTH_SHORT).show();
        }
        if(item.getItemId()==R.id.facebook){
            Toast.makeText(MainActivity.this,"Action facebook...",Toast.LENGTH_SHORT).show();
        }
        if(item.getItemId()==R.id.twitter){
            Toast.makeText(MainActivity.this, "Action twitter...", Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    public void onItemLongClick(MenuItem menuItem) {

    }


}