0

I want to make a feature like in the attached image. It will display a button on top of the recycler view with a distance of the items in the recycler view. As the user will scroll down it will show items that are far away from the user location. However, I do not know how to implement this type of button that overlaps the recycler view. Can anyone let me know please what is this feature known as? How can I search more about it. I have tried searching with "button overlaps recycler view" but nothing found that can help. Any help will be appreciated. Thanks

enter image description here

zhangxaochen
  • 32,744
  • 15
  • 77
  • 108

1 Answers1

0

This is called Extended Floating Action Button, what you could do is something like this :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    xmlns:tools="http://schemas.android.com/tools"
    >

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:listitem="@android:layout/simple_list_item_checked"
        />

    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Displaying items 250 to 500 miles from you"
        android:layout_marginTop="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

The output is :

enter image description here

You could also take a look on

Buttons Floating Action Button Also this other way to do it : https://stackoverflow.com/a/61055155/4385913

Skizo-ozᴉʞS ツ
  • 19,464
  • 18
  • 81
  • 148