As in our last tutorial we discussed about Date Picker Dialog, Now in this tutorial I am going to discuss about How to create Floating action button in android app with the help of Android Design Support Library.

A FloatingActionButton is a circular button that triggers the primary action in an Android application . Floating Action Button is a widget of Android Design Support Library .

Here we just show a snack bar notification in floating action button.

1. Create a New Project :

Lets we start with a new project in Android Studio from File New Project ⇒
select Empty Activity and go through it.

2. Implement Design support library :

Implement Design support Library inside your project build.gradle file .

implementation 'com.android.support:design:28.0.0'

Try to add the latest version of the Design support library. Once that’s done, save the file and perform a Gradle sync.

3. Implement Floating Action Button to main XML Layout :

Add FloatingActionButton to your XML Layout file i.e. activity_main.xml to implement clickListener to display it for better user experience or just add the following code to activity_main.xml file .

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:layout_margin="16dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_notifications_black_24dp" />

activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    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="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:layout_margin="16dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_notifications_black_24dp" />


</RelativeLayout>
Floating action button

4. Implement onClickListener of FloatingActionButton :

Now implement onClickListener of FloatingActionButton  in MainActivity.java file .

fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //Event listener here
            }

        });

MainActivity.java :

package com.technxtcodelabs;

import android.support.annotation.NonNull;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;


public class MainActivity extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Here's a Snackbar Notification", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }

        });

    }


}

Now run the project/app in android device or any Emulator to add Floating action button in android app.

%d bloggers like this: