Core Attributes

ToggleButton

The ToggleButton widget provides a straightforward two-state interface. Key configurable properties include:

• android:disabledAlpha: Controls the opacity level when the widget is in a disabled state.
• android:textOn: Defines the label displayed when the control is activated.
• android:textOff: Defines the label displayed when the control is deactivated.
• Background Customization: Instead of relying on default text, developers can apply a custom StateListDrawable to the android:background attribute to render fully custom grpahics for each state.

Switch

The Switch component offers a sliding toggle mechanism, often preferred for modern settings interfaces. Its primary attributes include:

• android:showText: Boolean flag to toggle the visibility of on/off labels.
• android:splitTrack: Adds visual spacing between the thumb and the track background.
• android:switchMinWidth: Enforces a minimum horizontal dimension for the control.
• android:switchPadding: Adjusts the horizontal spacing around the internal text.
• android:track: Specifies the drawable resource used for the sliding track background.
• android:thumb: Specifies the drawable resource used for the sliding knob.
• android:textOn / android:textOff: Labels for the active and inactive states.
• android:textStyle / android:typeface: Controls typography. Note that custom TrueType fonts (.ttf) must be loaded programmatically via Typeface.createFromAsset() since XML support is limited.

Implementation Example

The following section demonstrates how to configure both controls within a layout and handle state changes programmatically. We will customize the Switch to resemble a modern slider by applying separate drawables for the thumb and track.

Drawable Resources

First, define state-aware drawables for the sliding elements. Create a selector for the thumb:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/knob_pressed" />
    <item android:state_pressed="false" android:drawable="@drawable/knob_default" />
</selector>

Next, create a selector for the track background that changes color based on the checked state:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/bg_active" />
    <item android:state_checked="false" android:drawable="@drawable/bg_inactive" />
</selector>

Layout Configuratino

Integrate the controls into your activity layout. Note that the Switch references the custom drawables defined above:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <ToggleButton
        android:id="@+id/audio_toggle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:textOff="Mute Audio"
        android:textOn="Unmute Audio" />

    <Switch
        android:id="@+id/system_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOff=""
        android:textOn=""
        android:thumb="@drawable/knob_selector"
        android:track="@drawable/track_selector" />

</LinearLayout>

Activity Logic

Handle user interactions by implementing the CompoundButton.OnCheckedChangeListener interface. The following implementation demonstrates state tracking for both widgets:

public class SettingsActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener {

    private ToggleButton audioToggle;
    private Switch systemSwitch;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_settings);

        audioToggle = findViewById(R.id.audio_toggle);
        systemSwitch = findViewById(R.id.system_switch);

        audioToggle.setOnCheckedChangeListener(this);
        systemSwitch.setOnCheckedChangeListener(this);
    }

    @Override
    public void onCheckedChanged(CompoundButton view, boolean isChecked) {
        if (view.getId() == R.id.audio_toggle) {
            String message = isChecked ? "Audio enabled" : "Audio disabled";
            Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
        } else if (view.getId() == R.id.system_switch) {
            String message = isChecked ? "System active" : "System inactive";
            Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
        }
    }
}

Programmatic Sizing Adjustments

While XML allows you to assign custom drawables, it does not provide direct attributes to scale the thumb or track dimensions independently. The control will default to the intrinsic size of the provided graphics. To override this, retrieve the Drawable objects programmatically and apply a boundary modification before attaching them:

Drawable customTrack = ContextCompat.getDrawable(this, R.drawable.track_selector);
if (customTrack != null) {
    customTrack.setBounds(0, 0, 200, 80); // Adjust width and height as needed
    systemSwitch.setTrackDrawable(customTrack);
}