Revealing the magic of Creating iOS Alike Segmented Control with Image in Android (Kotlin) — Part 1

Scenario: There are three LED statuses for a user to choose from, i.e off, blinking and on. Led status is updated based on user’s selection. A selected status will be shown with blue background with a white-coloured icon.

There are three led states(off, blinking, on) for a user to choose from. Led state is set as “Off” by default.

In iOS, we can achieve this by using Segmented Control. What about Android?

First thought in mind is Button view.

Button or ImageButton?

Based on Android Developers official API guide for Input controls, ImageButton would be the best option for this scenario.

The image on the surface of the button is defined either by the android:src attribute in the <ImageButton> XML element or by the setImageResource(int) method.

As describe in the API guide, we can also custom the image button background by defining a different image for each state.

Implementation

*In this example, @color/colorPrimary is set to #0077c8, which is described as “blue” in this passage

Step 1: XML layout

Three image buttons are placed in a horizontal oriented LinearLayout.

Layout for the led button states.

Surface Image

The surface image for the button is defined with a selector file which contains led images with two different states: selected and not selected.

For eg, in drawable/selector_led_status_off (surface image for “Off” button)

When the off button is selected, drawable/ic_led_off_selected (white-coloured off icon) will be displayed, else drawable/ic_led_off_normal (blue-coloured off icon) will be displayed

*P/S: Blinking and on button implement the same rules for selector as above with different sets of icon assets

Background Attribute

android:background attribute in the <ImageButton> XML element is used to defined the background colour based on the user’s selected state. The selected image button for this example is blue in colour.

(i) Background Attribute with a Solid Colour

For normal implementation, the selector for background colour can be set by simply implementing

drawable/selector_background_colour.xml

Results by using drawable/selector_background_colour.xml in android:background attribute

(ii)Background Attribute with a Rectangular Coloured Border

However, the image button is wrapped with a blue coloured border in this example. Thus this implementation needs a layer-list with 2 shape items. The first layer draws the border, where as the second layer is the background colour of the button. In another words, two rectangles were drawn. One rectangle (background colour) is drawn on top of the other rectangle (border).

drawable/selector_middle_button_state.xml: Blue-coloured bordered background

Results by using rectangular coloured border selector for android:background attribute

(iii) Background Attribute with Blue Coloured Rounded Corner

Used <corners…> to define corner radius the <shape>. We can make use of android:topLeftRadius, android:topRightRadius, android: bottomLeftRadius and android:bottomRightRadius attributes for this purpose.

Below is the example of implementing left rounded button with blue bordered as background

drawable/selector_rounded_corner_left_button_state.xml

*P/S:Right rounded corner selector file implements the same rules as above with different corner

Step 2: Initialise and update led status programatically , based on user’s selection (LedStatusFragment.kt)

Define LedStatus as enum with relevant string resources

Line 49–59 initialise the view for each LED states. Off button is set as selected by default

Line 63–70 updates the led image button and the text which indicates which button state is selected by the user

End result as shown in the first image of the post

Others

Can we achieve the same effect by using RadioButton? (To be continue…)

---