Android Switch Compat with Example
Android Switch Compat with Example
Difficulty level : Very-Easy * Last Updated On : 26th May, 2021
A Switch Compat is a two-state toggle swithc widget that can be used to select one of the two available options.
It consists of two files that makes up a switch compat they are
- Track file
- Thumb file
Below is the picture showing the types of switch compat in light and dark mode
The Source Code for the above output is as follows: -
To display the imageview on the screen xml code is used.
XML CODE : (file name - activity_main.xml)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- Switch Compat Starts -->
<androidx.appcompat.widget.SwitchCompat
android:id="@+id/switchCompat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:thumb="@drawable/thumb"
app:track="@drawable/track" />
<!-- Switch Compat Ends -->
</RelativeLayout>
The colors that are used in the application or on the widget are written in the colors file of the android project.
COLORS FILE CODE : (file name - colors.xml)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="color1">#EE82EE</color>
<color name="color2">#FDBE3B</color>
<color name="color3">#FF4842</color>
<color name="color4">#3a52fc</color>
<color name="color5">#000000</color>
</resources>
Java file is used to write the program and all the actions that are performed on the widget while on the screen is done by the Java file.
MAIN ACTIVITY CODE : (file name - MainActivity.java)
package com.example.differentandroidcodes;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.SwitchCompat;
import android.os.Bundle;
import android.view.View;
import android.widget.CompoundButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
SwitchCompat switchCompat;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
switchCompat = findViewById(R.id.switchCompat);
switchCompat.setOnCheckedChangeListener((buttonView, isChecked) -> {
if (switchCompat.isChecked()) {
Toast.makeText(MainActivity.this, "Switch is on", Toast.LENGTH_SHORT).show();
}
else{
Toast.makeText(MainActivity.this, "Switch is off", Toast.LENGTH_SHORT).show();
}
});
}
}
THUMB FILE CODE : (file name - thumb.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="oval">
<size android:width="90dp" android:height="90dp" />
<solid android:color="@color/white" />
<stroke android:width="20dp" android:color="@color/color3" />
</shape>
</item>
</selector>
Ouput of THUMB FILE
TRACK FILE CODE : (file name - track.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<shape android:shape="rectangle">
<corners android:radius="200dp" />
<solid android:color="@color/color3" />
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<corners android:radius="200dp" />
<solid android:color="@color/color3" />
</shape>
</item>
</selector>
Ouput of THUMB FILE
Manifest file is generated automatically. You can view this file by clicking on the manifest option that is show the project structure image.
MANIFEST FILE CODE: (file name - AndroidManifest.xml)
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.differentandroidcodes">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.DifferentStyleButtons">
<activity android:name="com.example.differentandroidcodes.MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Note : The two files in the drawable folder of i.e. track.xml and thumb.xml are the two types of files that can be used in android switch compat for switching the options from on to off and off to on.
OUTPUT :
Light Theme
Dark Theme
Project Structure in Android Studio
Note : The Selected Files are the important files and the code of those files are given in this article.
0 Comments