Android-app-using-Kotlin/C2/Adding-Radio-Buttons/English

Visual Cue	Narration
Slide 1:	Welcome to the Spoken Tutorial on Adding Radio buttons.
Slide 2: Learning Objectives	In this tutorial we will learn to Add a Radio Group and Radio buttons And run the Kotlin App to see the output in an Android phone
Slide 3: System requirement	To record this tutorial, I am using Ubuntu Linux 16.04 operating system Android Studio version 3.x and Android Phone with minimum of Android OS version 4.03
Slide 4: Pre-requisites	To follow this tutorial, you should have basic knowledge Java programming language and Android Studio If not, then go through the relevant tutorials on this website.
Slide 5:	In this tutorial, we will add Radio buttons to create Male and Female options. The label Gender will be created using TextView tool.
Open the Android studio from the launcher bar.	Let us open Android Studio.
	We will be using the same project RegistrationForm which we used earlier.
Point to Open an existing Android studio Project. Point to the left panel Click on RegistrationForm	In the left panel we can see the list of recently opened projects. Or you can click on Open an existing Android Studio Project. And then select the RegistrationForm project from the saved location.
Click on Open an existing Android studio Project. Point to the left panel >> Click on RegistrationForm	Select the project RegistrationForm directly from here.
	It will take some time to load the project. Wait until it completes loading.
Click on activity_first.xml	Click on activity_first.xml file.
Point to the Registration form	We have already created the form with few tools earlier. Now we will add some more tools.
Remove the top constraint	First, let us remove the top constraint of the Click Here button and align properly. Once done, we can add the new tools .
Drag a TextView Change the text attribute to Gender.	So, drag TextView to show the label Gender and place it below Name EditText. Click on this TextView and change its text attribute to Gender.
Demonstration: Aligning the tools in the layout editor.	Now let us align the Gender TextView as shown.
	Next we need add a Radio Group to group the radio buttons.
Slide 6:Why Radio Group?	Why we need Radio Group? Radio group can hold the Radio Buttons. When radio buttons are placed inside a Radio Group, the user can only select one button at one time. We can have any number of Radio Groups as per the requirement.
In the palette search box, type radio	In the palette search box, type radio and find the Radio Group from the list.
Point to Buttons select and drag Radio Group	Here it is available under Buttons option. The option could change in the future due to version change. Now select and drag Radio Group and place it below the Gender TextView.
Attributes window: ID field type “genderRadioGroup”	Note that Radio Group is not assigned with a default unique ID. So first, we need to give a unique ID. Otherwise, the tool is not able to attach to other tools via constraints. In the Attributes window, type “genderRadioGroup” in ID field and press Enter.
Demonstration: Aligning the tools in the layout editor	Position it below the Gender label by aligning the top and side constraints as shown.
	Let us now add Radio Button to the Radio group.
Placing RadioButton in genderRadioGroup in the Component tree Point to the tree heirarchy	We will add two radio buttons for Gender. Drag it to the Component Tree panel and release it on the genderRadioGroup. Note that it should come under the hierarchy of genderRadioGroup and not under ConstraintLayout.
Drag RadioButton and place it on the first RadioButton	Now drag one more radio button and release it on the first radio button in the Component Tree.
Change first RadioButton text attribute to “Male” Change second RadioButton text attribute to “Female”.	Now select the first radio button in the Component Tree and change its text attribute to “Male”. Likewise, change the text attribute to “Female” for the second radio button.
Demonstration of button constraint attachment.	We had removed the top constraint of Click Here button earlier. Now click on the top constraint of the button. Then drag and attach to the bottom of Radio Group to place it properly.
Run App	Lastly, run the app by clicking on the Play button and check how it looks on the phone.
	Next let us see about how to declare variables in Kotlin.
Slide 6: Declaring variables in kotlin	var x = 5 Here, Int data type is assigned by default to a variable x. val x =5 The value 5 is a constant when the variable is declared using ‘val’ keyword. val x: Int =5 We are declaring a constant value 5 to the variable x of type Int. Otherwise, we can say val x:Int and assign the value in the next line as x=5
	Switch back to Android studio interface and click on FirstActivity.kt.
Highlight the code according to narration. var gender = " " var genderId = genderRadioGroup.checkedRadioButtonId if(genderId != -1){ val selected_gender : RadioButton = findViewById(genderId) gender = selected_gender.text.toString() }	Now we will write the code that will decide which radio button is selected. First we will create a new variable to store the gender information. Type this line of code below the code var name = " " In setOnClickListener function, after the Toast method, write the below code. <<code>> This function returns the id of the Radio Button which is selected from the Radio Group. The Id is stored in the variable genderId. This function returns -1 when no radio button is selected. The Radio Button value is stored in a variable selected_gender by the method findViewById(). findViewById() method returns the view of which ID is passed as argument. This line extracts the text of the selected radio button and stores it in the gender variable.
	Now we have a new data gender, which we can pass onto the SecondActivity.
putExtra("Refergender", gender)	Type this code below the previous putExtra() method in the intent method. This new data can now be accessed inside SecondActivity.kt
Click on activity_second.xml	Click on activity_second.xml. Let us resize the TextView to add the gender information.
Select SecondActivity.kt	Now go to SecondActivity.kt file.
var obtainedGender = ""	Add a new variable say obtainedGender as shown. var obtainedGender = ""
obtainedGender = intent.getStringExtra("Refergender")	We need to extract the new data of gender, so we will write the code as below. This will store the gender data from FirstActivity in obtainedGender variable.
	Edit the code of TextView to add the gender information like this.
Run the App Show the demo of the run window	The radio button code is ready to run. Click on the Play button to run the Kotlin app.
Enter any name. Select gender. Click on the Click Here button.	Launch the app in the phone. Enter your name and select any one of the gender radio buttons. Click on the Click Here button.
Show the output	A new window opens with the output as shown.
	With this, we come to the end of this tutorial. Let us summarize.
Slide 17: Summary	In this tutorial we learnt to Add Radio Groups and Radio Buttons Run the Kotlin app to see the output in an Android phone
Slide 18: Assignment	As an assignment do the following. Add one more radio button to the Radio Group and change the text attribute as “Others”. Run the Kotlin app to check the output.
Slide 18: About Spoken Tutorial project	The video at the following link summarises the Spoken Tutorial project. Please download and watch it
Slide 19: About workshops	The Spoken Tutorial Project Team conducts workshops and gives certificates. For more details, please write to us.
Slide 15: Forum for specific questions:	* Please post your timed queries in this forum.
Slide 14: Acknowledgement [1]	Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
	The Android app and the script for this tutorial was contributed by Abhishek Shah. And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off. Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat