how to customize switch in android?

Question

I want to customize switch as shown in below image.

I have tried 'SwitchCompat' but can't customize it as image. Below is code.

<style name="CustomSwitchStyle" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <!-- Active thumb color & Active track color(30% transparency) -->
    <item name="colorControlActivated">@color/white</item>
    <!-- Inactive thumb color -->
    <item name="colorSwitchThumbNormal">@color/white</item>
    <!-- Inactive track color(30% transparency) -->
    <item name="android:colorForeground">@android:color/darker_gray</item>
</style>

I have also tried with 'Switch' widget but still it dosen't looks like the required custom switch.

Answer 1

Try to change it Programatically.

Refer this.

public void switchBind(DetailItem item) {
    switchColor(item.toggle);
    listSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                switchColor(b);
        }
    });
}

private void switchColor(boolean checked) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        listSwitch.getThumbDrawable().setColorFilter(checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY);
        listSwitch.getTrackDrawable().setColorFilter(!checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY);
    }
}

EDIT 1:

Another way change color.

private void switchColor(boolean isChecked) {
    if (Build.VERSION.SDK_INT >= 16) {
        int thumbColor;
        int trackColor;

        if(isChecked) {
            thumbColor = Color.argb(255, 253, 153, 0);
            trackColor = thumbColor;
        } else {
            thumbColor = Color.argb(255, 236, 236, 236);
            trackColor = Color.argb(255, 0, 0, 0);
        }

        try {
            getThumbDrawable().setColorFilter(thumbColor, PorterDuff.Mode.MULTIPLY);
            getTrackDrawable().setColorFilter(trackColor, PorterDuff.Mode.MULTIPLY);
        }
        catch (NullPointerException e) {
            e.printStackTrace();
        }
    }
}

Note : Change color as you want.