Floating Action Button: How to Use

Now a days, Floating Action Button ( FA) is popular under the materials design concept.  You can customize your fab icon with several default given attributes by the framework.

Code Snippet:

<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_fav"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:tint="@color/app_white"
android:layout_margin="16dp"
android:src="@drawable/baseline_favorite_white_dp"
app:backgroundTint="@color/colorPrimaryDark" />
view raw fab.xml hosted with ❤ by GitHub
Here, 
1. app:backgroundTint is used to color background of the fab
   button.
2. android:src="@drawable/baseline_favorite_white_dp" is source of
the icon.
3. android:layout_gravity="end|bottom", set the position of the fab to right & bottom of the of the parent layout.
4. android:tint="@color/app_white", to color icon as tint color.

Here, The design looks like below picture.




Related Posts