morristech
5/25/2018 - 5:15 AM

Rounded modal bottom sheet as seen in new Google products(Tasks, News, etc.)

Rounded modal bottom sheet as seen in new Google products(Tasks, News, etc.)

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)

}
<!-- 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>
<!-- 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>