Android switch on click

September 19, 2017

This post shows how to use android switch button, apply material styles, create custom styles, create custom switch button and how to handle switch button click events.

Android Switch XML Element

Android Switch Properties

Some of the important switch properties are textAppearance, textColor, track, thumb, switchTextAppearance, textOn, testOff, background, and showText.

Property thumb is used to set a drawable that switches back and forth, property track is used for setting a drawable as track for switch thumb, textOn and textOff are used to set text to be displayed when switch is in on or off state, textswitchTextAppearance is used to set style for switch text, and showText is used to indicate whether to show switch text or not.

Android Switch Material Style

Android system provides many material themes. When application level theme is set to one of the material themes, android switch will be displayed applying default switch material theme of the application theme used in the application. Below screen shot shows switch button in both on and off states when application theme is set to Theme.AppCompat.

Android Switch Button Custom Style Application Level

Application level themes can be customized by setting properties to custom values. If you customize properties related to UI controls, the changes will be applied to all UI controls and throughout the application. To change switch text color and switch button color, you need to set textColorPrimaryDisableOnly and colorAccent properties to custom values.

Below theme is an example of custom application theme added to res/values/styles.xml file. You can apply it to an application by setting theme attribute of application element in mainifest xml file.

Below screen shot shows switch button after application theme is set to custom material theme defined above.

Android Switch Custom Style Individual

If you want to change switch style only in a particular section of your application, then define custom switch widget style by inheriting Widget.AppCompat.CompoundButton.Switch as shown below and apply it to switch elements using theme attribute.

Switch attribute colorControlActivated can be used to set track and thumb color when switch is active and colorForeground can be used to set track color when switch is in normal state.

You can use thumbTint and trackTint properties to change color of thumb and track. Applying colors to track and thumb using selector xml allows you to apply different colors for different states, see custom switch section.

Android Switch Event Listener

Switch on and off events or switch drag event can be handled in two ways. One way of handling switch click event is by defining a method in your activity or fragment with View as input parameter and setting it as value for onClick attribute of Switch in layout xml as shown below.

Second way of handling switch on/off event is by defining OnCheckedChangeListener and adding it to switch button by using setOnCheckedChangeListener method.

Custom Switch Button

Android switch with custom track

You can customize android switch track by defining a drawable xml resource as shown below. You need to save it in res/drawable folder, our example file name switch_track_custom.xml, and apply it to switch by using track attribute.

Below xml, used as switch_color in the above drawable, is color selector for track. Color is applied based on the state of switch. This file needs to be saved in res/color folder.

Below xml shows applying the custom track drawable to Switch.

Output of custom track of switch.

Android switch with custom thumb

Android switch thumb can be customized by using material icon and defining drawable xml resource.

To do that, first download one of the android material icons which you want to use in your application or use any other image you may have and save it in res/drawable folder.

Then define drawable xml resource as shown below in res/drawable folder, our example file name is switch_thumb_custom.xml. This xml uses the above downloaded icon, defines shape and sets colors. To apply this to a switch, set its thumb attribute to the drawable xml.

In the above xml switchTrackNormal and switchThumbBgActive are colors defined in res/values/colors.xml

Below color selector xml saved as switch_color.xml is used in the custom thumb drawable xml defined above.

Below switch element in layout xml uses above custom switch thumb and switch track.

With switch button track customization explained from above section and switch button thumb customization explained in this section, the custom switch button will appear as shown below in normal and active states.

About

Android app development tutorials and web app development tutorials with programming examples and code samples.

Источник

Kotlin Android Switch Button Examples

In this tutorial you will learn how to use the switch button provided by the android sdk in your project. You will learn based on simple, easy to understand and beginner friendly examples.

A switch button entails two states: the on and off. In that sense it’s also a compound button like the radiobutton and checkbox. Let’s look at some examples.

Example: Kotlin Android Switch Button Example

This is a simple switch button which you can use to change the theme of android app. For example swicth on or off the dark theme.

Check the demo below:

Step 1: Dependencies

No special dependencies, apart from the kotlin standard library and androidx appcompat, are required for this project.

Step 2: Add to Layout

Next you need to add the switch button to your main activity’s xml layout as follows:

activity_main.xml

Step 3: Write Kotlin Code

Next write your kotlin code. Here’s the main activity:

MainActivity.kt

Next run the project in your android studio.

Reference

Download the code below:

No	Link
1.	Download Code
2.	Browse Code
3.	Follow Code author

Example 2: Kotlin Android Material Switch Button

This example explores how to create a material swicth button and use in your app. A third party library is used.

Here is the demo of the project:

Step 1: Dependencies

We will use one third party library know as StickySwitch. Add the following implementation statement in your gradle file:

Step 2: Design Layout

Add the sticky switch to your xml layout;

activity_main.xml

Step 3: Write Code

Next write your kotlin code. Replace your main activity with the following code:

Run the project.

Reference

Download the code below.

No.	Link
1.	Downlaod code
2.	Follow code author

Best Switch Button Libraries

You may not be impressed or satisfied with the native switch button and may wish to use third party libraries. In this piece we look at some of the best android swicth button libraries.

We will not only list these examples but also in a step by step manner show you how to use them via code examples.

NB/= The order of this listing has nothing to do with the value of the solutions, we are just listing them as we discover them.

(a). SwicthButton

This is a beautiful, lightweight and easy to use switch widget for Android.

It supports a minSdkVersion >= 11. Here are it’s best features:

It does not rely on other third party libraries.
It does carry with it drawables and images. It only comprises of a single hava file and a style.
It supports drag switch.

