Bottom Sheet Dialog Fragment , Kotlin-Android

In this article we are going to open up a bottom sheet dialog fragment on clicking a button.

Bottom Sheet Fragment

Step 1:- Create an activity

In the xml file “activity_main.xml” we will be adding the button on clicking of which Bottom Sheet Fragment will open up

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnOpenBottomSheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open Bottom Sheet"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3:-Now let’s add click to the Button and open the Bottom Sheet Fragment.

So for this add the below code in the MainActivity.kt file

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    lateinit var btnOpenBottomSheet: Button
    lateinit var bottomSheetFragment: BottomSheetFragment

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btnOpenBottomSheet = findViewById(R.id.btnOpenBottomSheet)
        btnOpenBottomSheet.setOnClickListener {
            bottomSheetFragment = BottomSheetFragment()
            bottomSheetFragment.show(supportFragmentManager, "BSDialogFragment")
        }
    }
}

Step 3:-Create a Fragment(Bottom Sheet Fragment)

Let’s code in the xml file

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomSheetFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="70dp"
        android:layout_marginVertical="50dp"
        android:layout_marginHorizontal="10dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

Next write code in BottomSheetFragment.kt file

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.google.android.material.bottomsheet.BottomSheetDialogFragment

class BottomSheetFragment : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?): View? {
      return inflater.inflate(R.layout.fragment_bottom_sheet,container,false)
    }
}

We are ready to open up the Bottom Sheet Fragment only in one click .