Revealing the magic of Creating iOS Alike Segmented Control with Image in Android (Kotlin) — Part 1
Tags: segmentedcontrolan, kotlin, androidappdevelopm, imagebutton
Published: 2018-03-08 17:11:13

---
title: Revealing the magic of Creating iOS Alike Segmented Control with Image in Android (Kotlin) — Part 1
published: true
tags: segmented-control-an,kotlin,android-app-developm,image-button
canonical_url: 
---

 **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.

![](https://cdn-images-1.medium.com/max/640/1*P4_O-_pqw_hUpRQiLswghQ.gif)<figcaption>There are three led states(off, blinking, on) for a user to choose from. Led state is set as “Off” by default.</figcaption>

In iOS, we can achieve this by using [Segmented Control](https://developer.apple.com/ios/human-interface-guidelines/controls/segmented-controls/). What about Android?

First thought in mind is **Button**  view.

### [Button](https://developer.android.com/reference/android/widget/Button.html) or [ImageButton](https://developer.android.com/reference/android/widget/ImageButton.html)?

Based on [Android Developers official API guide for Input controls](https://developer.android.com/guide/topics/ui/controls/button.html), 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)](https://developer.android.com/reference/android/widget/ImageView.html#setImageResource(int)) method.

As describe in the API guide, we can also [custom](https://developer.android.com/guide/topics/ui/controls/button.html#CustomBackground) 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.

![](https://cdn-images-1.medium.com/max/1024/1*mjemFXPV20gnKkqLHmX0jg.png)<figcaption>Layout for the led button states.</figcaption>

**_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)

![](https://cdn-images-1.medium.com/max/1024/1*ov1RTJaXuqqfz89zCK1p3Q.png)<figcaption>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</figcaption>

\*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

![](https://cdn-images-1.medium.com/max/1024/1*16DclZIhvtAa0a-Ma86Liw.png)<figcaption>drawable/selector_background_colour.xml</figcaption>

![](https://cdn-images-1.medium.com/max/640/1*uj5rGOCDn0JmErw0X-SuRg.gif)<figcaption>Results by using drawable/selector_background_colour.xml in android:background attribute</figcaption>

**_(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).

![](https://cdn-images-1.medium.com/max/1024/1*ethXORoYar7F0MbCHZqpTw.png)<figcaption>drawable/selector_middle_button_state.xml: Blue-coloured bordered background</figcaption>

![](https://cdn-images-1.medium.com/max/640/1*eA4qnDa1lVxCXyAYTh9kgw.gif)<figcaption>Results by using rectangular coloured border selector for android:background attribute</figcaption>

**_(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

![](https://cdn-images-1.medium.com/max/1024/1*dGxa8bdsPiUJxOp6zs0kGQ.png)<figcaption>drawable/selector_rounded_corner_left_button_state.xml</figcaption>

\*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)_

![](https://cdn-images-1.medium.com/max/1024/1*AycstI4HILSTPyl3Exsjog.png)<figcaption>Define LedStatus as enum with relevant string resources</figcaption>

![](https://cdn-images-1.medium.com/max/1024/1*WsqzBn0y61XJLStPxqB-VA.png)

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…)

* * *