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

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

Contributors and Content Editors

PoojaMoolya