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.
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.
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)
*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
(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).
(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
*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)
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…)
Top comments (0)