View source for Android-app-using-Kotlin/C2/Adding-spinner-and-Image/English-timed


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

|-
| 00:01
| Welcome to the''' Spoken Tutorial''' on''' Adding Spinner '''and''' Image.'''

|-
| 00:07
| In this tutorial we will learn to

Add a drop-down menu using '''Spinner'''

|-
| 00:14
|  Add an''' Image '''and

Run the '''Kotlin''' '''App''' to see the output in an '''Android''' phone

|-
| 00:22
| To record this tutorial, I am using

|-
| 00:25
|  '''Ubuntu Linux 16.04''' operating system 

|-
| 00:29
|  '''Android Studio''' version 3.x and

|-
| 00:34
|  '''Android Phone '''with minimum of '''Android''' OS version '''4.03'''

|-
| 00:40
| To follow this tutorial, you should have basic knowledge of

|-
| 00:45
| '''Java programming language '''and 

|-
| 00:48
|  '''Android Studio '''

|-
| 00:51
| If not, then go through the relevant tutorials on this website.

|-
| 00:56
| In this tutorial, we will add a drop-down menu to show a list of '''Departments'''.

|-
| 01:02
| We will create this using the '''Spinner''' tool.

|-
| 01:05
| The label '''Department''' will be created using the '''TextView '''tool.
|-
| 01:10
| Let us open '''Android Studio'''.

|-
| 01:14
| We will be using the same project '''RegistrationForm''' which we used earlier.

|-
| 01:20
| In the left panel, click on the project '''RegistrationForm.'''

|-
| 01:25
| It will take some time to load the '''project'''. 

|-
| 01:28
| Wait until it completes loading.

|-
| 01:32
| Then click on '''activity underscore first dot xml''' file.

|-
| 01:38
| First, let us remove the top '''constraint''' of the '''Click Here''' button.

|-
| 01:43
| Let us move the '''Button''' down to leave some space for the '''Department TextView''' and '''Spinner '''tool'''.'''
|-
| 01:50
| Drag and drop a '''TextView''' below the '''RadioGroup.'''

|-
| 01:54
| Now let us align the '''constraints''' as shown.

|-
| 02:00
| Click on this '''TextView''' and change the '''text''' '''attribute''' as '''Department.'''

|-
| 02:06
| Next we will add a drop-down menu to select a department name.

|-
| 02:11
| In the '''Palette''' search, we will type '''Spinner '''and find the '''Spinner '''tool''' '''from the list.

|-
| 02:18
| Drag the '''Spinner''' and place it below '''Department TextView.'''

|-
| 02:24
| In the '''Attribute''' window, we’ll change its '''ID''' as '''deptSpinner.'''

|-
| 02:30
| Align the top and left '''constraints''' of the '''Spinner''' as shown here.

|-
| 02:36
| Now re-attach the '''Click Here''' button to this '''Spinner''' tool.

|-
| 02:41
| This '''Spinner''' is empty now.

|-
| 02:44
| It does not have any items to show the user.

|-
| 02:48
| So, we will add a list of items through '''Kotlin''' code.

|-
|02:53 
| For this, go to '''FirstActivity dot kt.'''

Type as shown.

|-
|03:00
| We will add a new''' variable d e p t''' to store the department details.

|-
| 03:06
| Next, we will make an '''ArrayList''' for departments.

|-
| 03:11
| Let us add three departments -  '''Computer Science''',  '''Information technology '''and '''Others'''.

|-
| 03:18
| So, type this code above the button '''setOnClickListener function.'''

|-
| 03:24
| Next, we will need an adapter for the '''Spinner,''' which will help us to fill the '''Spinner''' with item list.

|-
| 03:32
| For that, write this code after '''arrayListOf method.'''

|-
| 03:38
| This code will create a new '''adapter''' for '''Spinner'''.

|-
| 03:43
| An '''adapter''' is a '''collection handler''' that returns each item in the collection as a '''view'''.

|-
| 03:50
| The values in the '''deptlist''' is populated through an '''adapter''' into the '''Spinner.'''

|-
| 03:56
| '''deptSpinner''' is the '''Spinner ID''' which we have given earlier.

|-
| 04:02
| Type the code as shown.

|-
| 04:05
| We can see some error in '''object''' which is underlined in red color.

|-
| 04:10
| Place the cursor on the '''object''' and press '''Alt +Enter '''key'''.'''

|-
| 04:15
| Select '''Implement members '''from the available list.

|-
| 04:19
| A new window opens with the list of Implement members.

|-
| 04:24
| Select all the suggested methods by pressing the '''Shift''' key and press '''Ok'''.

|-
| 04:31
| Now the required '''methods''' are added automatically.

|-
| 04:35
| There are two '''methods - onNothingSelected '''and''' onItemSelected.'''

|-
| 04:41
| '''onNothingSelected '''is called when no option or item is selected.

|-
| 04:47
| '''onItemSelected '''is called when an option or item is selected.

|-
| 04:53
| In '''onItemSelected, '''type as shown.

|-
| 04:58
| We get the value of the department which is selected in the '''onItemSelected method.'''

|-
| 05:04
| The '''method''' has one '''argument''' which is '''position'''.

|-
| 05:08
| This refers to the position of item which is selected from the list.

