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