CODEWITHSUNDEEP
androidandroid-layoutbottom-sheet
swooby
swooby

Reputation: 3145

SwitchCompat in BottomSheetDialog wrong theme color compared to sibling fragment

green colored SwitchCompat

I am pulling my hair out trying to figure out why the last SwitchCompat in my BottomSheetDialog is green instead of yellow (shown using the Layout Inspector).

The Layout Inspector says that the other two SwitchCompats that are yellow [that are in a fragment added to FrameLayout containerMultiFunctionButtonActions] don't have "style/Theme.Design.Light.BottomSheetDialog()".

yellow colored SwitchCompat

Why would that be messing up my SwitchCompat?

The correctly colored SwitchCompats are not overriding any style/theme, nor are any elements between them and the FrameLayout containerMultiFunctionButtonActions, so to me I think that I have clearly and successfully set up the style/theme.

Here is my layout:

...

<TableRow>

    <LinearLayout
        android:id="@+id/groupMultiFunctionButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginTop="4dp"
        android:layout_span="2"
        android:orientation="vertical"
        android:visibility="visible"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            >

            <TextView
                android:id="@+id/textMultiFunctionButton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/multi_function_button"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@color/app_primary_text"
                />

        </LinearLayout>

        <FrameLayout
            android:id="@+id/containerMultiFunctionButtonActions"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginBottom="8dp"
            android:layout_marginEnd="4dp"
            android:layout_marginStart="4dp"
            android:background="@color/pb_gray_light"
            />

    </LinearLayout>

</TableRow>

<TableRow>

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchLost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_span="2"
        android:text="Why am I green?!?!?!"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:textColor="@color/pb_action_item_text"
        />
        <!--
        NOTE: textAppearance and textColor understandably have no effect on the switch color
        -->

</TableRow>

...

Anything else needed to debug this?
Should I really post my styles/themes?
They are all over the place, but they seem to be working fine everywhere else except inside of this BottomSheetDialog.

Upvotes: 5

Views: 2047

Answers (2)

Safeer
Safeer

Reputation: 1467

I agree with the answer but easiest way to conform the BottomSheetDialogFragment

with your theme is to set

android:theme="@style/AppTheme"

in the root element of your BottomSheetDialogFragment's xml.

Upvotes: 20

Ben P.
Ben P.

Reputation: 54244

As you have found via the Layout Inspector, different themes are being applied to your switches.

The switches in the sibling fragment are just picking up your application's and your activity's theme(s), while the switch in the bottom sheet is additionally picking up the bottom sheet's theme.

The whole idea of themes is that they affect the attributes of all children, so any attribute used by SwitchCompat that is defined in Theme.Design.Light.BottomSheetDialog has the potential to "change" when your switch is inside a bottom sheet (compared to switches not inside a bottom sheet).

If you look at the source for this theme (and follow the chain of parent themes), you will eventually land on this:

<style name="Base.V7.Theme.AppCompat.Light" parent="Platform.AppCompat.Light">
    ...
    <item name="colorAccent">@color/accent_material_light</item>
    ...
</style>

Unfortunately for you, colorAccent is what defines the color of the switch when it's turned on, and the bottom sheet's theme is setting it.

You can solve this by changing the value of colorAccent for your SwitchCompat. You have a lot of choices of how to do this, but the simplest will be to create your own style resource and apply it to your switch using the android:theme attribute. Something like this:

<style name="YellowColorAccent">
    <item name="colorAccent">your yellow color here</item>
</style>

Upvotes: 4

Related Questions