|-
| 05:13
| Now as we have the department data that we need to send to '''SecondActivity dot kt'''
|-
| 05:20
| Type this code below the previous '''putExtra method''' in the '''intent method.'''

|-
| 05:28
| Now go to '''SecondActivity.kt.'''
|-
| 05:32
| Add a new '''variable''' say '''obtainedDept '''as shown.

|-
| 05:38
| We will get data from '''FirstActivity''' in '''obtainedDept '''variable using '''intent method.''' Type the code as shown:

|-
| 05:49
| Add the code shown to the existing '''TextView''' code, to show the selected department.

|-
| 05:55
| The '''Spinner''' code is now ready to run.

|-
| 05:59
| Click on the '''Play''' button to run the '''Kotlin app.'''

|-
| 06:04
| Launch the '''app '''on the phone.

|-
| 06:08
| Type your name and select any one gender '''radio button.'''

|-
| 06:13
| Then select a department from the drop-down menu.

|-
| 06:17
| Click on the '''CLICK HERE''' button.

|-
| 06:20
| The new window opens with the output as shown here.

|-
| 06:25
| Next we will see how to add an image to the''' Registration Form.'''

|-
| 06:30
| Go to''' activity underscore second dot xml.'''

|-
| 06:35
| In the '''Palette search''', type '''ImageView.'''

|-
| 06:39
| To display any image in the activity, we need to use '''ImageView '''tool.
|-
| 06:45
| Drag the '''ImageView '''tool and place it on the top right corner of the '''Layout editor'''.

|-
| 06:52
| After releasing the '''ImageView''' tool, a '''Resources''' window pops up.

|-
| 06:57
| Some default '''built-in''' images are provided by '''Android studio. '''

|-
| 07:02
| These are available in the '''Drawable''' and '''Color''' folders on the top left side panel.

|-
| 07:08
| Image files are available under the sub-folders '''Project''', '''android''' and '''Theme attributes.'''

|-
| 07:16
| Click on '''Drawable, Project ''' '''ic underscore launcher.'''

|-
| 07:22
| We can see the image of the''' ic underscore launcher '''on the right panel.

|-
| 07:28
| Click '''Ok '''button''' '''at the bottom of the window.

|-
| 07:32
| Now the image is added to the '''Registration Form.'''

|-
| 07:36
| Align the '''constraints''' of the image view as shown here.

|-
| 07:42
| Next we will see how to add a custom image.

|-
| 07:46
| For demonstration purpose, I’ll show how to add '''Spoken Tutorial logo '''image.

|-
|07:52
| I have '''st hyphen logo dot png''' file in my '''Desktop''' . 

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

|-
| 08:05
| Copy the '''st hyphen logo dot png''' file.

|-
| 08:09
| Go back to the '''Android Studio interface.'''

|-
| 08:13
| In the left panel of the '''IDE''', select '''Project'''.

|-
| 08:18
| Now go to '''app  res  drawable'''

|-
| 08:25
| Right click on '''drawable''' and select '''Paste''' option.

|-
| 08:30
| '''Choose destination directory''' window appears.

|-
| 08:34
| Select ''' slash app slash src slash main slash res slash drawable '''and click '''Ok''' button at the bottom of the window.

|-
| 08:47
| Now '''Copy''' pop-up window appears.

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

|-
| 08:58
| Then click on '''OK '''button.

|-
| 09:01
| The image file gets added in the directory.

|-
| 09:05
| Click the''' ImageView '''in the '''layout editor''' and find '''srcCompat attribute '''in the '''attributes '''window.

|-
| 09:14
| This '''attribute '''gives the destination of the image.

|-
| 09:18
| So, now we will change the source.

|-
| 09:22
| Click on the button with three dots''', Pick a resource''' next to '''srcCompat field.'''

|-
| 09:29
| In the '''Resources''' window, under '''Project''', select the file '''stlogo dot png. '''

|-
| 09:36
| Click on the '''Ok''' button.

|-
| 09:39
| The '''ImageView''' immediately shows the new image.

|-
| 09:43
| Now click on the '''Play '''button to run the '''Kotlin app.'''

|-
| 09:48
| Launch the '''app''' in the phone.

|-
| 09:51
| Type your name and select any one gender '''radio button.'''

|-
| 09:57
| Select a department from the drop-down list.

|-
| 10:01
| Click on '''Click Here''' button.

|-
| 10:04
| We can see the image and other expected output in the '''registration form.'''

|-
| 10:10
| With this, we come to the end of this tutorial. Let us summarize.

|-
| 10:16
| In this tutorial we learnt to

Add a drop-down menu using '''Spinner'''
 
|-
| 10:23
| Add an''' Image '''and  Run the '''Kotlin App''' to see the output in an '''Android''' phone
|-
| 10:30
| As an assignment do the following.

|-
| 10:33
|  Add your photo to the '''ImageView'''

|-
| 10:36
|  Run the '''Kotlin app''' to check the output.
|-
| 10:40
| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

|-
| 10:48
| The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online test.

For more details, please write to us.

|-
| 10:58
| Please post your timed queries in this forum. 

|-
| 11:02
| Spoken Tutorial project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

|-
| 11:14
| The '''Android app '''and the script for this tutorial was contributed by Abhishek Shah.

|-
| 11:20
| And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off. 

Thanks for watching.

|}