Android-app-using-Kotlin/C2/Adding-spinner-and-Image/English - Revision history

Nancyvarkey at 12:47, 3 April 2019

2019-04-03T12:47:17Z

Nirmala Venkat: Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
2019-04-02T07:07:29Z

Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <cent..."

New page

{| style="border-spacing:0;"
| style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;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.206cm;padding-right:0.191cm;"| <center>'''Narration'''</center>

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

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

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

Learning Objectives

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

* Add a drop-down menu using '''Spinner'''
* Add an''' Image '''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.206cm;padding-right:0.191cm;"| Slide 3:

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

Pre-requisites

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| To follow this tutorial, you should have basic knowledge of

* '''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.206cm;padding-right:0.191cm;"| Slide 5:

Image
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In this tutorial, we will add a drop-down menu to show a list of '''Departments'''.

We will create this using the '''Spinner''' tool.

The label '''Department''' will be created using the '''TextView '''tool.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;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.206cm;padding-right:0.191cm;"| Let us open '''Android Studio'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| narration only
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;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.206cm;padding-right:0.191cm;"| Point to the left panel

Click on '''RegistrationForm'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the left panel, click on the project '''RegistrationForm.'''

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.206cm;padding-right:0.191cm;"| Click on '''activity_first.xml '''

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

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

Let us move the '''Button''' down to leave some space for the '''Department TextView''' and '''Spinner '''tool'''.'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''TextView '''for Department

Demo of aligning the constraint

Change the '''text''' attribute as '''Department.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag and drop a '''TextView''' below the '''RadioGroup.'''

Now let us align the '''constraints''' as shown.

Let’s click on this '''TextView''' and change the '''text''' '''attribute''' as '''Department.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will add a drop-down menu to select a department name.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Palette''' search, type Spinner

Point to the spinner tool
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Palette''' search, we will type '''Spinner '''and find the '''Spinner '''tool''' '''from the list.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag the '''Spinner''' to the form.

Change the ID as '''deptSpinner.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag the '''Spinner''' and place it below '''Department TextView.'''

In the '''Attribute''' window, we’ll change its '''ID''' as '''deptSpinner.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Demo of the spinner constraint alignment
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Align the top and left '''constraints''' of the '''Spinner''' as shown here.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Demo of the Button constraint alignment
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now re-attach the '''Click Here''' button to this '''Spinner''' tool.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the spinner
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now this '''Spinner''' is empty.

It does not have any items to show the user.

So, we will add a list of items through '''Kotlin''' code.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| For this, go to '''FirstActivity.kt.'''

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

'''var dept = " "'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will add a new''' variable dept''' to store the department details.

Type as shown.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''var deptlist = arrayListOf("Computer Science", "Information Technology", "Others")'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, we will make an '''ArrayList''' for departments.

Let us add three departments - '''Computer Science''',
'''Information technology '''and '''Others'''.

So, type this code above the button '''setOnClickListener function.'''

|-
| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border-top:none;border-bottom:1pt solid #000001;border-left:1pt solid #000001;border-right:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next, we will need an adapter for the '''Spinner,''' which will help us to fill the '''Spinner''' with item list.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''deptSpinner.''adapter'''''

'''<nowiki>= ArrayAdapter(this, android.R.layout.simple_spinner_item, deptlist)</nowiki>'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| For that, write this code after '''arrayListOf method.'''

This code will create a new '''adapter''' for '''Spinner'''.

An '''adapter''' is a '''collection handler''' that returns each item in the collection as a '''view'''.

The values in the '''deptlist''' is populated through an '''adapter''' into the '''Spinner.'''

'''deptSpinner''' is the '''Spinner ID''' which we have given earlier.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Type,'''

'''deptSpinner.''onItemSelectedListener ''<nowiki>= </nowiki>object : AdapterView.OnItemSelectedListener'''

'''{'''

'''<nowiki>override fun onNothingSelected
(arg0: AdapterView<>) {</nowiki>'''

'''}'''

'''<nowiki>override fun onItemSelected
(arg0: AdapterView<>,
arg1: View, position: Int, id: Long) {</nowiki>'''

'''}'''

'''}'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Type the code as shown.

We can see some error in '''object''' which is underlined in red color.

Place the cursor on the '''object''' and press '''Alt +Enter '''key'''.'''

Select '''Implement members '''from the available list.

Select all the suggested '''methods''' and press '''Ok'''.

A new window opens with the list of Implement members.

Select all the suggested methods by pressing the shift key and press Ok.

Now the required '''methods''' are added automatically.

There are two '''methods - onNothingSelected '''and''' onItemSelected.'''

'''onNothingSelected '''is called when no option or item is selected.

'''onItemSelected '''is called when an option or item is selected.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''<nowiki>override fun onItemSelected
(arg0: AdapterView<>,
arg1: View, position: Int, id: Long) {</nowiki>'''

'''<nowiki>dept = deptlist[position]</nowiki>'''

'''}'''

'''}'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In '''onItemSelected, '''type as shown.

We get the value of the department which is selected in the '''onItemSelected method.'''

The '''method''' has one '''argument''' which is '''position'''.

This refers to the position of item which is selected from the list.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now as we have the department data that we need to send to '''SecondActivity.kt'''
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''putExtra("Referdepartment",department)'''

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

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

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

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

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''obtainedDept= intent.getStringExtra("Referdepartment")'''

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will get data from '''FirstActivity''' in '''obtainedDept '''variable using '''intent method.'''
Type the code as shown:

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''welcomeTextView.text = "Welcome " + obtainedName +'''
'''"\nGender : " + obtainedGender +'''
'''"\nDepartment : " + obtainedDept'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Add the code shown to the existing '''TextView''' code, to show the selected department.

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

Show the output
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The '''Spinner''' code is now 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.206cm;padding-right:0.191cm;"| Enter any name.

Select gender.

Select Department

Click on the Click Here button.

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

Type your name and select any one gender '''radio button.'''

Then select a department from the drop-down menu.

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

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the output

<nowiki>Welcome <name></nowiki>

<nowiki>Gender : <gender></nowiki>

<nowiki>Department:<dept></nowiki>
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The new window opens with the output as shown here.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Narration only
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will see how to add an image to the''' Registration Form.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the logo
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to''' activity_second.xml.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Palette''' search, type '''ImageView.'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the '''Palette search''', type '''ImageView.'''

To display any image in the activity, we need to use '''ImageView '''tool.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag the '''ImageView '''tool
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Drag the '''ImageView '''tool and place it on the top right corner of the '''Layout editor'''.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to Resources
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| After releasing the '''ImageView''' tool, a '''Resources''' window pops up.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''Drawable''' and '''color''' folders
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Some default '''built-in''' images are provided by '''Android studio. '''

These are available in the '''Drawable''' and '''color''' folders on the top left side panel.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the images under each folder
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Image files are available under the sub-folders '''project''', '''android''' and '''theme''' '''attributes.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Drawable>>Project>>''' '''ic_launcher'''

Click ok
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on '''Drawable>>Project>>''' '''ic_launcher.'''

We can see the image of the''' ic_launcher '''on the right panel.

Click '''Ok '''button''' '''at the bottom of the window.

Now the image is added to the '''Registration Form.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"|
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will see how to add a custom image.

For demonstration purpose, I’ll show how to add '''Spoken Tutorial logo '''image'''.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the file
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| I have '''st-logo.png''' file in my '''Downloads''' folder.

This file is available in the '''Code Files''' link of this tutorial. You can download and make use of it.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy the st-logo.png file.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy the '''st-logo.png''' file.

Go back to the '''Android studio interface.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the left panel of IDE, select Project

go to '''app => res => drawable'''

Right click on '''drawable''' and select '''Paste''' option.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| In the left panel of the '''IDE''', select '''Project'''.

Now go to '''app => res => drawable'''

Right click on '''drawable''' and select '''Paste''' option.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Select “'''\app\src\main\res\drawable'''” from '''Choose destination directory window'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| '''Choose destination directory''' window appears.

Select '''\app\src\main\res\drawable '''and click '''Ok''' button at the bottom of the window.

Now '''Copy''' pop-up window appears.

Change the name of the image if you want. I’ll keep it as '''st-logo.png.'''

Then click on '''OK '''button.

The image file gets added in the directory.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to '''srcCompat''' attribute in the attributes window.

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click the''' ImageView '''in the '''layout editor''' and find '''srcCompat attribute '''in the '''attributes '''window.

This '''attribute '''gives the destination of the image.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| click on the button Pick a resource

Select the file '''st-logo.png'''

and click ok.
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| So, now we will change the source.

Click on the button with three dots''', Pick a resource''' next to '''srcCompat field.'''

In the '''Resources''' window, under '''Project''', select the file '''stlogo.png. '''

Click on the '''Ok''' button.

The '''ImageView''' immediately shows the new image.

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Click on the '''Play '''button
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now click on the '''Play '''button to run the '''Kotlin app.'''

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Enter the name, gender and department.

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

Type your name and select any one gender '''radio button.'''

Select a department from the drop-down list.

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

|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the output
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We can see the image and other expected output in the '''registration form.'''

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

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

Add a drop-down menu using '''Spinner'''
* Add an''' Image '''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.206cm;padding-right:0.191cm;"| Slide 8:

Assignment
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| As an assignment do the following.

# Add your photo to the '''ImageView'''
# Run the '''Kotlin app''' to check the output.
|-
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Slide 9:

About Spoken Tutorial project

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

About workshops

| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| The Spoken Tutorial Project Team

conducts workshops and gives certificates on passing online test.

For more details, please write to us.

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

Forum for specific questions:

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

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

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

|}

@@ Line 89: / Line 89: @@
 Now let us align the '''constraints''' as shown.
-Let’s click on this '''TextView''' and change the '''text''' '''attribute''' as '''Department.'''
+Click on this '''TextView''' and change the '''text''' '''attribute''' as '''Department.'''
 |-
@@ Line 119: / Line 119: @@
 |-
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the spinner
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now this '''Spinner''' is empty.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| This '''Spinner''' is empty now.
 It does not have any items to show the user.
@@ Line 128: / Line 128: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt'''
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| For this, go to '''FirstActivity.kt.'''
 |-
@@ Line 133: / Line 135: @@
 '''var dept = " "'''
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will add a new''' variable dept''' to store the department details.
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will add a new''' variable d e p t''' to store the department details.
 Type as shown.
@@ Line 194: / Line 196: @@
 Select '''Implement members '''from the available list.
-Select all the suggested '''methods''' and press '''Ok'''.
 A new window opens with the list of Implement members.
-Select all the suggested methods by pressing the shift key and press Ok.
+Select all the suggested methods by pressing the '''Shift''' key and press '''Ok'''.
 Now the required '''methods''' are added automatically.
@@ Line 279: / Line 281: @@
 Then select a department from the drop-down menu.
-Click on the '''Click Here''' button.
+Click on the '''CLICK HERE''' button.
 |-
@@ Line 316: / Line 318: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Some default '''built-in''' images are provided by '''Android studio. '''
-These are available in the '''Drawable''' and '''color''' folders on the top left side panel.
+These are available in the '''Drawable''' and '''Color''' folders on the top left side panel.
 |-
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the images under each folder
-| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Image files are available under the sub-folders '''project''', '''android''' and '''theme''' '''attributes.'''
+| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Image files are available under the sub-folders '''Project''', '''android''' and '''Theme attributes.'''
 |-
@@ Line 333: / Line 335: @@
 Now the image is added to the '''Registration Form.'''
 |-
@@ Line 338: / Line 342: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will see how to add a custom image.
-For demonstration purpose, I’ll show how to add '''Spoken Tutorial logo '''image'''.'''
+For demonstration purpose, I’ll show how to add '''Spoken Tutorial logo '''image.
 |-
@@ Line 350: / Line 354: @@
 | style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy the '''st-logo.png''' file.
-Go back to the '''Android studio interface.'''
+Go back to the '''Android Studio interface.'''
 |-