Material-components-android: App Theme does not get applied to BottomSheetDialogFragment

Created on 10 May 2018 · 11Comments · Source: material-components/material-components-android

Problem

The App Theme does not get appplied when using BottomSheetDialogFragment.

Reproduction steps

Like advised, I extended BottomSheetDialogFragment like so:

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

Also, like advised, I use this code to show the Dialog:

    LoginSheet().showNow(fragmentManager, "LoginDialog")

The BottomSheet shows up without the desired theme.

Version number
- 1.0.0-alpha1

Operating system and device

Android 8.1 (AOSP) on OnePlus One

Related issues

Source

beatbrot

👍14

Most helpful comment

Use it like this to apply the AppTheme

 override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    val contextThemeWrapper = ContextThemeWrapper(activity, R.style.AppTheme) // your app theme here
    return inflater.cloneInContext(contextThemeWrapper).inflate(R.layout.login_sheet, container, false)
  }

Bloody-Badboy on 19 May 2018

👍23 🚀2 ❤1

All 11 comments

Use it like this to apply the AppTheme

 override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
  ): View? {
    val contextThemeWrapper = ContextThemeWrapper(activity, R.style.AppTheme) // your app theme here
    return inflater.cloneInContext(contextThemeWrapper).inflate(R.layout.login_sheet, container, false)
  }

Bloody-Badboy on 19 May 2018

👍23 🚀2 ❤1

This is happening because the default bottomSheetDialogTheme attribute points to a style that isn't a ThemeOverlay, but rather a full theme that defines the default colors and such. This should be fixed in the library IMO.

Here's a somewhat clean workaround:

<style name="Theme.YourApp" parent="Theme.MaterialComponents.*something*">
  ...
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.YourApp.BottomSheetDialog</item>
  ...
</style>

<style name="ThemeOverlay.YourApp.BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.Dialog">
  <item name="android:windowBackground">@android:color/transparent</item>
  <item name="android:windowAnimationStyle">@style/Animation.MaterialComponents.BottomSheetDialog</item>
  <item name="bottomSheetStyle">@style/Widget.MaterialComponents.BottomSheet.Modal</item>
</style>