Floating Action Button in Android – Material Design

Floating Action Button in Android – Material Design




in this post we are going to learn how to create a Floating action button in android. Floating action button in added to android on the release of material design. Now most of the app use floating action button But unfortunately android does not have a View for Floating action button at the moment google says to use imageView for floating action button but that’s a headache to have a image so we are going to learn how to use some open source libaray to create a floating action button in android



View Demo

Floating action button android

Floating Action Button in Android – Material Design
Project Structure

We are going to use a open source library Floating Action Button

build.gradle (Module: app)

in build the gradle we will add and sync the FloatinActionButton Libaray

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.melnykov:floatingactionbutton:1.3.0' //floatingActionButton library
}

Then:Sync the project

color.xml

we have to create a color.xml file where we will store all the colors which we will use to customize the theme

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">#F44336</color>
    <color name="primary_dark">#D50000</color>
</resources>

styles.xml

in this file we will customize our theme

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
    </style>

</resources>

Then: Then Rebuild project or restart Android studio

activity_main.xml

add xmlns:fab="http://schemas.android.com/apk/res-auto" attribute to your Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:fab="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MainActivity"
                android:id="@+id/layout">

       <!-- VIEWS WILL COME HERE -->

</RelativeLayout>

Add com.melnykov.fab.FloatingActionButton attribute to your xml layout (It likely you will not get autocomplete help here)

<com.melnykov.fab.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        fab:fab_colorNormal="@color/primary"
        fab:fab_colorPressed="@color/primary_dark"
        android:src="@drawable/ic_action_add"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:onClick="openAddActivity"/>



Putting it all together – activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                xmlns:fab="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:paddingBottom="@dimen/activity_vertical_margin"
                tools:context=".MainActivity"
                android:id="@+id/layout">

    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"/>

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        fab:fab_colorNormal="@color/primary"
        fab:fab_colorPressed="@color/primary_dark"
        android:src="@drawable/ic_action_add"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:onClick="openAddActivity"/>

</RelativeLayout>

Note Congratulations you have created a Floating action button successfully But i have created another activity to transfer the user when ever he click the Floating Action Button, If you have paid attention, I have added a android:onClick="openAddActivity" Attribute.

MainActivity.java

package com.hackerkernel.floatingactionbutton;

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    
    //function to open new activity when floating action button is clicked
    public void openAddActivity(View View){
        Intent intent = new Intent(MainActivity.this,AddActivity.class);
        startActivity(intent);
    }

    @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);
    }
}

Subscribe to HackerKernel Newsletter (Promise we will not spam you)


One thought on “Floating Action Button in Android – Material Design”

Leave a Reply

Your email address will not be published. Required fields are marked *