Bottom Sheet not Show All Layout

Question

How to Show All layout in bottom sheet kotlin for example, I need to show bottom sheet like this

but when in call bottom sheet on click it just show half

i am new in kotlin, how to use show all bottom sheet, this my code :

on button click

var Bottomfragmenjemput = JemputSayaFragment()

        binding.button3.setOnClickListener {
            Bottomfragmenjemput.show(supportFragmentManager,"TAG")
        }

this my BottomsheetFragment.kt

class JemputSayaFragment : BottomSheetDialogFragment() {

    private lateinit var binding : BottomsheetlayoutBinding
    private lateinit var bottomsheet : BottomSheetBehavior<View>

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = BottomsheetlayoutBinding.inflate(inflater,container,false)

        binding.numberPicker.minValue = 1
        binding.numberPicker.maxValue = 4


        return binding.root
    }
}

this XML code bottomsheetlayout.xml :

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:padding="16dp"
    app:layout_behavior=""
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Jemput Saya"
        style="@style/TextAppearance.MaterialComponents.Headline6"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView11"
        style="@style/TextAppearance.MaterialComponents.Caption"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="masyarakat berperkara dapat meminta jemput apabila terjadi kendala untuk datang pada hari sidang"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView10" />

    <TextView
        android:id="@+id/textView12"
        style="@style/TextAppearance.MaterialComponents.Body2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Jumlah Penumpang : "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <NumberPicker
        android:id="@+id/numberPicker"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView12" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="@drawable/circlebutton"
        android:text="Jemput saya"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/numberPicker" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="316dp"
        android:layout_height="198dp"
        android:layout_marginTop="16dp"
        app:layout_constraintDimensionRatio="w,1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView11"
        app:srcCompat="@drawable/ic_pick" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Dialogs have a listener that is fired once the dialog is shown. The dialog cannot be shown if it isn't laid out.

So, in the onCreateDialog() of your modal bottom sheet (BottomSheetFragment), just before returning the dialog (or anywhere, once you have a reference to the dialog), call:

// This listener's onShow is fired when the dialog is shown
dialog.setOnShowListener(new DialogInterface.OnShowListener() {
    @Override
    public void onShow(DialogInterface dialog) {

        // In a previous life I used this method to get handles to the positive and negative buttons
        // of a dialog in order to change their Typeface. Good ol' days.

        BottomSheetDialog d = (BottomSheetDialog) dialog;

        // This is gotten directly from the source of BottomSheetDialog
        // in the wrapInBottomSheet() method
        FrameLayout bottomSheet = (FrameLayout) d.findViewById(android.support.design.R.id.design_bottom_sheet);

        // Right here!
        BottomSheetBehavior.from(bottomSheet)
                .setState(BottomSheetBehavior.STATE_EXPANDED);
    }
});

Reference from this answer to "Set state of BottomSheetDialogFragment to expanded".

Answer 2

You need to set your own peek height on your bottom sheet behavior. Override onCreateDialog of your JemputSayaFragment:

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
    val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
    val peekHeightInPixels = /*your desired height*/
    dialog.behavior.peekHeight = peekHeightInPixels
    return dialog
}