Loading...

Adding Floating Action Button (FAB) Between Two Widgets or Layouts

Android Floating Action Button (FAB) is one of the most important and useful component which is introduced in material design guide. Floating action button (fab) is a circular button UI and used for quick action task. This is introduced with android lollipop 5.0 but you can use this in the device below lollipop using design support library. In this tutorial, you will learn to place/add floating action button between two layouts or widgets/components using design support library.

FAB has lots of attributes which makes us easier to use and you can find these attributes in android developer resource site.

Related:
Floating Action Button (FAB) Using Android Design Support Library
Floating Action Buttons: Awesome Material Design Android FAB Libraries
Android Material Design with Design Support Library

Android Example: How to Add FAB Between Two Layouts or Widgets


First open your app build.gradle file and add design support library dependencies because we are making this app using android design support library.

build.gradlle

Adding/placing two layouts or widgets is very simple. Just change your app root layout to CoordinatorLayout and place a LinearLayout and a FloatingActionButton inside root layout. Also add other two views or layout or any widgets inside the above LinearLayout. The format will looks like this.

Now, you have to add different attributes to these layouts and floating action button. There are some important attributes for floating action button like app:backgroundTint, android:src, app:layout_achorGravity etc. Following is the complete XML layout file; you can copy and paste it to your project XML layout file.

res/layout/fab_between_two_widget_layout.xml

Android Example: How to Add FAB Between Two Layouts or Widgets

That’s all. Run your Adding Floating Action Button (FAB) Between Two Widgets or Layouts application, which will looks like above screenshot.
XML 2821293470809139956
Home item