FloatingActionButton, layout_anchor and layout_gravity

FloatingActionButton, layout_anchor and layout_gravity

Introduction

In Android development, FloatingActionButtons (FABs) are a common UI element used for providing a primary action in your app. To position these FABs effectively, you need to understand the roles of layout_anchor and layout_gravity attributes.

What is a FloatingActionButton?

A FloatingActionButton (FAB) is a circular button that hovers above the content of your layout, typically used for actions like adding new items, creating a new entry, or performing a prominent action. It is a Material Design component.

layout_anchor: Anchoring to a Parent

The layout_anchor attribute is used to specify the parent view that a FAB should be anchored to. This means that the FAB will remain visually attached to this parent view, even when the parent view is scrolled or moved within the layout.

Key Points about layout_anchor:

• Only applicable within a CoordinatorLayout.
• Accepts a view ID as its value.
• Ensures that the FAB stays within the boundaries of its anchor.

layout_gravity: Positioning within the Anchor

Once the FAB is anchored to a parent view, the layout_gravity attribute comes into play. It determines the FAB’s position within the boundaries of the anchor.

Key Points about layout_gravity:

• Used with both CoordinatorLayout and other layout types.
• Can take values like top, bottom, start, end, center, etc.
• Controls the FAB’s horizontal and vertical alignment within its anchor.

Example: Positioning a FAB within a RecyclerView

Let’s see how to position a FloatingActionButton within a RecyclerView using layout_anchor and layout_gravity.

Layout XML (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add"
app:layout_anchor="@id/recyclerView"
app:layout_anchorGravity="bottom|end" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Explanation

• The RecyclerView is our primary content, and we set its ID to recyclerView.
• The FloatingActionButton is anchored to the recyclerView using app:layout_anchor="@id/recyclerView".
• We then position it at the bottom-right corner of the RecyclerView with app:layout_anchorGravity="bottom|end".

Comparison Table:

Conclusion

By understanding the difference between layout_anchor and layout_gravity, you can effectively position FloatingActionButtons within your Android layouts, ensuring a smooth user experience regardless of scrolling or other view interactions. Remember that these attributes work in tandem within CoordinatorLayout to create dynamic and visually appealing UI designs.