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

From Script | Spoken-Tutorial
Revision as of 16:18, 13 October 2020 by PoojaMoolya (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search
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