Android Add a Floating Action Button and Sub Floating button

Codeplayon Android tutorial

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'
}