Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.
Most of the Material Design apps use the important element as FAB which covers important functionality of their apps.
Most of the Material Design apps use the important element as FAB which covers important functionality of their apps.
Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the
fabSize attribute.As this class descends from
ImageView, you can control the icon which is displayed via setImageDrawable(Drawable).The background color of this view defaults to the your theme's
colorAccent. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).
1. Floating Action Button
You can place a floating action button using below design support widget. The layout_gravity attribute is used to define the position of the button.<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
| Position | You can position the floating button by using layout_gravity attribute |
| Size | FAB supports two sizes ‘normal‘ and ‘mini‘. You can define the size of the button by using app:fabSize attribute |
| Background Color | By default, fab takes colorAccent as background color. If you want to change the background of fab, use app:backgroundTint attribute to define your own background color |
| Now we’ll see the FAB in action by creating a simple project. |
2. Creating New Project
1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project. I gave my project name as FAB and package name as com.androidxu.floatingbutton2. Open build.gradle and add design support library dependency.com.android.support:appcompat-v7:23.1.1 and com.android.support:design:23.1.1
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) test
Compile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1' }
3. Open dimens.xml and add below dimensions. You can see fab_margin is added as 16dp
4.Open the layout file of main activity (activity_main.xml) and do the below changes. You can see the Floating Action Button is added in the below layout. This layout contains the toolbar and floating action button needed for the activity.
<?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="com.androidxu.floatingbutton.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Example of Floating buttons"
android:textSize="20sp"
android:layout_gravity="center"/>
<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"/>
Now if you run the app, you can see the floating action button displayed at the bottom right corner of the screen.2.1 Floating Action Button Click Listener
The click event listener of fab is same as a normal button click event. Add the below code to your MainActivity.java to take appropriate action when fab is clicked.
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Click action
Intent intent = new Intent(MainActivity.this, NewMessageActivity.class);
startActivity(intent);
}
});
2.2 Adding the click Event in other two Floating Action ButtonAdd the below code with combining the animation and other two action buttons in MainActivity.java.
package com.androidxu.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;
}
}
}
2.3 Adding the animation to Floating ButtonTo add animation to the material design element create anim folder in res Folder .Adding the animation element by creating xml File
create fab_close.xml
<scale
android:duration="300"
android:fromXScale="0.8"
android:fromYScale="0.8"
android:toXScale="0.0"
android:toYScale="0.0"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
/>
<alpha
android:duration="300"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
/>
2.3.1 For Rotating animation to the Fab add the rotate_clock.xml
<rotateRun the Application
android:duration="300"
android:fromDegrees="0"
android:toDegrees="45"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
/>
For complete source please checkout for github repo
Happy Coding!
EmoticonEmoticon