Open In App

Modal Bottom Sheet in Android with Examples

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about how to add Modal Bottom Sheet in our app. We have seen this UI component in daily applications like Google Drive, Maps, or Music Player App. The modal Bottom sheet always appears from the bottom of the screen and if the user clicks on the outside content then it is dismissed. It can be dragged vertically and can be dismissed by sliding it down. 

Approach:

Add the support Library in build.gradle file and add dependency in the dependencies section. With the help of this library we can inherit the BottomSheetDialogFragment which helps us to implement Bottom Sheet component. 

XML




dependencies {        
      implementation 'com.google.android.material:material:1.2.0-alpha02'    
}        


Now create a bottom_sheet_layout.xml file and add the following code. Here we design the layout of our Modal Bottom sheet. It has a textview and two buttons

bottom_sheet_layout.xml

 

Now create BottomSheetDialog.java and add the following code.This file extends the BottomSheetFragment and thats why it act as a fragment. When the user clicks on any bottom of modal sheet the onClickListener() gets invoked. 

BottomSheetDialog.java

 

Kotlin




//code by rony sarkar
package org.geeksforgeeks.gfgmodalsheet
 
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.Toast
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
 
class BottomSheetDialog : BottomSheetDialogFragment() {
 
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.bottom_sheet_layout, container, false)
 
        val algoButton = view.findViewById<Button>(R.id.algo_button)
        val courseButton = view.findViewById<Button>(R.id.course_button)
 
        algoButton.setOnClickListener {
            Toast.makeText(activity, "Algorithm Shared", Toast.LENGTH_SHORT).show()
            dismiss()
        }
 
        courseButton.setOnClickListener {
            Toast.makeText(activity, "Course Shared", Toast.LENGTH_SHORT).show()
            dismiss()
        }
 
        return view
    }
}


Add the following code in activity_main.xml file. Here we add a button on activity_main layout. 

activity_main.java

 

Add the following code in the MainActivity.java file. Here an onClickListener is attached with the button. If the user clicks on it, it gets invoked and bottom sheet dialog displays to user. 

MainActivity.java

 

Kotlin




//code by rony sarkar
package org.geeksforgeeks.gfgmodalsheet
 
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Button
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val openBottomSheet = findViewById<Button>(R.id.open_bottom_sheet)
 
        openBottomSheet.setOnClickListener {
            val bottomSheet = BottomSheetDialog()
            bottomSheet.show(supportFragmentManager, "ModalBottomSheet")
        }
    }
}


Output:



Last Updated : 24 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads