Android Floating Action Button Example Using Android Design Support Library

Please follow and like us:

android floating action button example

 

Floating Action Button is an awesome material design component of android design support library. this component is a round button for primary action on your android application’s interface.

Android Floating Action Button Example Using Android Design Support Library

Floating Action button is available in two different sizes, mini and normal. we can also manage image of button easily using android:src or setImageDrawable() method.

If you miss to read our previous sections  of “Android Design Support Library Tutorial” series, check below links. For overview of the series, refer to the “Design Support Library Intro“.

 

Section 1: Navigation View


Section 2: Floating labels for editing text

Let’s start, making Floating Action Button with android design support library.

Add Android design support library dependency

Add a below line to include design support library in dependencies of build.gradle file:

compile 'com.android.support:design:22.2.1

Step 1: Add FloatingActionButton

Add floating action button in activity_main.xml file in layout folder

<?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=".SplashActivity">

    <android.support.design.widget.FloatingActionButton android:id="@+id/btnFloatingAction" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:layout_marginBottom="@dimen/fab_margin_bottom" android:layout_marginRight="@dimen/fab_margin_right" android:src="@drawable/ic_action_home" app:backgroundTint="#FFC107" app:fabSize="mini" app:rippleColor="#FFA000"/>

</RelativeLayout>

Step 2: Implementing Floating Action button Logic

initialize and put logic of floating action button in MainActivity.java file.

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

public class MainActivity extends AppCompatActivity {

    private FloatingActionButton mFloatingButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mFloatingButton= (FloatingActionButton) findViewById(R.id.btnFloatingAction);
        mFloatingButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Hello FAB", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

Conclusion

Floating Action Button ( FAB ) is very useful when we have very few space on the Activity screen and need some component that comes on some particular event or place on bottom right corner without the disturbing flow of Android app. Hope you like our Floating Action Button Tutorial using Material design support library.

Happy Coding 🙂

 

nirav kalola