Floating Action Button [Android Tutorial]

CHECK OUT THE PROJECT IN GITHUB

Hello Guys…..

In this tutorial i will show you how to create a floating action button with animations and actions on click. You can implement this tutorial on your app to make your app look more good with floating buttons instead of simple view buttons.


  • Fire up your Android Studio (I would recommend you to use Android Studio over Eclipse).
  • Create a new project and give your package name and project name, etc . (NOTE- If you are copying the code from this site, make sure you change the package name com.gmonetix.floatingbutton to your_own_package_name )
  • Open build.gradle (app) and add the following dependencies.
compile 'com.android.support:design:25.0.1'

  • Open colors.xml and add the following colors.
<color name="fab1_color">#4CAF50</color>
<color name="fab2_color">#2196F3</color>

  • Now in your android view of project, right click on res folder. Click New -> Directory . Give the new directory name as anim .
  • Now right click on anim folder and click new -> animation resource file and create four files with the following names.

fab_close , fab_open , rotate_anticlock , rotate_clock

 

 

 

  • In the four above files paste the following codes

fab_close.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!-- rotate is used for rotation -->
    <rotate
        android:duration="300"
        android:fromDegrees="0"
        android:toDegrees="45"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        />

</set>

 

fab_open.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!-- scale is used to scale the dimension -->
    <scale
        android:duration="300"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:toXScale="0.8"
        android:toYScale="0.8"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        />

    <!-- aplha is used for transparency -->
    <alpha
        android:duration="300"
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        />

</set>

rotate_anticlock.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!-- rotate is used for rotation -->
    <rotate
        android:duration="300"
        android:fromDegrees="45"
        android:toDegrees="0"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        />

</set>

rotate_clock.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <!-- rotate is used for rotation -->
    <rotate
        android:duration="300"
        android:fromDegrees="0"
        android:toDegrees="45"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        />

</set>
  • Now open activity_main.xml and paste the following 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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Example of Floating buttons" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="180dp"
        android:src="@drawable/ic_action_settings"
        android:elevation="6dp"
        android:id="@+id/settings"
        app:pressedTranslationZ="12dp"
        android:backgroundTint="@color/fab1_color"
        android:visibility="invisible"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="100dp"
        android:src="@drawable/ic_action_share"
        android:elevation="6dp"
        android:id="@+id/share"
        app:pressedTranslationZ="12dp"
        android:backgroundTint="@color/fab2_color"
        android:visibility="invisible"/>
    
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:fabSize="normal"
        android:layout_margin="16dp"
        android:src="@drawable/ic_action_more"
        android:elevation="6dp"
        android:id="@+id/more"
        app:pressedTranslationZ="12dp"/>

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

 

  • Now open MainActivity class and paste the following lines.
package com.gmonetix.floatingbutton;

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

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    FloatingActionButton fab_more,fab_settings,fab_share;
    Animation open, close, rotateclock,rotateanticlock;
    boolean isopen = false;

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

        // typecasting the buttons
        fab_more = (FloatingActionButton) findViewById(R.id.more);
        fab_settings = (FloatingActionButton) findViewById(R.id.settings);
        fab_share = (FloatingActionButton) findViewById(R.id.share);

        // loading the animation from xml file
        open = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_open);
        close = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fab_close);
        rotateclock = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_clock);
        rotateanticlock = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate_anticlock);

        // setting up the onClickListener() method
        fab_more.setOnClickListener(this);
        fab_settings.setOnClickListener(this);
        fab_share.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId())
        {
            case R.id.more:
                if(isopen){
                    // more button is already open
                    fab_settings.startAnimation(close);
                    fab_share.startAnimation(close);
                    fab_more.startAnimation(rotateanticlock);
                    fab_share.setClickable(false);
                    fab_settings.setClickable(false);
                    isopen = false;
                } else{
                    // more button is already close
                    fab_settings.startAnimation(open);
                    fab_share.startAnimation(open);
                    fab_more.startAnimation(rotateclock);
                    fab_share.setClickable(true);
                    fab_settings.setClickable(true);
                    isopen = true;
                }
                break;
            case R.id.settings:
                Toast.makeText(getApplicationContext(),"You clicked settings",Toast.LENGTH_LONG).show();
                break;
            case R.id.share:
                Toast.makeText(getApplicationContext(),"You clicked share",Toast.LENGTH_LONG).show();
                break;
        }
    }
}

   Now test the app . Run it on API level less than 21 and greater than 21 and see the differneces of support library effects .

If you get any problem or error then feel free to comment below.

 

 

 

 

Leave a Reply

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