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

From Script | Spoken-Tutorial
Revision as of 16:16, 13 October 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
Time
Narration
00:01 Welcome to the Spoken Tutorial on Adding Radio buttons.
00:06 In this tutorial we will learn to

Add a Radio Group and Radio buttons

00:13 And run the Kotlin App to see the output in an Android phone
00:19 To record this tutorial, I am using

Ubuntu Linux 16.04 operating system

00:26 Android Studio version 3.x and Android Phone with minimum of Android OS version 4.03
00:36 To follow this tutorial, you should have basic knowledge

Java programming language and Android Studio

00:46 If not, then go through the relevant tutorials on this website.
00:51 In this tutorial, we will add Radio buttons to create Male and Female options.
00:59 The label Gender will be created using TextView tool.
01:04 Let us open Android Studio.
01:07 We will be using the same project RegistrationForm which we used earlier.
01:13 In the left panel we can see the list of recently opened projects.
01:18 Or you can click on Open an existing Android Studio Project.
01:23 And then select the RegistrationForm project from the saved location.
01:27 Select the project RegistrationForm directly from here.
01:32 It will take some time to load the project. Wait until it completes loading.
01:38 Click on activity underscore first dot xml file.
01:43 We have already created the form with few tools earlier.
01:48 Now we will add some more tools.
01:52 First, let us remove the top constraint of the Click Here button and align properly.
01:58 Once done, we can add the new tools .
02:02 So, drag TextView to show the label Gender and place it below Name EditText.
02:10 Click on this TextView and change its text attribute to Gender.
02:16 Now let us align the Gender TextView as shown.
02:21 Next we need add a Radio Group to group the radio buttons.
02:26 Why we need Radio Group?
02:39 Radio group can hold the Radio Buttons.
02:33 When radio buttons are placed inside a Radio Group, the user can only select one button at one time.
02:41 We can have any number of Radio Groups as per the requirement.
02:47 In the palette search box, type radio and find the Radio Group from the list.
02:53 Here it is available under Buttons option. The option could change in the future due to version change.
03:02 Now select and drag Radio Group and place it below the Gender TextView.
03:08 Note that Radio Group is not assigned with a default unique ID.
03:14 So first, we need to give a unique ID.

Otherwise, the tool is not able to attach to other tools via constraints.

03:23 In the Attributes window, type “genderRadioGroup” in ID field and press Enter.
03:31 Position it below the Gender label by aligning the top and side constraints as shown.
03:38 Let us now add Radio Button to the Radio group.
03:42 We will add two radio buttons for Gender.
03:46 Drag it to the Component Tree panel and release it on the genderRadioGroup.
03:52 Note that it should come under the hierarchy of genderRadioGroup and not under ConstraintLayout.
03:59 Now drag one more radio button and release it on the first radio button in the Component Tree.
04:06 Now select the first radio button in the Component Tree and change its text attribute to “Male”.
04:15 Likewise, change the text attribute to “Female” for the second radio button.
04:21 We had removed the top constraint of Click Here button earlier.
04:26 Now click on the top constraint of the button.
04:30 Then drag and attach to the bottom of Radio Group to place it properly.
04:36 Lastly, run the app by clicking on the Play button and check how it looks on the phone.
04:46 Next let us see about how to declare variables in Kotlin.
04:51 var x equal to 5
04:54 Here, Int data type is assigned by default to a variable x.
05:00 val x equal to 5
05:03 The value 5 is a constant when the variable is declared using ‘val’ keyword.
05:09 val xcolon Int equal to 5
05:12 Here, we are declaring a constant value 5 to the variable x of type Int.
05:20 Otherwise, we can say

val x colon Int and assign the value in the next line as xequal to 5

05:30 Switch back to Android studio interface and click on FirstActivity dot kt.
05:36 Now we will write the code that will decide which radio button is selected.
05:42 First we will create a new variable to store the gender information.
05:47 Type this line of code below the code var name equal to empty string
05:54 In setOnClickListener function, after the Toast method, write the below code.
06:00 This function returns the id of the Radio Button which is selected from the Radio Group.
06:06 The Id is stored in the variable genderId.
06:10 This function returns minus 1 when no radio button is selected.
06:15 The Radio Button value is stored in a variable selected underscore gender by the method findViewById.
06:23 findViewById method returns the view of which ID is passed as argument.
06:29 This line extracts the text of the selected radio button and stores it in the gender variable.
06:36 Now we have a new data gender, which we can pass onto the SecondActivity.
06:42 Type this code below the previous putExtra() method in the intent method.
06:48 This new data can now be accessed inside SecondActivity dot kt
06:54 Click on activity underscore second dot xml.
06:59 Let us resize the TextView to add the gender information.
07:04 Now go to SecondActivity.kt file.
07;08 Add a new variable say obtainedGender as shown.
07:13 We need to extract the new data of gender, so we will write the code as below.
07:19 This will store the gender data from FirstActivity in obtainedGender variable.
07:25 Edit the code of TextView to add the gender information like this.
07:30 The radio button code is ready to run.
07:33 Click on the Play button to run the Kotlin app.
07:38 Launch the app in the phone.
07:41 Enter your name and select any one of the gender radio buttons.
07:47 Click on the Click Here button.
07:50 A new window opens with the output as shown.
07:54 With this, we come to the end of this tutorial. Let us summarize.
08:00 In this tutorial we learnt to

Add Radio Groups and Radio Buttons

08:06 Run the Kotlin app to see the output in an Android phone
08:11 As an assignment do the following.
08:14 Add one more radio button to the Radio Group and change the text attribute as “Others”.
08:21 Run the Kotlin app to check the output.
08:25 The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

08:33 The Spoken Tutorial Project Team conducts workshops and gives certificates.

For more details, please write to us.

08:43 Please post your timed queries in this forum.
08:47 Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
08:54 More information on this mission is available at this link.
08:59 The Android app and the script for this tutorial was contributed by Abhishek Shah.
09:05 And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.

Contributors and Content Editors

PoojaMoolya