Floating action button

Floating action button (FAB) is simply a circle button with rounded shadow, floats above the UI and used to display any promoted action.

Floating action button can be an either of two sizes :

normal (56dp)
mini (40dp)

To use Floating action button you need to do following steps :

1. Add design support library in gradle file.

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

2. Include FloatingActionButton in xml layout. you need to include xmlns:app=”http://schemas.android.com/apk/res-auto as namespace the top of your layout.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
 
    <android.support.design.widget.FloatingActionButton
           android:id="@+id/btnFab"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="bottom|right"      
           android:src="@android:drawable/ic_delete"
           app:fabSize="normal"
           app:rippleColor="@android:color/background_dark" />
 
</android.support.design.widget.CoordinatorLayout>

<?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:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

<android.support.design.widget.FloatingActionButton

android:id="@+id/btnFab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|right"

android:src="@android:drawable/ic_delete"

app:fabSize="normal"

app:rippleColor="@android:color/background_dark" />

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

3. Write your code in JAVA file.

FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFab);
        btnFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Delete item", Toast.LENGTH_SHORT).show();
            }
        });

FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFab);

btnFab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, "Delete item", Toast.LENGTH_SHORT).show();

}

});

4. Output

Lolipop FloatingActionButton

Kitkat FloatingActionButton

Floating Action Button Between Two Layouts

You need to take parent layout as CoordinatorLayout.

in your 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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true">

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

        <RelativeLayout android:id="@+id/relative1" 
            android:layout_width="match_parent" 
            android:layout_height="300dp" 
            android:background="@android:color/darker_gray"></RelativeLayout>

        <RelativeLayout android:id="@+id/relative2" 
            android:layout_width="match_parent" 
            android:layout_height="300dp"
            android:layout_below="@+id/relative1"
            android:background="@android:color/black"></RelativeLayout>
    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton android:id="@+id/btnFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_marginRight="10dp" 
        android:clickable="true" 
        android:src="@android:drawable/ic_delete" 
        app:borderWidth="0dp" 
        app:layout_anchor="@id/relative1" 
        app:layout_anchorGravity="bottom|right|end" />

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

<?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:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true">

<RelativeLayout android:layout_width="match_parent"

android:layout_height="match_parent">

<RelativeLayout android:id="@+id/relative1"

android:layout_width="match_parent"

android:layout_height="300dp"

android:background="@android:color/darker_gray"></RelativeLayout>

<RelativeLayout android:id="@+id/relative2"

android:layout_width="match_parent"

android:layout_height="300dp"

android:layout_below="@+id/relative1"

android:background="@android:color/black"></RelativeLayout>

</RelativeLayout>

<android.support.design.widget.FloatingActionButton android:id="@+id/btnFab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginRight="10dp"

android:clickable="true"

android:src="@android:drawable/ic_delete"

app:borderWidth="0dp"

app:layout_anchor="@id/relative1"

app:layout_anchorGravity="bottom|right|end" />

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

Output :

Author
Recent Posts

Follow me

Ravi Rupareliya

He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.

Floating action button

Ravi Rupareliya

Latest posts by Ravi Rupareliya (see all)