Android Toggle Button Using Kotlin With Example




Target

Hello Readers! In this tutorial, we are going to learn about android toggle button using kotlin with example. We will also see different attributes used to customise the toggle button widget.

Output

Tutorialwing Toggle Button Output Android Toggle Button Widget Tutorial

Tutorialwing Toggle Button Output

Getting Started

Android Toggle Button can be described as below –

Android toggle button is a widget that are used to display two states(checked/unchecked or ON/OFF) as a button with light indicator and default text ON or OFF.

Different attributes of Android Toggle Button

Different attributes of toggle button are –

Sr. XML Attributes Description
1 android:disabledAlpha Value of alpha to set when indicator is disabled.
2 android:textOff Text to show when toggle button is OFF.
3 android:textOn Text to show when toggle button is ON.

Attributes in Toggle Button are also inherited from TextView and Compound Button. Some of the popular attributes inherited from TextView are –

Sr. XML Attributes Description
1 android:background Sets background to toggle button.
2 android:backgroundTint Used to set tint to background.
3 android:clickable Sets true when you want to make toggle button clickable. Otherwise, set false.
4 android:drawableBottom Drawable to draw at bottom of the text.
5 android:drawableEnd Drawable to draw at end of the text.
6 android:drawableLeft Drawable to draw at left of the text.
7 android:drawablePadding Padding of the drawable.
8 android:drawableRight Drawable to draw at right of the text.
9 android:drawableStart Drawable to draw at start of the text.
10 android:drawableTop Drawable to draw at top of the text.
11 android:text Sets text of the Toggle Button.
12 android:textAllCaps Shows text in capital letters.
13 android:textColor Sets color of the text.
14 android:textSize Sets text size. For example, 12sp, 13sp etc.
15 android:textStyle Sets text style. For example, bold, italic, bolditalic etc.
16 android:typeface Sets typeface of the text. For example, normal, sans, monospace etc.

Attributes of Toggle Button inherited from Compound Button are –

Sr. XML Attributes Description
1 android:button Drawable for button graphic (for example, checkbox and radio button).
2 android:buttonTint Tint to button graphic.

Note: – Visit android official documentation for more details about attributes of Toggle Button in android.




Example of Android Toggle Button Using Kotlin

At first, we will create an android application. Then, we will use toggle button in this application.

Follow the steps below to create new project. Please ignore the steps if you have already created a new project.

1. Creating New Project in Kotlin

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as ToggleButtonUsingKotlin. Then, check Include Kotlin Support and click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. You will get a newly created project successfully if you have followed steps properly.

Now, we will modify xml and kotlin file to use toggle button in kotlin.

2. Modify values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">ToggleButtonUsingKotlin</string>
	<string name="togglebutton">ToggleButton</string>
</resources>

Other values folder have not been changed. So, we are not going to mention it here.

3. Use Toggle button in xml file

Open res/layout/activity_main.xml file. Then, add code for toggle button in it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center">

	<ToggleButton
		android:id="@+id/toggleButton"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/togglebutton"/>

</LinearLayout>

Here, we have defined toggle button in xml file. Now, we will access this toggle button using kotlin file. Then, we will show toast message when state of toggle button is changed.

4. Access Toggle Button in Kotlin file

Open src/main/java/com.tutorialwing.togglebuttonusingkotlin/MainActivity.kt file and add below code into it.

package com.tutorialwing.togglebuttonusingkotlin

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.Toast
import android.widget.ToggleButton
import com.tutorialwing.togglebutton.R

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toggleButton = findViewById<ToggleButton>(R.id.toggleButton)
        toggleButton?.setOnCheckedChangeListener { buttonView, isChecked ->
            val msg = "Toggle Button is " + if (isChecked) "ON" else "OFF"
            Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
        }
    }
}

Since AndroidManifest file is very important for android application, we are also going to mention it here.

AndroidManifest.xml file

Code inside main/AndroidManifest.xml file is as below.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.togglebutton"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<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/AppTheme">
		<activity android:name="com.tutorialwing.togglebuttonusingkotlin.MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the application, we will get output as shown above.

That’s end of tutorial on Android Toggle Button using Kotlin.