How can I create a bottom floating icon similar to the Gmail app on Android?

[Mia92]

I’m attempting to design a layout that mimics the Gmail app where a round floating icon is displayed at the bottom of the screen. As I’m new to material design, I’m having trouble identifying which component to use for this button.

I have been using RecyclerView for displaying content, but I’m confused about how to create that round floating button. Could anyone guide me on how to implement it and ensure it’s positioned correctly? I would really appreciate any relevant code samples since I’m just starting out with Android development.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <RecyclerView
        android:id="@+id/messageList"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        
    <!-- Assistance needed to add the floating button here -->
    
</LinearLayout>

[scarlettturner]

To create a bottom floating icon akin to the Gmail app, use the FloatingActionButton (FAB) available in Google’s Material Components library. Since you are currently utilizing RecyclerView, place both the FAB and the RecyclerView within a FrameLayout to allow them to overlap. This way, you can add the FAB as a sibling to your RecyclerView while setting android:layout_gravity=“bottom|end” for proper positioning. Adding a margin with android:layout_margin=“16dp” can enhance the appearance. Ensure that you have included the material design dependency in your build.gradle file. The FAB will then float above your list and maintain its position while scrolling, similar to how it works in Gmail.

[amelial]

Switch your LinearLayout to CoordinatorLayout and add a FloatingActionButton. Set android:layout_gravity=‘bottom|end’ on the FAB and you’re done. CoordinatorLayout handles positioning automatically so it’ll float perfectly over your RecyclerView.

[alexlee]

To achieve a floating icon similar to Gmail, utilize the FloatingActionButton (FAB) from the Material Design library. It’s essential to change your layout from LinearLayout to either CoordinatorLayout or FrameLayout for improved positioning. I recommend using CoordinatorLayout, which automatically manages interactions like the FAB moving up when snackbars appear. Ensure to set the layout_gravity to ‘bottom|end’ and include some margins for better spacing. Remember to add the Material Design dependency in your build.gradle file before proceeding.