Android bottom sheet design

Question

Is there any way i can design a bottom sheet fragment as follows:

I need to set the width of the bottom sheet to 1/4 of the screen. IS it possible to implement this?

Thanks for your help.

Answer 1

You can achieve the same result with this library. Or just make the same CornerSheetBehavior. As you can see it's just a BottomSheetBehavior with managing of translationX of view

Answer 2

Create a layout file for your bottom sheet as normal, and set the width to what you need:

    <?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"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sheet_background"
    android:layout_width="100dp"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="100dp"
        android:layout_height="match_parent"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:behavior_peekHeight="150dp"
        android:id="@+id/drag_up_from_here">

        <!-- Bottom sheet contents here -->

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

Then to get it to stick to the right hand side, you can programmatically append the bottom sheet to your layout. This is how I add my bottom sheets:

    val inflater = getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater
    val bottomSheet = inflater.inflate(R.layout.bottomsheet_layout, null)
    val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet.findViewById<View>(R.id.drag_up_from_here)

    // Allow user to drag part of bottom sheet
    bottomSheet.findViewById<LinearLayout>(R.id.drag_up_from_here).setOnClickListener {
        if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED)
        } else {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED)
        }
    }

    // Create popup window
    val bottomSheetPopup = PopupWindow(popupViewLower,
                                    LinearLayout.LayoutParams.WRAP_CONTENT,
                                    LinearLayout.LayoutParams.MATCH_PARENT,
                                    false)

    // Get the view you want the bottom sheet added to
    val currentView = findViewById<ConstraintLayout>(R.id.main_view)

    // Display the popup window
    bottomSheetPopup.showAtLocation(currentView, Gravity.BOTTOM, currentView.measuredWidth, 0)

The key for getting it on the right of the screen is this part:

bottomSheetPopup.showAtLocation(currentView, Gravity.BOTTOM, currentView.measuredWidth, 0)

Where currentView.measueredWidth is passed as the x value, moving the bottom sheet all the way to the right.

Edit: I realized you're also asking for the width to be exactly 1/4 the width of the screen. To do this, programmatically set the width of the bottom sheet layout to currentView.measuredWidth / 4. This post explains this well: Android view layout_width - how to change programmatically?