Android Custom Switch with custom Toast example

3 min readNov 12, 2020

In this blog, we’re going to see how to create a custom switch button with custom toast in android. First, let’s see what is SwitchCompat or Switch and Toast in android.

SwitchCompat and Toast

SwitchCompat

In Android, the “Switch Button” is the widget that updating concerning the SDK levels. Starting with the ToggleButton, turn to Switch, and now, from Android Support Library v21, we have a new style that is SwitchCompat. This new switch button not only behaves like a standard android switch that can be dragged by handling but also works fine from Android API 7.

In Android, if you want to use a switch widget, which could be dragged into an “on” or “off” position with animation, you can use the Android SwitchCompat widget.

Some important attributes:

In XML, an androidx.appcompat.widget.SwitchCompat object has some important features, those are:

android:text: String value (“title”) of the SwitchCompat.
android:textOn: String value of “enable” status (for e.g: “ON”).
android:textOff: String value of “disabled” status (for e.g: “OFF”).
android:showText: allows writing text on its drawable thumb button or not (the most interesting its feature).

Toast

Android Toast is used as a small operational popup that displays some information for a small period. In a toast, it contains a message that can be displayed quickly and disappears after a timeout. Toast only fills the amount of space required for the message and the activity will remain visible for the user.

The android.widget.Toast class is the subclass of java.lang.Object class. If you want to know more about Toast just check my previous blog Toast in Android.

Also, we can also, check what motion toast is and how it implements in android.

Custom SwitchCompat with Custom Toast

Let’s have look at the custom Android SwitchCompat with custom Android Toast Example below:

Prerequisites for Toast

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
repositories {
…
maven { url “https://jitpack.io" }
}
}

Dependency for Toast

Add this to your module’s build.gradle file (make sure the version matches the JitPack badge above):

dependencies {
…
implementation ‘com.github.GrenderG:Toasty:1.5.0’
}

Before going to create the layout file first, create the custom thumb and track for the switch widget. As we already know that Switch has two-part: thumb and track, so we first create our thumb and track for the switch.

For that, we need to create two drawable files. Create two drawable files under the drawable folder named as thumb.xml and track.xml.

thumb.xml:

<?xml version=”1.0" encoding=”utf-8"?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android">
<item android:state_checked=”true”>
<shape android:shape=”oval”>
<solid android:color=”@android:color/white”/>
<stroke android:width=”1dp”
android:color=”#34c759"/>
<size android:width=”100dp”
android:height=”100dp”/>
</shape>
</item>
<item android:state_checked=”false”>
<shape android:shape=”oval”>
<solid android:color=”@android:color/white”/>
<stroke android:width=”1dp”
android:color=”#8c8c8c”/>
<size android:width=”100dp”
android:height=”100dp”/>
</shape>
</item>
</selector>

track.xml:

<?xml version=”1.0" encoding=”utf-8"?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android">
<item android:state_checked=”true”>
<shape android:shape=”rectangle”>
<solid android:color=”#34c759"/>
<corners android:radius=”100dp”/>
<stroke android:width=”1dp”
android:color=”#8c8c8c”/>
<size android:height=”20dp”/>
</shape>
</item>
<item android:state_checked=”false”>
<shape android:shape=”rectangle”>
<solid android:color=”@android:color/white”/>
<corners android:radius=”100dp”/>
<stroke android:width=”1dp”
android:color=”#8c8c8c”/>
<size android:height=”20dp”/>
</shape>
</item>
</selector>

Now set the custom thumb and track on the switch widget in the main layout file.

activity_main.xml:

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout 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:orientation=”vertical”
android:gravity=”center”
android:layout_height=”match_parent”
tools:context=”.MainActivity” >
<androidx.appcompat.widget.SwitchCompat
android:id=”@+id/sw”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:thumb=”@drawable/thumb”
app:track=”@drawable/track”
app:showText=”true”
android:textOn=”@string/on”
android:textOff=”@string/off”/>
</LinearLayout>

MainActivity.java:

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.sw);
switchCompat.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (switchCompat.isChecked()){
//custom Toast
Toasty.success(MainActivity.this, “Switch to On!”, Toast.LENGTH_SHORT).show();
}else {
//custom Toast
Toasty.error(MainActivity.this, “Switch to Off!”, Toast.LENGTH_SHORT).show();
}
}
});
}
}