Search code examples
androidandroid-appcompatandroid-togglebutton

Android ToggleButton clear-ish on older versions?

I am making an app that uses a ToggleButton, and I am making sure it works on older devices. On my GS4 (Running Android 5+), it looks like this:

enter image description here

On my GS3 (Running Below Android 5), however, it looks like this:

enter image description here

Does anyone know how to fix this problem? If it is hard to see, the bottom button is sort of clear, while the top button is a solid color.

NOTE: I am using AppCompat.

EDIT: <ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/dataToggleButton" android:id="@+id/dataToggleButton" android:layout_column="1" android:checked="false" android:textOff="@string/dataToggleButtonOff" android:textOn="@string/dataToggleButtonOn" android:layout_weight="1" android:onClick="dataToggleButtonChange" android:layout_marginTop="30dp" android:clickable="false" android:enabled="false" android:elevation="6dp" />

Solution

  • ToggleButtons (on/off buttons) aren't in the Material design guidelines. They still work in the newer APIs (so far), but their styling is inconsistent across the different API levels.

    Material design encourages Switches to be used instead. With the AppCompat support library, the styling is supported and consistent across SDK levels, including the older levels.

    <android.support.v7.widget.SwitchCompat
    android:checked="false"
    android:text="@string/some_label"
    android:textOff="OFF"
    android:textOn="ON"
    app:showText="true" />