Material Design: Floating Action Button(FAB)

Material Design: Android Design Support Library – Floating Action Button(FAB)

As we discussed In our Previous blog  material design is all new concept for the android UI design (If you still didn’t read it click here: Link). Now today we are going to see all new component which is called Floating Action Button(FAB).

floating action button is one of the simple and good to use component of the material design which is available at android design support library.

Android Design Support Library‘s Floating action button(FAB) is used to trigger very specific and most important action of the current screen. You need to remember one thing that you don’t have to Use FAB in every screen but it is really important to create FABs when user need to see an action that going be used more oftenly.  We can understand it with with very simple example, suppose you want to compose new mail in inbox  so we can call this action very important and which is used very oftenly. In such a case like that FAB is the best option to draw user’s attention for performing very important action.

Create Floating Action Button(FAB):

Add Android design support library dependency

First of all add a below line to include design support library in gradle file in android studio:

compile ‘com.android.support:design:23.0.0’

Declar

Declare  Namespace variable:

f="http://developer.android.com:80/reference/android/support/design/widget/FloatingActionButton.html">FloatingActionButton in the xml layout file. In addition, assuming xmlns:app=”http://schemas.android.com/apk/res-auto is declared as namespace the top of your layout.

<FrameLayout>

xmlns:app=”http://schemas.android.com/apk/res-auto

android:id="@+id/flRootlayout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton

android:id="@+id/btnFloatingAction"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|right" />

</FrameLayout>

<FrameLayout>

xmlns:app=”http://schemas.android.com/apk/res-auto

android:id="@+id/flRootlayout"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.design.widget.FloatingActionButton

android:id="@+id/btnFloatingAction"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|right" />

</FrameLayout>

In very easy term I can tell you that Fab is nothing but it is very specialized version of the Image view (Fab extends the Image view as you seen in the Code) Fab has  round shape and it contains one drawable icon in the center of it. so we can use some very common attributes of the image view to create very  effective FAB .

There are two types of attribute which can be used in the FAB component One is the common type of attribute:  e.g. to set source of image android:src = “@drawable/icon” is used to set icon from drawable folder. And another are the special type of the attribute which are used only in the FAB component . Some of them are given bellow:

Special Attributes Of F

Special Attributes Of FAB:

cribed only single attribute called fabsize is given, but here we are going to see more than that which are very important attribute for using the FAB

  • fabSize– to set size whether mini or normal
  • backgroundTint – to set background color
  • rippleColor –to set the color for the ripple effects when Floating action button pressed
  • elevation- to set the idle state’s shadow depth (default is 6dp)
  • pressedTranslationZ – o set the press state’s shadow depth (default is 12dp)
  • borderWidth – to apply width of border

Here is the basic syntax to create the FAB in your application:

 

<android.support.design.widget.FloatingActionButton

android:id="@+id/btnFloatingAction"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|right"

android:src="@drawable/ic_action_compose"

app:fabSize="normal"

app:rippleColor="@android:color/background_dark"/>

 

Assign the Click Listener:Assign the Click Listener:

AB you don’t need to hastle much because it has the   same way as  we are assign to athor widgets like ImageView and Button and othe view.

FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction);

btnFab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(context, "Hello I am FAB,!", Toast.LENGTH_LOMG).show();

}

});

Make FAB Compatible:

Fab

Make FAB Compatible:

or the design compebility in Android Version of the Lolipop but we can easily resolve the issue by defining margins value in the Dimension file, after doing that small changes it will be work very well.

This is the snap shot Up to the KITKAT version:

But in lollipop there is margin issues which is displayed bellow in the snapshot:

So in order to resolve this issues and make compatible in loipop we have to specify different margin_right and margin_bottom values for different platform version.

 

<strong>values/dimens.xml:</strong>

<dimen name="fab_margin_right">0dp</dimen>

<dimen name="fab_margin_bottom">0dp</dimen>

<strong>values-v21/dimens.xml:</strong>

<dimen name="fab_margin_right">16dp</dimen>

dimen name="fab_margin_bottom">16dp</dimen>

 

So final code  after defining dimensions:

<android.support.design.widget.FloatingActionButton

android:id="@+id/btnFloatingAction"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|right"

android:src="@drawable/ic_action_compose"

app:fabSize="normal"

app:rippleColor="@android:color/background_dark"

android:layout_marginBottom="@dimen/fab_margin_bottom"

android:layout_marginRight="@dimen/fab_margin_right"

/>

In this part, we have talked about Floating Action Button. I hope you have enjoyed and learned bit of the material design’s concept Float Action Bar, which is uses the same concepts as the image view but gives us the more and smart functionality to use. And in the next chapter of this series we are going to see the new concept of material design which is called Navigation View which is very important part of the Material design so stay tuned for the next amazing blog of material design which is Navigation view.