The above fetaures make this library light on your project and so feel free to use it without causing inflation of apk size.

Here is the demo of this library in action:

Step 1: Install it

The first step is to install it. You install it from mavenCentral by adding the following implementation statement:

Step 2: Add it to XML Layout

Next you need to add it to your xml layout:

Step 3: Write Code

Reference it from the layout and use it as needed. For example to set checked:

Here is how you check if the switchbutton is checked:

Here is how you toggle the switch button state:

You can set shadow effect as follows:

To enable/diable the swicth button:

To listen to checkedChangelistener:

Full Example

Here is a full example. Start by installing the library as has been discussed above.

Next create a layout as follows;

activity_main.xml

Then write your code as follows;

MainActivity.java

Run the project. Here is what you will get:

Reference

Here are the links

No.	Link
1.	Download code
2.	Browse code
3.	Read more
4.	Follow code author

(b). switchbutton

An iOS style swicth button for android.

This library has the following features:

Only one class file is involved, which is very easy to integrate into your project.

It Supports the «delay and rollback» operation of the switch.

Here is the demo:

Step 1: Install it

Install this library using the following implementation statement:

Step 2: Add to Layout

Then add this tag in your xml layout:

Step 3: Write Code

Here is how you listen to click events for the switch button:

You can listen to state change like this:

Example

Reference

Find reference links below:

No.	Link
1.	Browse example
2.	Read more
3.	Follow code author

Multi-Switch Button

You may need a switch button with more than two states. Such a multi-switch button is called a segmented button. This section will explore segmented button examples.

KingJA/SwitchButton

A smart switchable button,supporting multiple tabs. (Multiple selector, switch button).

Here is the demo:

Step 1: Dependencies

Add the following implementatinon in your build.gradle:

Step 2: Add to Layout

Add the segmented button to your xml layout:

Step 3: Write Code

Here is an example usage:

Full Example

Start by installing the library as has been discussed.

Then create a layout and add multiple segmented butons like below:

activity_main.xml

MainActivity.java

Add the following code to your main activity:

Reference

Here are the links

No.	Link
1.	Download example
2.	Browse code
3.	Follow code author

report this ad

Oclemy

Thanks for stopping by. My name is Oclemy(Clement Ochieng) and we have selected you as a recipient of a GIFT you may like ! Together with Skillshare we are offering you PROJECTS and 1000s of PREMIUM COURSES at Skillshare for FREE for 1 MONTH. To be eligible all you need is by sign up right now using my profile .

Источник

Tutorialwing

Hello Readers! In this post, we are going to learn about how to use android switch widget in any android application. We are also going to see different attributes of android switch that can be used to customise it.

Output

Tutorialwing Android Switch Widget Output

Getting Started

Android Switch widget can be defined as below –

A Switch is a two-state toggle switch widget that can select between two options. The user may drag the “thumb” back and forth to choose the selected option, or simply tap to toggle as if it were a checkbox.

Some of the popular attributes of android switch widget are –

Sr.	XML Attributes	Description
1	android:showText	Sets whether we want to show text(ON/OFF) or not
2	android:textOff	Text to be shown when Switch is in OFF state.
3	android:textOn	Text to be shown when Switch is in ON state.
4	android:textStyle	Sets style of the text. For example, bold, italic etc.
5	android:thumb	Sets drawable to be used as thumb that are moved back and forth
6	android:thumbTextPadding	Sets amount of padding on either side of text within the switch thumb.
7	android:thumbTint	Tint to apply to the thumb
8	android:thumbTintMode	Blending mode used to apply the thumb tint
9	android:track	Drawable of the track in which thumb slides back and forth
10	android:typeface	Specifies typeface for the text. For example, normal, sans, serif, monospace etc.

Some of the popular attributes of android switch widget inherited from Compound Button are –

Sr.	XML Attributes	Description
1	android:button	Sets drawable to button graphic
2	android:buttonTint	Tint to apply to button tint
3	android:buttonTintMode	Blending mode used to apply to button graphic tint

Some of the popular attributes of android Switch Widget inherited from TextView are –

Sr.	XML Attributes	Description
1	android:autoLink	Specifies whether text such as email, url should be automatically detected and converted into links or not.
2	android:cursorVisible	Specifies whether cursor should be visible or not.
3	android:drawableBottom	Sets drawable to be shown below text
4	android:ems	Makes the TextView be exactly this ems wide

Some of the popular attributes of android Switch widget inherited from View are –

Sr.	XML Attributes	Description
1	android:background	Sets background of the view.
2	android:clickable	Sets whether this view is clickable or not
3	android:focusable	It controls whether a view can take focus or not
4	android:id	Sets id of the view

At first, we will create android application. Then, we will use android switch widget in this application.

1. Creating New Project

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

Step	Description
1.	Open Android Studio.
2.	Go to File => New => New Project. Write application name as Switch. Then, 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.	If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Now, we will modify xml and java file to use switch widget in the application.

2. Modify Values folder

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

Since other values folders have not been changed. So, we are not going to mention it here.

Open res/layout/activity_main.xml file. Then, add below code into it.

In activity_main.xml file, we have used Switch widget in xml file. Now, we will access this widget in java file.

Open src/main/java/com.tutorialwing.aswitch/MainActivity.java file. Then, add below code into it.

In MainActivity.java, we have accessed switch widget. We have also set checked listener to show toast message that display the checked status of switch widget.

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

AndroidManifest.xml

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

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

That’s end of tutorial on Android Switch widget.

Источник

Android switch on click