0

I'm using style attributes throughout my app to support multiple themes. But now I'm facing an issue while creating a bottom sheet.

I'm not able to use my app theme's attributes (Such as ?attr/colorPrimary and ?attr/primaryTextColor) within my BottomSheetTheme.

<style name="BaseBottomSheetDialog" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="bottomSheetStyle">@style/BottomSheet</item>
    <item name="colorPrimary">?attr/colorPrimary</item>
</style>

This doesn't seem to work and if I understand correctly, it's because they are two different themes.

Here is a gist of my styles

    <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/baseColorPrimary</item>
        <item name="colorPrimaryDark">@color/baseColorPrimaryDark</item>
        <item name="colorPrimaryLight">@color/baseColorPrimaryLight</item>
        <item name="colorAccent">@color/baseColorAccent</item>
        <item name="primaryTextColor">@color/basePrimaryTextColor</item>
        <item name="secondaryTextColor">@color/colorWhite</item>
        <item name="android:statusBarColor">?attr/colorPrimary</item>
        <item name="android:navigationBarColor">?attr/colorPrimary</item>
        <item name="bottomSheetDialogTheme">@style/BaseBottomSheetDialog</item>
    </style>

    <style name="InTheBeginning" parent="BaseTheme">
        <item name="colorPrimary">@color/theme1ColorPrimary</item>
        <item name="colorPrimaryLight">@color/theme1ColorPrimaryLight</item>
        <item name="colorAccent">@color/theme1ColorAccent</item>
        <item name="colorAccentSecondary">@color/theme1ColorAccentSecondary</item>
    </style>

    <style name="TheHeavens" parent="BaseTheme">
        <item name="colorPrimary">@color/theme2ColorPrimary</item>
        <item name="colorPrimaryLight">@color/theme2ColorPrimaryLight</item>
        <item name="colorAccent">@color/theme2ColorAccent</item>
        <item name="colorAccentSecondary">@color/theme2ColorAccentSecondary</item>
    </style>

    <style name="TheEarth" parent="BaseTheme">
        <item name="colorPrimary">@color/theme3ColorPrimary</item>
        <item name="colorPrimaryLight">@color/theme3ColorPrimaryLight</item>
        <item name="colorAccent">@color/theme3ColorAccent</item>
        <item name="colorAccentSecondary">@color/theme3ColorAccentSecondary</item>
    </style>

The only solution I can think of is creating a separate BottomSheet theme for each of my app themes. But that seems too redundant. Is there another approach to solve this issue? I want to basically dynamically change the colors of my app and thus the Bottomsheet based on the app theme selected.

I'm not very experienced in styling but I understand that there's a difference between styles and themes.

rdias002
  • 214
  • 2
  • 9
  • Try this answer https://stackoverflow.com/a/58107195/3615605 – MathankumarK Feb 15 '22 at 10:43
  • Hi @MathankumarK, the only difference I'm seeing is that they're using `ThemeOverlay.MaterialComponents.BottomSheetDialog` while I'm using `Theme.Design.Light.BottomSheetDialog`. And making that change would require significant changes throughout my app. Hence I can't really confirm if that solves my problem. – rdias002 Feb 15 '22 at 11:07

0 Answers0