Android Add a Floating Action Button and Sub Floating button

Android Add a Floating Action Button and Sub Floating button .

Hey everyone least start on how to create floating button in android and implement its and create with multi-pal sub floating button , friends its show easy not be take presser so lets start

Step 1 : First one to Start Android Studio

Step 2 : Seconds step to Create a New Project Project Click On ==> File ==> NEW ==> New Project

Step 3 : After create on your project open your java file and xml file and you can just cope the code and paste on your file and run your project .

Step 4: Create a layout xml File fab_subfab_menu.xml

fab_subfab_menu.xml file compete Code

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fabFrame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/layoutFb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="120dp"
        android:layout_marginEnd="8dp"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@color/cardview_light_background"
            app:cardCornerRadius="@dimen/cardCornerRadius"
            app:cardElevation="@dimen/cardElevation"
            app:cardUseCompatPadding="true" >
            <TextView
                android:id="@+id/cvtSave"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Facebook"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textStyle="bold"
                android:paddingRight="@dimen/cardview_horizontal_padding"
                android:paddingLeft="@dimen/cardview_horizontal_padding"
                android:paddingBottom="@dimen/cardview_vertical_padding"
                android:paddingTop="@dimen/cardview_vertical_padding" />
        </android.support.v7.widget.CardView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabSave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/facebook"
            android:tint="@color/colorPrimaryDark"
            app:backgroundTint="@android:color/white"
            app:fabSize="mini" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layoutCall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="170dp"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@color/cardview_light_background"
            app:cardCornerRadius="@dimen/cardCornerRadius"
            app:cardElevation="@dimen/cardElevation"
            app:cardUseCompatPadding="true" >

            <TextView
                android:id="@+id/cvtEdit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="call"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textStyle="bold"
                android:paddingRight="@dimen/cardview_horizontal_padding"
                android:paddingLeft="@dimen/cardview_horizontal_padding"
                android:paddingBottom="@dimen/cardview_vertical_padding"
                android:paddingTop="@dimen/cardview_vertical_padding" />

        </android.support.v7.widget.CardView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabEdit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tint="@color/colorPrimaryDark"
            android:src="@drawable/phone2"
            app:backgroundTint="@android:color/white"
            app:fabSize="mini" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layoutWhatsApp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="220dp"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardBackgroundColor="@color/cardview_light_background"
            app:cardCornerRadius="@dimen/cardCornerRadius"
            app:cardElevation="@dimen/cardElevation"
            app:cardUseCompatPadding="true" >

            <TextView
                android:id="@+id/cvtPhoto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="whatsApp"
                android:textStyle="bold"
                android:paddingRight="@dimen/cardview_horizontal_padding"
                android:paddingLeft="@dimen/cardview_horizontal_padding"
                android:paddingBottom="@dimen/cardview_vertical_padding"
                android:paddingTop="@dimen/cardview_vertical_padding" />

        </android.support.v7.widget.CardView>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabPhoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/whatsapp"
            app:backgroundTint="@color/white"
            android:tint="@color/colorPrimaryDark"
            app:fabSize="mini" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/layoutFabSettings"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="50dp"
        android:orientation="horizontal">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fabSetting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:src="@drawable/ic_email_white_24dp"
            app:backgroundTint="?attr/colorPrimary"
            android:tint="@color/white"
            app:fabSize="normal" />

    </LinearLayout>
</FrameLayout>

After Complete these Step you can include the xml file to main.xml file

Step 5: Main.xml file compete Code

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="codeplayon.com.jewwllery.Home">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/layout_fab_submenu"/>

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

Step 6: After complete these step Open your java file and used these In your java file inside your fav button and use his id to implement these

Main.java File Complete Code

public class Home extends AppCompatActivity { private boolean fabExpanded = false;
private FloatingActionButton fabSettings;
private LinearLayout layoutFb;
private LinearLayout layoutCall;
private LinearLayout layoutWhatsApp;    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);
//        setupSlider();
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        fabSettings = (FloatingActionButton) this.findViewById(R.id.fabSetting);

        layoutFb = (LinearLayout) this.findViewById(R.id.layoutFb);
        layoutFb.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        layoutCall = (LinearLayout) this.findViewById(R.id.layoutCall);
        layoutCall.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });
        layoutWhatsApp = (LinearLayout) this.findViewById(R.id.layoutWhatsApp);
        layoutWhatsApp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });
        //layoutFabSettings = (LinearLayout) this.findViewById(R.id.layoutFabSettings);
        //When main Fab (Settings) is clicked, it expands if not expanded already.
        //Collapses if main FAB was open already.
        //This gives FAB (Settings) open/close behavior
        fabSettings.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (fabExpanded == true){
                    closeSubMenusFab();
                } else {
                    openSubMenusFab();
                }
            }
        });

        //Only main FAB is visible in the beginning
        closeSubMenusFab(); }       //closes FAB submenus
private void closeSubMenusFab(){
    layoutFb.setVisibility(View.INVISIBLE);
    layoutCall.setVisibility(View.INVISIBLE);
    layoutWhatsApp.setVisibility(View.INVISIBLE);
    fabSettings.setImageResource(R.drawable.ic_menu_send);
    fabExpanded = false;
}

//Opens FAB submenus
private void openSubMenusFab(){
    layoutFb.setVisibility(View.VISIBLE);
    layoutCall.setVisibility(View.VISIBLE);
    layoutWhatsApp.setVisibility(View.VISIBLE);
    //Change settings icon to 'X' icon
    fabSettings.setImageResource(R.drawable.ic_menu_send);
    fabExpanded = true;
}

And Used the dependancy in your App base build.gradle

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:27.0.2'
    compile 'com.android.support:design:27.0.2'
    compile 'com.android.support:support-v4:27.0.2'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'
    testCompile 'junit:junit:4.12'
}