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

Visual Cue	Narration
Slide 1:	Welcome to the Spoken Tutorial on Adding Spinner and Image.
Slide 2: Learning Objectives	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
Slide 3: System requirement	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
Slide 4: Pre-requisites	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.
Slide 5: Image	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.
Open the Android studio from the launcher bar.	Let us open Android Studio.
narration only	We will be using the same project RegistrationForm which we used earlier.
Point to the left panel Click on RegistrationForm	In the left panel, click on the project RegistrationForm. It will take some time to load the project. Wait until it completes loading.
Click on activity_first.xml	Then click on activity_first.xml file.
Remove the top constraint	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.
TextView for Department Demo of aligning the constraint Change the text attribute as Department.	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.
	Next we will add a drop-down menu to select a department name.
In the Palette search, type Spinner Point to the spinner tool	In the Palette search, we will type Spinner and find the Spinner tool from the list.
Drag the Spinner to the form. Change the ID as deptSpinner.	Drag the Spinner and place it below Department TextView. In the Attribute window, we’ll change its ID as deptSpinner.
Demo of the spinner constraint alignment	Align the top and left constraints of the Spinner as shown here.
Demo of the Button constraint alignment	Now re-attach the Click Here button to this Spinner tool.
Point to the spinner	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.
Go to FirstActivity.kt	For this, go to FirstActivity.kt.
Type, var dept = " "	We will add a new variable dept to store the department details. Type as shown.
var deptlist = arrayListOf("Computer Science", "Information Technology", "Others")	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.
	Next, we will need an adapter for the Spinner, which will help us to fill the Spinner with item list.
deptSpinner.adapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, deptlist)	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.
Type, deptSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener { override fun onNothingSelected (arg0: AdapterView<*>) { } override fun onItemSelected (arg0: AdapterView<*>, arg1: View, position: Int, id: Long) { } }	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.
override fun onItemSelected (arg0: AdapterView<*>, arg1: View, position: Int, id: Long) { dept = deptlist[position] } }	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.
	Now as we have the department data that we need to send to SecondActivity.kt
putExtra("Referdepartment",department)	Type this code below the previous putExtra() method in the intent method.
Select SecondActivity.kt	Now go to SecondActivity.kt.
var obtainedDept = ""	Add a new variable say obtainedDept as shown.
obtainedDept= intent.getStringExtra("Referdepartment")	We will get data from FirstActivity in obtainedDept variable using intent method. Type the code as shown:
welcomeTextView.text = "Welcome " + obtainedName + "\nGender : " + obtainedGender + "\nDepartment : " + obtainedDept	Add the code shown to the existing TextView code, to show the selected department.
Run the App Show the output	The Spinner code is now ready to run. Click on the Play button to run the Kotlin app.
Enter any name. Select gender. Select Department Click on the Click Here button.	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.
Show the output Welcome <name> Gender : <gender> Department:<dept>	The new window opens with the output as shown here.
Narration only	Next we will see how to add an image to the Registration Form.
Show the logo	Go to activity_second.xml.
In the Palette search, type ImageView.	In the Palette search, type ImageView. To display any image in the activity, we need to use ImageView tool.
Drag the ImageView tool	Drag the ImageView tool and place it on the top right corner of the Layout editor.
Point to Resources	After releasing the ImageView tool, a Resources window pops up.
Point to Drawable and color folders	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.
Show the images under each folder	Image files are available under the sub-folders project, android and theme attributes.
Click on Drawable>>Project>> ic_launcher Click ok	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.
	Next we will see how to add a custom image. For demonstration purpose, I’ll show how to add Spoken Tutorial logo image.
Point to the file	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.
Copy the st-logo.png file.	Copy the st-logo.png file. Go back to the Android studio interface.
In the left panel of IDE, select Project go to app => res => drawable Right click on drawable and select Paste option.	In the left panel of the IDE, select Project. Now go to app => res => drawable Right click on drawable and select Paste option.
Select “\app\src\main\res\drawable” from Choose destination directory window	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.
Point to srcCompat attribute in the attributes window.	Click the ImageView in the layout editor and find srcCompat attribute in the attributes window. This attribute gives the destination of the image.
click on the button Pick a resource Select the file st-logo.png and click ok.	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.
Click on the Play button	Now click on the Play button to run the Kotlin app.
Enter the name, gender and department. Click on Click Here button	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.
Show the output	We can see the image and other expected output in the registration form.
	With this, we come to the end of this tutorial. Let us summarize.
Slide 7: Summary	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
Slide 8: Assignment	As an assignment do the following. Add your photo to the ImageView Run the Kotlin app to check the output.
Slide 9: About Spoken Tutorial project	The video at the following link summarises the Spoken Tutorial project. Please download and watch it.
Slide 10: About workshops	The Spoken Tutorial Project Team conducts workshops and gives certificates on passing online test. For more details, please write to us.
Slide 11: Forum for specific questions:	Please post your timed queries in this forum.
Slide 12: Acknowledgement	Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. More information on this mission is available at this link.
	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.

Contributors and Content Editors

Nancyvarkey, Nirmala Venkat