Create FAB ( Floating Action Button ) on Android Studio

Hello there everyone,

This week we are gonna see, HOW TO CREATE FAB (Floating Action Button) using Android Studio without any library files… Seriously, it took me hell a lot of time to figure this out, but it’s worth it to know the native method

XML File :

The layout which i used is Relative layout and linear layout compat is used for individual FAB so that they can contain

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.admin.fab.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:clickable="true"
        app:backgroundTint="@android:color/background_light"
        app:elevation="6dp"
        app:fabSize="mini"
        app:pressedTranslationZ="12dp"
        app:srcCompat="@drawable/ic_apps_black_24dp"
        tools:layout_editor_absoluteX="328dp"
        tools:layout_editor_absoluteY="455dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true" />
<android.support.v7.widget.LinearLayoutCompat
    android:id="@+id/layoutFabAbout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:layout_gravity="bottom|end"
    android:layout_above="@+id/fabInfo"
    android:layout_alignParentEnd="true"
    android:orientation="horizontal"
    android:layout_alignStart="@+id/fabInfo">
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabAbout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:clickable="true"
        app:backgroundTint="@android:color/background_light"
        app:fabSize="mini"
        app:srcCompat="@drawable/ic_call_made_black_24dp" />
</android.support.v7.widget.LinearLayoutCompat>

</RelativeLayout>

Manifest file :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.admin.fab">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

 

APP Gradle File :

apply plugin: 'com.android.application'

android {
    android.defaultConfig.vectorDrawables.useSupportLibrary=true;
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "com.example.admin.fab"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:26.+'
}

Main Activity File :

package com.example.admin.fab;

import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutCompat;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    //closes FAB submenus
    private void closeSubMenusFab(){
        fabInfo = (FloatingActionButton)this.findViewById(R.id.fabInfo);
        layoutAbout = (LinearLayoutCompat) this.findViewById(R.id.layoutFabAbout);
        layoutAbout.setVisibility(View.INVISIBLE);
        fabInfo.setImageResource(R.drawable.ic_apps_black_24dp);
        fabExpanded = false;
    }

    //Opens FAB submenus
    private void openSubMenusFab(){
        fabInfo = (FloatingActionButton)this.findViewById(R.id.fabInfo);
        layoutAbout = (LinearLayoutCompat) this.findViewById(R.id.layoutFabAbout);
        layoutAbout.setVisibility(View.VISIBLE);
        //Change settings icon to 'X' icon
        fabInfo.setImageResource(R.drawable.ic_arrow_downward_black_24dp);
        fabExpanded = true;
    }

    private  FloatingActionButton fabInfo,fabAbout;
    private  LinearLayoutCompat layoutAbout;
    private  boolean fabExpanded;
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fabExpanded = true;
        closeSubMenusFab();
        fabAbout = (FloatingActionButton) this.findViewById(R.id.fabAbout);

        fabInfo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (fabExpanded){
                    closeSubMenusFab();
                } else {
                    openSubMenusFab();
                }
            }
        });
        fabAbout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
    }



}

Output:

NOTE :

Once you get used to it…

Anything is easy !!!