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)
|
|
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. |