App Theme does not get applied to BottomSheetDialogFragment

[beatbrot]

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

[Bloody-Badboy]

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

[DSteve595]

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>

[ldjcmu]

I've added a bug to track this issue: https://issuetracker.google.com/issues/120073616

[gaara87]

I can confirm that this fixes the theming issue. @DSteve595 would you like me to submit a pull request on your behalf?

[DSteve595]

A pull request would be great, but I'm not familiar enough with the structure of the styles.xml to be confident in doing it properly.

[ymarian]

Please comment on the bug with any other updates.

[DSteve595]

@ymarian Is this fixed? Or is the tracking being moved to https://issuetracker.google.com/issues/120073616?

[ymarian]

@DSteve595 just the latter but it’s one of our priorities now. Hopefully syncing a fix soon. I can comment again here when that happens

[ymarian]

Fixed here https://github.com/material-components/material-components-android/commit/eefb5d4d778e15f5a0bce6e09f5257c15ede4163 🎉

[DSteve595]

Awesome, thank you so much!

[daniel-stoneuk]

Has ThemeOverlay.MaterialComponents.BottomSheetDialog been removed since this issue?

[yamin8000]

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

How can I use this with view binding?

[subashz]

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

How can I use this with view binding?

    val contextThemeWrapper =
        ContextThemeWrapper(activity, R.style.Theme_MeroBazar) // your app theme here
    val view = inflater.cloneInContext(contextThemeWrapper)
        .inflate(R.layout.bs_edit_product, container, false)

    _binding = EditProductBinding.bind(view)

    return binding.root

[ashwinbhaskar]

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

@subashz @Bloody-Badboy this solution does not work for me. The theme doesn't change in darkmode. My AppTheme extends Theme.AppCompat.DayNight. I am using BottomSheetDialogFragment from com.google.android.material.bottomsheet.BottomSheetDialogFragment.

These are my dependencies for appcompat and material

implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'com.google.android.material:material:1.6.0-alpha02'

Any idea as to where I could be going wrong?