Press enter to see results or esc to cancel.

Lesson 6 – How to add Android Spinner to your App. Example

Share this

The goal of this concept is to continue practicing what has been seen until now and incorporate the Spinner visual control.

The Spinner control displays a String list and allows us to select one of them. When it is selected it opens and shows all its elements to allow one to be selected.

Create a project called Project005.


Load two numbers into controls of type EditText (“Number”). Display a message requesting the loading of the values by starting the “hint” property of each control. Have a control Spinner type that allows us to select if we want to add, subtract, multiply or divide those values. Finally, by means of a Button-type control, we perform the respective operation. We show the result in a TextView.

The new thing in this problem is the insertion of a control of type Spinner that is in the tab “Widgets”:

Lesson 6 - Control Spinner with examples - Lesson 6 - Control Spinner with examples - Lesson 6 - Control Spinner with examples -

We leave the id property with the spinner value (default value created by Android Studio when inserting the Spinner class object).

In the following image in the window “Component Tree” of Android Studio we can see the objects arranged in the form, their id, their texts and what class they are each, besides having pressed the icon “Infer Constraints“.

Source code:

package com.coding180.project001

import android.os.Bundle
import android.widget. *

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        val et1 = findViewById( as EditText
        val et2 = findViewById( as EditText
        val sp1 = findViewById( as Spinner
        val tv1 = findViewById( as TextView
        val list = arrayOf("sum", "subtract", "multiply", "divide")
        val adaptador1 = ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, lista)
        sp1.adapter = adaptador1
        val boton1 = findViewById( as Button
        boton1.setOnClickListener {
            when (sp1.selectedItem.toString()) {
                "sum" -> tv1.text = "Result: ${et1.text.toString().toInt() + et2.text.toString().toInt()}"
                "subtract" -> tv1.text = "Result: ${et1.text.toString().toInt() - et2.text.toString().toInt()}"
                "multiply" -> tv1.text = "Result: ${et1.text.toString().toInt() * et2.text.toString().toInt()}"
                "divide" -> tv1.text = "Result: ${et1.text.toString().toInt() / et2.text.toString().toInt()}"

In the onCreate method we obtain the reference to the visual control declared in the XML file (Let’s see that it is not obligatory that the name of our object named spinner1 is equal to the id defined in the visual interface called spinner):

        val sp1 = findViewById ( as Spinner

We define a vector with the list of String that will show the Spinner:

        val list = arrayOf ("add", "subtract", "multiply", "divide")

Define and create an object of class ArrayAdapter:

        val adapter1 = ArrayAdapter <String> (this, android.R.layout.simple_spinner_item, list)

To the constructor we pass as the first parameter the reference of our MainActivity (this), the second parameter indicates the type of Spinner, being the constants:


The third parameter is the reference of the vector to be displayed.

Then we assign the adapter property of Spinner the object of the ArrayAdapter class we just created:

        sp1.adapter = adapter1

In the lambda registered for button 1 we verify that item is selected in the Spinner and proceed to perform the respective operation:

        boton1.setOnClickListener {
            when (sp1.selectedItem.toString ()) {
                "add" -> tv1.text = "Result: $ {et1.text.toString () .toInt () + et2.text.toString () .toInt ()}"
                "subtract" -> tv1.text = "Result: $ {et1.text.toString () .toInt () - et2.text.toString () .toInt ()}"
                "multiply" -> tv1.text = "Result: $ {et1.text.toString () .toInt () * et2.text.toString () .toInt ()}"
                "To divide" -> tv1.text = "Result: $ {et1.text.toString () .toInt () / et2.text.toString () .toInt ()}"

In the emulator we have as a result of running the program:

Lesson 6 - Control Spinner with examples - Lesson 6 - Control Spinner with examples - Lesson 6 - Control Spinner with examples -

If we want the Spinner not to occupy the entire width we change the layout_width property to the value wrap_content.

How useful was this Lesson?

Click on a star to rate it!

Average rating / 5. Vote count:

Be the first to rate this post.!

As you found this post useful...

Follow us on social media!

We are sorry that this lesson was not useful for you!

Let us improve this lesson!

Tell us how we can improve this lesson?

Share this