Search code examples
androiduser-interfacematerial-designandroid-coordinatorlayoutbottom-sheet

Adjust recycler view height when persistent bottom sheet is expanded

I have a persistent bottom sheet (which is basically a button) and a recycler view both contained in a CoordinatorLayout.

When the bottom sheet is expanded, I do not want it to obscure the recycler view. I am able to achieve this by setting app:layout_insetEdge="bottom" in the bottom sheet and app:layout_dodgeInsetEdges="bottom" in the recycler view respectively.

However, since the recycler view's height is set to android:layout_height="match_parent", its top partly moves out of the screen when the bottom sheet is expanded.

Instead, I want the recycler view to adjust its height dynamically occording to the height of the bottom sheet so it does not move out of the screen anymore. How can I achieve that?

Here is the complete layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:nestedScrollingEnabled="false"
    app:layout_dodgeInsetEdges="bottom" />

<Button
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/update_all"
    android:foreground="?attr/selectableItemBackground"
    android:background="@drawable/angled_button"
    app:behavior_hideable="false"
    app:behavior_peekHeight="0dp"
    app:layout_insetEdge="bottom"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior" />

</android.support.design.widget.CoordinatorLayout>

Edit: Screenshots added

Without the bottom sheet everything looks fine. enter image description here

With the bottom sheet expanded the recycler view is not completely visible anymore. enter image description here

Edit 2: GIF added

enter image description here

Solution

  • Faced the same issue recently, didn't find a better way than to remove app:layout_dodgeInsetEdges="bottom" and use padding instead. This is how it can be achieved:

    Kotlin:

    val rv = findViewById<RecyclerView>(R.id.recycler_view))
val behavior = BottomSheetBehavior.from(findViewById<Button>(R.id.bottom_sheet))
behavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback(){
    override fun onSlide(bottomSheet: View, offset: Float) {
        rv.setPadding(0, 0, 0, (bottomSheet.height * offset).toInt())
    }

    override fun onStateChanged(bottomSheet: View, newState: Int){}
})

    Java:

    RecyclerView rv = (RecyclerView) findViewById(R.id.recycler_view); 
BottomSheetBehavior behavior = BottomSheetBehavior.from(findViewById(R.id.bottom_sheet));
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        rv.setPadding(0, 0, 0, (int)(slidingView.getHeight() * offset));
    }
});

    Pros:

    • No overlapping on screen, neither with Toolbar nor with BottomSheet button;
    • Doesn't break move-up functionality for FAB;
    • RecyclerView scrolling can be done along with sliding up the BottomSheet;

    Cons:

    • Not pure XML, coding required;
    • Additional changes are required to keep original padding (but still possible and relatively easy to do)