You are here: Hello » Tutorials » Radio Button in AppInventor

Radio Button in AppInventor

screenshot.02-04-2012_2010.55.59.jpgThere is no RadioButton in AppInventor's components list, so you have to build it yourself. I've saw youtube tutorial how to build RadioButtons based on CheckBoxes. I didn't realy liked that work-a-round, though it works. But that tutorial trow me idea how to build more RadioButton looking ones, out from Images and regular Buttons

Graphical user interface design

To build RadioButton in AppInventor, follow this tutorial: You will need TableArrangement, Images and Buttons. Also you will need images, that represents RadioButtons status. Build your own thet fits your theme or download from me: I named my images as rbu.png (unchecked) & rbc.png (checked). Upload this media to your server.

ComponentPropertyValue
Image#Imagerbu.png or any other image that represents unchecked image
Image#Height30 pixels
Button#BackgroundColorNone
Button#TextAlignmentleft
TableArrangementRows3 One row will represent one RadioButton
The table represent properties other than default

screenshot.02-04-2012_2011.28.31.jpg screenshot.02-04-2012_2011.14.09.jpg You may edit other properties to customize look of application, but these changes are mandatory. I preset all my RadioButtons as unchecked by default. Here is it how it looks in AppInventor development screen. Button4 and Notifier1 is used to test how everything works. Its not mandatory in for RadioButton tutorial.

Programming part (aka AppBlocks)

screenshot.02-04-2012_2011.45.39.jpg I will use two global variables, one for group name. I've called it radioGroupt1. Other variable radioGroup1Variable will be used to store that groups value. Initial radioGroup1 value i set to text “0”. radioGroup1Value is set to text <empty>

screenshot.02-04-2012_2013.37.05.jpg On application initialization we need to have global variable radioGroup1 as a list of all RadioButtons that belongs to this group. In this tutorial I've build just one group, but with a little modification to radioGroup1Switch function (additional argument and and use it in foreach list). Also you need to pass a variables of a list, whom belongs that button and image.If RadioButton groups has more than 3 elements- add more images components to list.

screenshot.02-04-2012_2013.38.23.jpg Now lets analyze “heart” of the program- RadioButton switching function radioGroup1Switch. As I'me mentionet earlier you may edit it a little and you can reuse it for multiple RadioButtons groups. In this tutorial I only used it for one group, so tried to keep it as simple as possible. !!!!I will analyze it block-by-block. On any call, funtions sets all RadioButtons to unckecked (rbu.png) state. This is done in foreach loop with global variable radioGroup1 witch represents our list of images of specific group. After a loop I set specific image to checked (rbc.png) state. The las one block changes radioGroup1Value to specific buttons value. That's it, as simple as that!!

screenshot.02-04-2012_2013.38.45.jpg Now wee need to call our function by button click with two parameter- component and value for radioGroup1value. If you modified radioGroup1Switch to work with multiple RadioButton groups- then you should pass group on button click together with the rest arguments. Button click method is quite straight forward, so i do not analyze it deeply, I leave it to yourself.

Testing

screenshot.02-04-2012_2013.39.08.jpg For testing purposes I've added additional button Button4. It's click method checks if value in radioGroup1Value is not empty and show it or displays message about error. For these messages I've used Components-Other components function ShowAlert

Full AppBlocks view for Tutorial#1: RadioButton

Discussion

Enter your comment:
S E G M Z
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported

Hey.lt - Nemokamas lankytojų skaitliukas XHTML