In the last two chapters, The small white briefly introduced the Android built-in control TextView, Button and Checkbox basic usage, details please see:

  1. Small white 7 – Android native development fur series -TextView
  2. Small white 7 – Android native development fur series (2) -Button and Checkbox

In this chapter, Xiao Bai will take a look at the basic use of the Switch, the so-called Switch button. Switch is a small white prefer a control, in some scenes on the performance is very concise, straight in the theme, such as the state of things, switches and so on. So usually when there are fewer options, I usually choose to use multiple switches instead of checkboxes. So, let’s get started on the Switch. A Switch and a Checkbox should be similar in usage. Indeed, the Switch and Checkbox are used in general. However, in some aspects of customization, Switch and Checkbox are quite different. First, it is necessary to look at the Switch structure, as shown in the figure below:

Figure 1 Switch structure

As you can see above, the Switch on Android is divided into two parts: text and Button, while the Button part on the Switch can be divided into two more detailed parts: track and thumb. As shown above, thumb changes with the Switch’s check state, so don’t assume that thumb refers to the dark green round button shown above when check is true. No, it just refers to the round button, but the round button changes color and position depending on the status of check. Make no mistake. Thumb can also display text, as well as text in the textOn property when check is true, depending on the Switch’s check status. When check is false, the text in the textOff property is displayed. I think the basic structure of the Switch should be clear. So let’s familiarize ourselves with the basic use of Switch.

  1. Set the text

For the Switch’s text property, this is no longer the case. If you want to see the specific use of the text property, see chapter 1, Small white 7 code – Android Native Development fur series -TextView. The thumb text of the Switch is set as “yes” and “No” in Figure 1.

  • ShowText property: You can control whether the text of the Switch’s thumb is displayed or not with showText. This property works with Android API 21+.
  • TextOn and textOff properties: The textOn and textOff properties are used to set the text of the Switch control when check is true and false. In versions of Android API 21 (not included) below, you can control the display of Thumb text without using showText by setting these two property Settings. In Android API 21+, the showText control property is required.
  • SwitchTextAppearance property: Used to control the textOn and textOff text styles. Remember that you don’t style your thumb text with style or textAppearance. SwitchTextAppearance accepts only text-class attributes such as font, font color, etc. It does not accept any layout or other attributes that are not part of the text.

Let’s take the example above, but set a blue text as an example.

  • Add the switch text color in the colors.xml file.

    < color name=”switchColor”>#2457DA</ color>

  • Add a style to the styles.xml file for switchTextAppearance.

    <item name=”android:textColor”>@color/switchColor</item> <item name=”android:textSize”>12dp</item> <item name=”android:textStyle”>bold</item>

  • Add text for on and off to the strings.xml file

    < string name=”switchTextOn”> Yes </ string> < string name=” switchTextOff”> No </ string>

  • Set switchTextAppearance and text for the switch

Finally, a point about the Switch’s default thumb text setting is that the Switch’s thumb size doesn’t change depending on how much text there is, instead the thumb size is fixed by default. So choose your text carefully, determine the number of words in the text, preferably in single words. If you set too much text, the control will look like this:

                                  

Figure 3 Thumb has too much text

  1. Personalized customization

The customization of the Switch control is a section that xiao Bai must talk about. However, xiao Bai has little knowledge about the personalized customization of Switch or, to be exact, the personalized customization of Switch track and Thumb. Small white can only introduce some of his understanding to you. As mentioned in the above section, the thumb has a fixed default size, but if you need a thumb that can wrap a lot of text you usually need a custom thumb. Then please remember the following formula:

Size of track**** **= thumb**** size (including text portion) **x 2

The size of the Switch button portion is roughly twice the size of the thumb, so don’t use the layout_width or width property to control the size of the Switch button portion. These two properties might give you a weird Switch button with a part of it cut out.

So let’s use the following example as a template to learn about Switch customization.

                                

Figure 4 Category IOS toggle button

  • In colors. XML define the necessary colors to use for track, thumb button colors under check true and false:

    < color name=”colorButton”>#5080FB</ color> < color name=”colorButtonDark”>#2457DA</ color>

    < color name=”colorGray”>#cccccc</ color> < color name=”colorDarkGray”>#555555</ color>

  • Create a new shape resource file for the switch’s track background, and set the height and rounded corners. Don’t set the width, it will appear strange display.

  • Create a new selector resource file for the switch’s thumb button.

  • Apply track and thumb backgrounds to the Switch

Go through the above steps and you get an ios-like Switch. With the Track property and thumb you can customize most of the personalization requirements you want. At the same time you can adjust the size of the text by setting textOn and textOff together with width in trumb’s vector background. There’s also a nice property called thumbTextPadding. This property also adjusts how much text is held, as shown below:

Figure 5. No thumbTextPadding vs thumbTextPadding

conclusion

The basic use of Switch is introduced here, hope to be particularly helpful. Make sure you understand the components of the Switch control so you have the right answer. Customizing the Switch will take a little more work, but you might be surprised.