View source for Android-app-using-Kotlin/C2/Adding-Radio-Buttons/English


{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| <center>'''Visual Cue'''</center>
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| <center>'''Narration'''</center>

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 1:

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Welcome to the''' Spoken Tutorial''' on''' Adding Radio buttons.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 2:

Learning Objectives
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 3:

System requirement
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 4:

Pre-requisites
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 5:

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| In this tutorial, we will add '''Radio buttons '''to create '''Male''' and '''Female''' options.

The label '''Gender''' will be created using '''TextView '''tool.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Open the '''Android studio '''from the launcher bar.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| We will be using the same '''project RegistrationForm''' which we used earlier.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Point to '''Open an existing Android studio Project.'''

Point to the left panel

Click on '''RegistrationForm'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Click on '''Open an existing Android studio Project.'''

Point to the left panel >> Click on '''RegistrationForm'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Select the '''project RegistrationForm '''directly from here.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| It will take some time to load the '''project'''. Wait until it completes loading.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Click on '''activity_first.xml '''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Click on '''activity_first.xml''' file.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Point to the Registration form
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| We have already created the '''form''' with few '''tools''' earlier.

Now we will add some more '''tools'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Remove the top constraint
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| First, let us remove the top '''constraint''' of the '''Click Here''' button and align properly.

Once done, we can add the new '''tools''' .

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Drag a TextView

Change the text attribute to Gender.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Demonstration:

Aligning the tools in the layout editor.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Now let us align the '''Gender TextView''' as shown.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Next we need add a '''Radio Group''' to group the '''radio buttons.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 6:Why Radio Group?
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| In the '''palette''' search box, type '''radio'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| In the '''palette search '''box, type '''radio''' and find the '''Radio Group''' from the list.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Point to Buttons

select and drag '''Radio Group'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| A'''ttributes''' window: ID field type '''“genderRadioGroup”''' 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Demonstration:

Aligning the tools in the layout editor
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Position it below the '''Gender''' label by aligning the top and side constraints as shown.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Let us now add '''Radio Button''' to the '''Radio group.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| In the '''palette''' search box, type '''radio.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| In the '''palette search''' box, type '''radio''' to find the '''Radiobutton.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Placing '''RadioButton '''in genderRadioGroup in the Component tree

Point to the tree heirarchy
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Drag '''RadioButton '''and place it on the first RadioButton
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Now drag one more '''radio button''' and release it on the first '''radio button''' in the '''Component Tree.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Change first RadioButton '''text '''attribute to “'''Male”'''

Change''' '''second''' '''RadioButton''' text attribute to “Female”.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Demonstration of button constraint attachment.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Run App
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Lastly, run the '''app''' by clicking on the '''Play '''button and check how it looks on the phone.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Next let us see about how to declare '''variables''' in '''Kotlin'''.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 6:

Declaring variables in kotlin
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| '''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'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Switch back to '''Android studio''' interface and click on '''FirstActivity.kt.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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()

}
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.

<nowiki><<code>></nowiki>

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

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Now we have a new data '''gender''', which we can pass onto the '''SecondActivity.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| '''putExtra("Refergender", gender)'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Type''' '''this code below the previous '''putExtra() method''' in the '''intent method'''.

This new data can now be accessed inside '''SecondActivity.kt'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Click on '''activity_second.xml'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Click on '''activity_second.xml. '''

Let us resize the '''TextView''' to add the gender information.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Select '''SecondActivity.kt '''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Now go to '''SecondActivity.kt '''file'''.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| '''var obtainedGender = ""'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Add a new '''variable''' say '''obtainedGender '''as shown.

'''var obtainedGender = ""'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| '''obtainedGender = intent.getStringExtra("Refergender")'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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. '''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Edit the code of '''TextView''' to add the gender information like this,

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Run the App

Show the demo of the run window
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| The '''radio button''' code is ready to run.

Click on the '''Play '''button to run the '''Kotlin app.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Enter any name.

Select gender.

Click on the Click Here button.

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Launch the '''app''' in the phone.

Enter your name and select any one of the gender '''radio buttons.'''

Click on the '''Click Here''' button.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Show the output
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| A new window opens with the output as shown.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| With this, we come to the end of this tutorial. Let us summarize.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 17:

Summary
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| In this tutorial we learnt to

* Add '''Radio Groups''' and '''Radio Buttons'''
* Run the '''Kotlin''' '''app''' to see the output in an '''Android''' phone
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 18:

Assignment
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| 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.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 18:

About Spoken Tutorial project

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| Slide 19:

About workshops

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.062cm;padding-right:0.191cm;"| The''' Spoken Tutorial Project''' Team conducts workshops and gives certificates.

For more details, please write to us.

|-
| style="border-top:1pt solid #000001;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 15:

Forum for specific questions:

| style="border-top:1pt solid #000001;border-bottom:1pt solid #000000;border-left:1pt solid #000000;border-right:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| * Please post your timed queries in this forum. 

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Slide 14:

Acknowledgement

[http://spoken-tutorial.org/NMEICT-Intro ]
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.
More information on this mission is available at
this link.

|-
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 
| style="border:1pt solid #000000;padding-top:0cm;padding-bottom:0cm;padding-left:0.079cm;padding-right:0.191cm;"| 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.

|}