Difference between revisions of "Android-app-using-Kotlin/C2/Adding-spinner-and-Image/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with " {| style="border-spacing:0;" | style="background-color:#c0c0c0;border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| <cent...")
 
 
Line 89: Line 89:
 
Now let us align the '''constraints''' as shown.
 
Now let us align the '''constraints''' as shown.
  
Let’s click on this '''TextView''' and change the '''text''' '''attribute''' as '''Department.'''
+
Click on this '''TextView''' and change the '''text''' '''attribute''' as '''Department.'''
  
 
|-
 
|-
Line 119: Line 119:
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the spinner
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Point to the spinner
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Now this '''Spinner''' is empty.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| This '''Spinner''' is empty now.
  
 
It does not have any items to show the user.
 
It does not have any items to show the user.
Line 128: Line 128:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Go to '''FirstActivity.kt'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| For this, go to '''FirstActivity.kt.'''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| For this, go to '''FirstActivity.kt.'''
 +
 +
Type as shown.
  
 
|-
 
|-
Line 133: Line 135:
  
 
'''var dept = " "'''
 
'''var dept = " "'''
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will add a new''' variable dept''' to store the department details.
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| We will add a new''' variable d e p t''' to store the department details.
  
 
Type as shown.
 
Type as shown.
Line 194: Line 196:
 
Select '''Implement members '''from the available list.
 
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.
 
A new window opens with the list of Implement members.
  
Select all the suggested methods by pressing the shift key and press Ok.
+
Select all the suggested methods by pressing the '''Shift''' key and press '''Ok'''.
  
 
Now the required '''methods''' are added automatically.
 
Now the required '''methods''' are added automatically.
Line 279: Line 281:
 
Then select a department from the drop-down menu.
 
Then select a department from the drop-down menu.
  
Click on the '''Click Here''' button.
+
Click on the '''CLICK HERE''' button.
  
 
|-
 
|-
Line 316: Line 318:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Some default '''built-in''' images are provided by '''Android studio. '''
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| 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.
+
These are available in the '''Drawable''' and '''Color''' folders on the top left side panel.
  
 
|-
 
|-
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the images under each folder
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Show the images under each folder
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Image files are available under the sub-folders '''project''', '''android''' and '''theme''' '''attributes.'''
+
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Image files are available under the sub-folders '''Project''', '''android''' and '''Theme attributes.'''
  
 
|-
 
|-
Line 333: Line 335:
  
 
Now the image is added to the '''Registration Form.'''
 
Now the image is added to the '''Registration Form.'''
 +
 +
Align the '''constraints''' of the image view as shown here.
  
 
|-
 
|-
Line 338: Line 342:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will see how to add a custom image.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Next we will see how to add a custom image.
  
For demonstration purpose, I’ll show how to add '''Spoken Tutorial logo '''image'''.'''
+
For demonstration purpose, I’ll show how to add '''Spoken Tutorial logo '''image.
  
 
|-
 
|-
Line 350: Line 354:
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy the '''st-logo.png''' file.
 
| style="border:1pt solid #000001;padding-top:0cm;padding-bottom:0cm;padding-left:0.206cm;padding-right:0.191cm;"| Copy the '''st-logo.png''' file.
  
Go back to the '''Android studio interface.'''
+
Go back to the '''Android Studio interface.'''
  
 
|-
 
|-

Latest revision as of 18:17, 3 April 2019

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.

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 This Spinner is empty now.

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

Type,

var dept = " "

We will add a new variable d e p t 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.


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.

Align the constraints of the image view as shown here.

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.
  1. Add your photo to the ImageView
  2. 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