Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rounded modal bottom sheet as seen in new Google products(Tasks, News, etc.), described in this article: https://medium.com/halcyon-mobile/implementing-googles-refreshed-modal-bottom-sheet-4e76cb5de65b
<!-- Drawable used for the bottom sheet dialog background -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:topLeftRadius="@dimen/bottom_sheet_corner_radius"
android:topRightRadius="@dimen/bottom_sheet_corner_radius" />
<padding android:top="@dimen/bottom_sheet_top_padding" />
<solid android:color="@color/primary" />
</shape>
<dimen name="bottom_sheet_corner_radius">16dp</dimen>
<dimen name="bottom_sheet_top_padding">8dp</dimen>
package com.your.package
import android.app.Dialog
import android.os.Bundle
import com.your.package.R
import com.google.android.material.bottomsheet.BottomSheetDialog
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
/**
* BottomSheetDialog fragment that uses a custom
* theme which sets a rounded background to the dialog
* and doesn't dim the navigation bar
*/
open class RoundedBottomSheetDialogFragment : BottomSheetDialogFragment() {
override fun getTheme(): Int = R.style.BottomSheetDialogTheme
override fun onCreateDialog(savedInstanceState: Bundle?): Dialog = BottomSheetDialog(requireContext(), theme)
}
<!-- v21 styles, you can merge these two if your minSdkVersion is >= 21 -->
<resources>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog">
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@color/white</item>
</style>
</resources>
<resources>
<!-- set the rounded drawable as background to your bottom sheet -->
<style name="BottomSheet" parent="@style/Widget.Design.BottomSheet.Modal">
<item name="android:background">@drawable/bg_bottom_sheet_dialog_fragment</item>
</style>
<style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="bottomSheetStyle">@style/BottomSheet</item>
</style>
<style name="BottomSheetDialogTheme" parent="BaseBottomSheetDialog" />
</resources>
@bamsbamx
Copy link

bamsbamx commented Mar 30, 2020

Change background opacity as you scroll the dialog:

open class RoundedBottomSheetDialogFragment : BottomSheetDialogFragment() {

    override fun getTheme(): Int = R.style.BottomSheetDialogTheme

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = BottomSheetDialog(requireContext(), theme)

        dialog.setOnShowListener {
            dialog.behavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
                override fun onStateChanged(bottomSheet: View, newState: Int) {
                    if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                        dialog.dismiss()
                    }
                }

                override fun onSlide(bottomSheet: View, slideOffset: Float) {
                    if(!slideOffset.isNaN()) dialog.window?.setDimAmount(0.5f - ((slideOffset * -1)/2))
                }
            })
        }

        return dialog
    }
}

setBottomSheetCallback is now deprecated, you can use addBottomSheetCallback now

@Mohsents
Copy link

Mohsents commented Feb 17, 2021

Hi there,
you guys can read this article and take advantage of a modern way to do this.

@ArthurNagy
Copy link
Author

ArthurNagy commented Feb 17, 2021

Hi there,
you guys can read this article and take advantage of a modern way to do this.

Hey! I appreciate your modern implementation recommendation, but if you read the article linked at the top of the gist you'll see that the solution you are proposing is referenced in the article as well since the article was written before the introduction of shapeAppearances from MaterialComponents.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment