===== Radio Button in AppInventor ======
{{https://lh4.googleusercontent.com/--I9-qmDbmow/T3lbjKz-XBI/AAAAAAAADvA/1MzaBScjdWI/s128/screenshot.02-04-2012%2010.55.59.jpg?75 }}There is no RadioButton in AppInventor's components list, so you have to build it yourself. I've saw [[http://www.youtube.com/watch?v=Hc_j3zAezv4|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 {{popup>ai:component:basic:image|Images}} and regular {{popup>ai:component:basic:button|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:{{https://lh4.googleusercontent.com/-mjQWVkk8wDQ/T3lYZGo6kuI/AAAAAAAADu0/25od4q86Tl0/s128/rbc.png}} {{https://lh6.googleusercontent.com/-52BeILV1e3M/T3lYZGss1bI/AAAAAAAADuw/JwLMAZ0FCX4/s128/rbu.png}} 
I named my images as ''rbu.png'' //(unchecked)// & ''rbc.png'' //(checked)//. Upload this media to your server.

^Component^Property^Value^
|Image#|Image|''rbu.png'' //or any other image that represents unchecked image//|
|Image#|Height|30 pixels|
|Button#|BackgroundColor|None|
|Button#|TextAlignment|left|
|TableArrangement|Rows|''3'' //One row will represent one RadioButton//|
| The table represent properties other than default |||

[[https://picasaweb.google.com/lh/photo/dswIde-mDMZ5Jh7nL-P0ROOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-NFDgSxBAI8Q/T3ljKcvckzI/AAAAAAAADvw/x4FA0h2kk38/s128/screenshot.02-04-2012%2011.28.31.jpg }}]]
[[https://picasaweb.google.com/lh/photo/SZacla_K8qMUebUcCY-nl-OTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh6.googleusercontent.com/-bdzsFsWWzqw/T3lf0RsHJtI/AAAAAAAADvg/NKRtZMcTanM/s128/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) ====
[[https://picasaweb.google.com/lh/photo/dswIde-mDMZ5Jh7nL-P0ROOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh6.googleusercontent.com/-7uiXuqXgC5Y/T3lnMRmnGHI/AAAAAAAADwA/Bgc6TTMubeQ/s128/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>

[[https://picasaweb.google.com/lh/photo/Ab6k_0hV6JA2UqGHr2zWd-OTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-E17DkkLm4cI/T3mBT9qObpI/AAAAAAAADwQ/Vff18Gk_yMA/s128/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.

[[https://picasaweb.google.com/lh/photo/ZUvx8wqh8Ws3d9bT-QsnIeOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-XJwy6P8CmKM/T3mBl1GCB3I/AAAAAAAADwg/kuwZAlmxvNM/s128/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!!__

[[https://picasaweb.google.com/lh/photo/39XJbWBCQw6_sReyePphSuOTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh5.googleusercontent.com/-fJ2wyUX7wVw/T3mBpscVR6I/AAAAAAAADwo/Op7rqt0mJFs/s128/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 ====
[[https://picasaweb.google.com/lh/photo/D3dyCywc_VqiUxcFSFR1o-OTSUKDtqMXV2iiaJ9poqM?feat=directlink|{{https://lh3.googleusercontent.com/-PLO04j5Mn-w/T3mBvDBd2KI/AAAAAAAADww/ogawQv76C-I/s128/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 [[Notifier|Components-Other]] components function //ShowAlert//

==== Full AppBlocks view for Tutorial#1: RadioButton ====
{{ https://lh3.googleusercontent.com/-iNicXs3XMN8/T3mqYwo-duI/AAAAAAAADxk/kBA6zRABbTU/s720/screenshot.02-04-2012%252016.32.19.jpg }}

{{tag>tutorial radiobutton ai appinventor component workaround}}

~~DISCUSSION~~