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

Learning Objectives

• Add a drop-down menu using Spinner
• Add an Image and
• Run the Kotlin App to see the output in an Android phone

System requirement

• Ubuntu Linux 16.04 operating system
• Android Studio version 3.x and
• Android Phone with minimum of Android OS version 4.03

Pre-requisites

• Java programming language and
• Android Studio

If not, then go through the relevant tutorials on this website.

Image

We will create this using the Spinner tool.

The label Department will be created using the TextView tool.

Click on RegistrationForm

It will take some time to load the project.

Wait until it completes loading.

Let us move the Button down to leave some space for the Department TextView and Spinner tool.

Demo of aligning the constraint

Change the text attribute as Department.

Now let us align the constraints as shown.

Click on this TextView and change the text attribute as Department.

Point to the spinner tool

Change the ID as deptSpinner.

In the Attribute window, we’ll change its ID as deptSpinner.

It does not have any items to show the user.

So, we will add a list of items through Kotlin code.

Type as shown.

var dept = " "

Type as shown.

Let us add three departments - Computer Science, Information technology and Others.

So, type this code above the button setOnClickListener function.

= ArrayAdapter(this, android.R.layout.simple_spinner_item, deptlist)

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.

deptSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener

{

override fun onNothingSelected (arg0: AdapterView<*>) {

}

override fun onItemSelected (arg0: AdapterView<*>, arg1: View, position: Int, id: Long) {

}

}

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.

dept = deptlist[position]

}

}

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.

Type the code as shown:

"\nGender : " + obtainedGender + "\nDepartment : " + obtainedDept

Show the output

Click on the Play button to run the Kotlin app.

Select gender.

Select Department

Click on the Click Here button.

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.

Welcome <name>

Gender : <gender>

Department:<dept>

To display any image in the activity, we need to use ImageView tool.

These are available in the Drawable and Color folders on the top left side panel.

Click ok

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.

For demonstration purpose, I’ll show how to add Spoken Tutorial logo image.

This file is available in the Code Files link of this tutorial. You can download and make use of it.

Go back to the Android Studio interface.

go to app => res => drawable

Right click on drawable and select Paste option.

Now go to app => res => drawable

Right click on drawable and select Paste option.

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.

This attribute gives the destination of the image.

Select the file st-logo.png

and click ok.

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 Click Here button

Type your name and select any one gender radio button.

Select a department from the drop-down list.

Click on Click Here button.

Summary

• Add a drop-down menu using Spinner
• Add an Image and
• Run the Kotlin App to see the output in an Android phone

Assignment

1. Add your photo to the ImageView
2. Run the Kotlin app to check the output.

About Spoken Tutorial project

Please download and watch it.

About workshops

conducts workshops and gives certificates on passing online test.

For more details, please write to us.

Forum for specific questions:

Acknowledgement

More information on this mission is available at

this link.

And this is Nirmala Venkat along with the Spoken Tutorial team from IIT Bombay, signing off.

Thanks for watching.