Android-app-using-Kotlin/C2/Adding-spinner-and-Image/English-timed
From Script | Spoken-Tutorial
|
|
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. |