Android Custom Switch with custom Toast example

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

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.

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:

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

allprojects {

repositories {

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

}

}

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();

}

}

});

}

}

Output:

For more content like this, visit GBAndroidBlogs and follow me here.

Hi everyone, myself Golap an Android app developer with UI/UX designer.