Browse By

Add Floating Action Button in Android Application


Hello Friends. Today we are going to learn how to add Floating Button of Gmailfloating action button in application like Gmail Application. Floating action button are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. 

Floating action buttons come in two sizes:

  • Normal size: For most use cases
  • Mini size: Only used to create visual continuity with other screen elements.

Direct Download Full Source Code

 

 

Add Floating Action Button  in Android Application

To achieve this you have to add support design library in build.gradle

compile 'com.android.support:design:22.2.0'

 

1. Create color.xml in values folder. 1stimage

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <color name="colorPrimary">#F50057</color>
        <color name="colorPrimaryDark">#C51162</color>
        <color name="textColorPrimary">#FFFFFF</color>
        <color name="windowBackground">#FFFFFF</color>
        <color name="navigationBarColor">#000000</color>
        <color name="colorAccent">#C51162</color>
    </resources>

2. Modify your style.xml fie in values folder for effective changes.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

3. Create new layout file in activity_toolbar.xml in resources layout.

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

 

4. Include activity_toolbar.xml and floating button in activity_main.xml layout. Add layout gravity of floating button as bottom|right|end and put your image in drawable folder. Flloting button color will depend on color accent you have mentioned in color.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/activity_toolbar/>

<FrameLayout
    android:layout_width="match_parent"
	 android:layout_height="match_parent">

    <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_margin="16dp"
             android:clickable="true"
            android:src="@drawable/ic_edit"
            android:layout_gravity="bottom|right|end" />
</FrameLayout>
    </LinearLayout>

5) Finally initialize toolbar and floating button in MainActivity.java

package com.vrs.material_floatingbutton;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    FloatingActionButton fab;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar=(Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        fab = (FloatingActionButton)findViewById(R.id.fab);

// fire your event on click listener. In my case it's a toast. Yo u can add intent or any other event to it

        fab.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                 Toast.makeText(getApplicationContext(),"Hey, Fab is 						clicked",Toast.LENGTH_SHORT).show();
            }
        });
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

 

6. Now execute application.

Lollipop Devices:                                                      

 Floating Action Button in Lollipop Devices

Pre Lollipop Devices: 

 Floating Action Button in Pre Lollipop Devices

I hope you like this article. Share your views to to improve content. Happy Coding !!!

Download Full Source Code