Android-app-using-Kotlin/C2/Adding-Radio-Buttons/English-timed
From Script | Spoken-Tutorial
| |
|
| 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. |
