https://github.com/prongbang/bottomsheetdialog
Custom Bottom Sheet Dialog Example
https://github.com/prongbang/bottomsheetdialog
Last synced: 5 months ago
JSON representation
Custom Bottom Sheet Dialog Example
- Host: GitHub
- URL: https://github.com/prongbang/bottomsheetdialog
- Owner: prongbang
- License: mit
- Created: 2017-03-19T09:49:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-27T03:13:09.000Z (5 months ago)
- Last Synced: 2025-05-01T21:36:19.859Z (5 months ago)
- Language: Kotlin
- Size: 147 KB
- Stars: 15
- Watchers: 0
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# BottomSheetDialog ๐ฑ
[](https://jitpack.io/#prongbang/BottomSheetDialog)
[](https://jitpack.io/#prongbang/BottomSheetDialog)
[](https://developer.android.com)
[](https://android-arsenal.com/api?level=21)
[](https://kotlinlang.org)
> Create beautiful and customizable bottom sheet dialogs for Android with minimal setup.
## โจ Features
- ๐จ **Fully Customizable** - Design your own bottom sheet layout
- ๐ **Easy Integration** - Simple builder pattern implementation
- ๐ฑ **Material Design** - Follows Material Design guidelines
- ๐ **Lifecycle Aware** - Properly handles configuration changes
- ๐ฏ **Type-Safe** - Written in Kotlin with type safety in mind
## ๐ธ Preview
## ๐ฆ Installation
### Step 1: Add JitPack repository
Add it in your root `build.gradle` at the end of repositories:
```groovy
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
```
### Step 2: Add the dependency
For AndroidX:
```groovy
dependencies {
implementation 'com.github.prongbang:bottomsheetdialog:1.0.0'
}
```
## ๐ Quick Start
### 1. Create your bottom sheet layout
```xml
```
### 2. Create your BottomSheetDialogFragment
```kotlin
class MyBottomSheetDialogFragment(
supportFragmentManager: FragmentManager
) : SmartBottomSheetDialogFragment(supportFragmentManager) {
override fun tagName(): String = MyBottomSheetDialogFragment::class.java.simpleName
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.bottom_sheet_layout, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
initView()
}
private fun initView() {
arguments?.let { args ->
// Get values by key
val title = args.getString(TITLE_KEY)
val subtitle = args.getString(SUBTITLE_KEY)
val avatarUrl = args.getString(AVATAR_URL_KEY)
// Set up your views
}
}
class Builder(
private val fragmentManager: FragmentManager
) : SmartBottomSheetDialogFragment.Builder() {
private var onCloseListener: (() -> Unit)? = null
fun setTitle(title: String) = apply {
argumentsBundle.putString(TITLE_KEY, title)
}
fun setSubtitle(subtitle: String) = apply {
argumentsBundle.putString(SUBTITLE_KEY, subtitle)
}
fun setAvatar(avatarUrl: String) = apply {
argumentsBundle.putString(AVATAR_URL_KEY, avatarUrl)
}
fun setOnCloseButton(listener: () -> Unit) = apply {
onCloseListener = listener
}
override fun build(): MyBottomSheetDialogFragment {
return MyBottomSheetDialogFragment(fragmentManager).apply {
arguments = argumentsBundle.apply {
onClickCloseListener = onCloseListener
}
}
}
}
companion object {
private const val TITLE_KEY = "TITLE_KEY"
private const val SUBTITLE_KEY = "SUBTITLE_KEY"
private const val AVATAR_URL_KEY = "AVATAR_URL_KEY"
}
}
```
### 3. Show the bottom sheet
```kotlin
// In your Activity or Fragment
MyBottomSheetDialogFragment.Builder(supportFragmentManager)
.setAvatar(avatarUrl)
.setTitle("เนเธเธเนเธเธงเธฑเธเน")
.setSubtitle("https://prongbang.github.io")
.setOnCloseButton {
Toast.makeText(this, "Bottom Sheet Dialog Closed", Toast.LENGTH_SHORT).show()
}
.build()
.show()
```
## ๐ง Advanced Usage
### Custom Styling
```xml
<item name="bottomSheetStyle">@style/CustomBottomSheet</item>
<item name="android:background">@drawable/custom_bottom_sheet_background</item>
```
### Handle State Changes
```kotlin
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// Get bottom sheet behavior
val bottomSheetBehavior = BottomSheetBehavior.from(view.parent as View)
// Set state change callback
bottomSheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
override fun onStateChanged(bottomSheet: View, newState: Int) {
when (newState) {
BottomSheetBehavior.STATE_EXPANDED -> {
// Handle expanded state
}
BottomSheetBehavior.STATE_COLLAPSED -> {
// Handle collapsed state
}
BottomSheetBehavior.STATE_HIDDEN -> {
dismiss()
}
}
}
override fun onSlide(bottomSheet: View, slideOffset: Float) {
// Handle slide offset
}
})
}
```
## ๐ Pro Tips
1. **Remember to add behavior** - Always add `app:layout_behavior="@string/bottom_sheet_behavior"` to your root layout
2. **Handle configuration changes** - The builder pattern helps maintain state across configuration changes
3. **Custom animations** - Override `setupDialog()` to customize enter/exit animations
4. **Peek height** - Adjust the initial visible height using `BottomSheetBehavior.setPeekHeight()`
## ๐ค Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## ๐ License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## ๐ Support
If you find this library helpful, please consider giving it a โญ๏ธ and buying me a coffee!
[](https://www.buymeacoffee.com/prongbang)
---