public class Switch

The on/off switch is a checkbox of sort (although it derives container) that represents its state as a switch When using the Android native theme, this implementation follows the Material Design Switch guidelines: https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button

Customizing Look and Feel

You can customize the look and feel of a switch using styles, either directly in the theme.res file or in CSS. This component consists of two elements: the “thumb” the “track”. The “thumb” is the circular handle that can be toggled/dragged between an on and off position. The “track” is the background track along which the “thumb” appears to slide when it is dragged/toggled.

The thumb will be rendered using Switch’s Style#getFgColor(). It will use the selected style, when in the “on” position, the unselected style when in the “off” position, and the disabled style, when #isEnabled() is false.

The track will be rendered using the Switch’s Style#getBgColor(). It will use the selected style, when in the “on” position, and the unselected style when in the “off” position.

You can also adjust the thumb and track sizes using the following theme constants:

switchThumbScaleYA floating point value used to scale the thumb’s diameter, relative to the font size. In the android native theme, this value is set to 1.5. On iOS, it is set to 1.4. switchTrackScaleYA floating point value used to scale the track’s height, relative the the font size. In the android native theme, this value is set to 0.9. On iOS, it is set to 1.5 switchTrackScaleXA floating point value used to scale the track’s width relative to the font size. In the Android native theme, this value is set to 3.0. On iOS it is 2.5 switchTrackOffOutlineWidthMMA floating point value used to set the stroke/outline thickness of the track when the switch is in the “off” position. In the Android native theme, this is set to 0. On iOS it is 0.25 switchTrackOnOutlineWidthMMA floating point value used to set the stroke/outline thickness of the track when the switch is in the “on” position. In both the Android native theme and the iOS native theme, this is set to 0. switchTrackOffOutlineColorThe color used to stroke the outline for the track when the switch is in the “off” position, expressed as a base-16 int. In the iOS native theme, this is set to “cccccc”. switchTrackOnOutlineColorThe color used to stroke the outline for the track when the switch is in the “on” position, expressed as a base-16 int. This is currently not used in either Android or iOS. switchThumbInsetMMAn inset to use when rendering the thumb that will cause it to be inset from the edge of the track. In the iOS native theme, this is 0.25

IMPORTANT: when changing the UIID of the switch the constants above implicitly change to match the new UIID with the same convetion. So if your UIID is MySwitch then a theme constant will become: myswitchTrackScaleY. Notice that the whole UIID is lower cased…

CSS used in the Android native theme:

`#Constants {
...
switchThumbPaddingInt: 2;
switchThumbScaleY: "1.5";
switchTrackScaleY: "0.9";
switchTrackScaleX: "3";
switchTrackOffOutlineWidthMM: "0";
switchTrackOnOutlineWidthMM: "0";
switchTrackOffOutlineColor: "cccccc";
switchThumbInsetMM: "0";`
Switch {
color: rgb(237, 237, 237);
background-color: rgb(159, 158, 158);

}
Switch.selected {
color: rgb(34,44,50);
background-color: rgb(117, 126, 132);
}
}

CSS used in the iOS native theme:

`#Constants {
...
switchThumbPaddingInt: 2;
switchThumbScaleY: "1.4";
switchTrackScaleY: "1.5";
switchTrackScaleX: "2.5";
switchTrackOffOutlineWidthMM: "0.25";
switchTrackOnOutlineWidthMM: "0";
switchTrackOffOutlineColor: "cccccc";
switchThumbInsetMM: "0.25";`
Switch {
color: white;
background-color: white;

}
Switch.selected {
color: white;
background-color: rgb(61, 216, 76);

}
}

Using Custom Thumb and Track Images

You can optionally provide custom images for use as the track or thumb via the following theme constants

• switchThumbOnImage

• switchThumbOffImage

• switchThumbDisabledImage

• switchOnTrackImage

• switchOffTrackImage

• switchDisabledTrackImage