androidxmlandroid-studioandroid-xmlandroid-switch

SwitchCompat doesn't display well in dark mode

I have a custom SwitchCompat that renders fine in the app's daytime theme, but when the dark theme is enabled, SwitchCompat looks too light. Here is a photo:Dark theme

SwitchCompat:

    <androidx.appcompat.widget.SwitchCompat
    android:id="@+id/alarm_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    android:background="@null"
    android:thumb="@drawable/sw_thumb"
    app:track="@drawable/sw_track"/>

sw_thumb.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true">
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
        <size android:width="25dp" android:height="25dp"/>
        <stroke android:width="2dp" android:color="@color/main_color"/>
    </shape>
</item>

<item android:state_checked="false">
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
        <size android:width="25dp" android:height="25dp"/>
        <stroke android:width="2dp" android:color="@color/gray"/>
    </shape>
</item>

</selector>

sw_track.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_checked="true">
    <shape android:shape="rectangle">
        <solid android:color="@color/main_color"/>
        <corners android:radius="200dp"/>
    </shape>
</item>

<item android:state_checked="false">
    <shape android:shape="rectangle">
        <solid android:color="@color/gray"/>
        <corners android:radius="200dp"/>
    </shape>
</item>

</selector>
Solution

  • If you want to customize the color, then create one more color file with same name as before values->colours->right click ,New->Values Resource File-> Available qualifiers ->scroll down to Night Mode ->give File name as same

    Then change the color code in night mode of how you want it to be in night mode .