PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- |00:01 |Welcome to the''' Spoken Tutorial''' on''' Adding Radio buttons.''' |- |00:06 |In th..."

2020-10-13T10:46:12Z

Created page with " {| border=1 | <center>'''Time'''</center> | <center>'''Narration'''</center> |- |00:01 |Welcome to the''' Spoken Tutorial''' on''' Adding Radio buttons.''' |- |00:06 |In th..."

New page

{| border=1
| <center>'''Time'''</center>
| <center>'''Narration'''</center>

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

|}

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

PoojaMoolya: Created page with " {| border=1 | '''Time''' | '''Narration''' |- |00:01 |Welcome to the''' Spoken Tutorial''' on''' Adding Radio buttons.''' |- |00:06 |In th..."