Make Floating Action Button for Android Studio

0 Shares

What is the Floating Action Button

Floating Action Button (FAB) is one component of Material Design. FAB is a button that is circular and displayed like floating on an android application.

Usually this widget is located on the lower right of the Android application. Following is an example of FAB on the WhatsApp application.

How to Make Floating Action Button for Android Studio

Well, let’s get to the point, here are the steps to create a Floating Action Button using Android Studio. Android Studio that was used when making this tutorial is Android Studio version 3.5 (the latest version).

Create a New Project

  • Open Android Studio and create a new project
  • Select Empty Activity

  • Project Configuration: project name, programming language used, and others

  • Wait until the Android Studio workspace is ready to use

Input Dependencies

Insert dependencies on build.gradle (module: app)
Please copy the following code :

implementation 'com.google.android.material:material:1.1.0-alpha10'
  • After that click the Sync Now command and make sure your laptop or computer is connected to the internet, so that the build.gradle (module: app) dependencies become like the image below

Add Image

In FAB there are usually icons or images. Now in this step, let’s input the picture. The method is:

  • Right-click on the drawable directory
  • Select New, then click Vector Asset

  • Click Clip Art on Configure Asset Vector
  • Then select the done icon, and change the color to white with the FFFFFF code

  • Click Next … until Finish

Set Layout and Add Widget

Layouts and widgets used are:

  • Coordinator Layout
  • TextView
  • and FloatingActionButton

Simply open Activity_main.xml, then add the codes below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="20dp"
    android:gravity="center"
    tools:context=".MainActivity">

        <TextView
            android:layout_width="match_parent"
            android:gravity="center"
            android:layout_height="match_parent"
            android:text="Membuat Floating Action Button"
            android:textSize="20sp" />


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_margin="15dp"
        app:fabSize="normal"
        app:borderWidth="0dp"
        app:elevation="6dp"
        android:backgroundTint="@color/colorPrimary"
        android:id="@+id/fab1"/>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

The result layout will be like the following picture:

Adding Java Code

Here we will add java code so that when the button is clicked it can display a text, well meaning we have to add Toast. The method is:

  • Open MainActivity.java
  • Then add the following codes below the package name
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

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

        FloatingActionButton floatingActionButton=findViewById(R.id.fab1);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "Floating Action Button Berhasil dibuat", Toast.LENGTH_SHORT).show();
                
            }
        });
    }
}

Running Project

If all the steps above have been followed properly, now is the time for us to refine this project. Here I run it directly to an Android smartphone. And the result :

You May Also Like

Leave a Reply

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