Easy Tutorial
❮ Composer Install And Usage Android Tutorial Configuration ❯

2.5.3 Basic Usage of Spinner (List Selection Box)

Category Android Basic Tutorial

Introduction:

>

Initially, this section was intended to introduce the Gallery widget, but I decided against it since it has been deprecated since Android 4.1. Even though we can use compatibility to employ Gallery, it's not recommended because Gallery recreates the view every time an image is switched, leading to significant resource waste. We can achieve Gallery-like effects using other methods, such as HorizontalScrollView for horizontal scrolling or creating a horizontal ListView. If interested, you can search for more details online.

This section focuses on the Spinner, an Adapter widget. It is used in scenarios where an app requires user input, providing a convenient alternative to typing by listing options for users to select from.

Let's dive into the basic usage of Spinner.


1. Related Attributes

>


2. Usage Example:

>

Note that Spinner defaults to selecting the first item, equivalent to calling spinner.setSelection(0), which triggers an OnItemSelectedListener event. There's no solution to prevent this initial trigger, so a workaround involves setting a boolean flag to false and checking its value in onItemSelected. If false, it indicates the default trigger and no action is taken; if true, the event is handled normally.

The example includes two different Spinners, demonstrating variations in data source and style.

Effect Diagram:

Code Implementation:

This example uses a reusable BaseAdapter.

First Spinner's data source:

Create a file myarrays.xml under res/values with the following content:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    &lt;string-array name="data">
        <item>Valor Bronze</item>
        <item>Perseverance Silver</item>
        <item>Glory Gold</item>
        <item>Noble Platinum</item>
        <item>Radiant Diamond</item>
        <item>Transcendent Master</item>
        <item>The Supreme King</item>
    </string-array>
</resources>

Second Spinner's layout: itemspinhero.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:padding="5dp">

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/iv_lol_icon1" />

    <TextView
        android:id="@+id/txt_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="15dp"
        android:text="Demacia"
        android:textSize="16sp" />

</LinearLayout>

Next, create an Entity class: Hero.java:

/**
 * Created by Jay on 2015/9/24 0024.
 */
public class Hero {

    private int hIcon;
    private String hName;

    public Hero() {
    }

    public Hero(int hIcon, String hName) {
        this.hIcon = hIcon;
        this.hName = hName;
    }

    public int gethIcon() {
        return hIcon;
    }

    public String gethName() {
        return hName;
    }

    public void sethIcon(int hIcon) {
        this.hIcon = hIcon;
    }

    public void sethName(String hName) {
        this.hName = hName;
    }
}

Finally, the layout and Java code for MainActivity:

Layout file: activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Your Ranking Tier"
        android:textColor="#44BDED"
        android:textSize="18sp" />

    <Spinner
        android:id="@+id/spin_one"
        android:layout_width="100dp"
        android:layout_height="64dp"
        android:entries="@array/data"
        android:prompt="@string/spin_title"
        android:spinnerMode="dialog" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Select Your Best Hero"
        android:textColor="#F5684A"
        android:textSize="18sp" />

    <Spinner
        android:id="@+id/spin_two"
        android:layout_width="wrap_content"
        android:layout_height="64dp" />

</LinearLayout>

MainActivity.java:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {

    private Spinner spin_one;
    private Spinner spin_two;
    private Context mContext;
    // Flag to determine if initial selection is triggered
    private boolean one_selected = false;
    private boolean two_selected = false;
    private ArrayList<Hero> mData = null;
    private BaseAdapter myAdadpter = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mContext = MainActivity.this;
        mData = new ArrayList<Hero>();
        bindViews();
    }

    private void bindViews() {
        spin_one = (Spinner) findViewById(R.id.spin_one);
        spin_two = (Spinner) findViewById(R.id.spin_two);

        mData.add(new Hero(R.mipmap.iv_lol_icon1,"Teemo"));
        mData.add(new Hero(R.mipmap.iv_lol_icon2,"Darius"));

        // Additional setup for spin_two
        // ...
    }

    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        if (parent.getId() == R.id.spin_one) {
            if (!one_selected) {
                one_selected = true;
                return;
            }
            // Handle spin_one selection
        } else if (parent.getId() == R.id.spin_two) {
            if (!two_selected) {
                two_selected = true;
                return;
            }
            // Handle spin_two selection
        }
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        // Do nothing
    }
}
mData.add(new Hero(R.mipmap.iv_lol_icon3, "Master Yi: The Wuju Bladesman (Yi)"));
mData.add(new Hero(R.mipmap.iv_lol_icon4, "Darius: The Hand of Noxus (Draven)"));
mData.add(new Hero(R.mipmap.iv_lol_icon5, "Xin Zhao: The Seneschal of Demacia (XinZhao)"));
mData.add(new Hero(R.mipmap.iv_lol_icon6, "Olaf: The Berserker (Olaf)"));

myAdadpter = new MyAdapter<Hero>(mData, R.layout.item_spin_hero) {
    @Override
    public void bindView(ViewHolder holder, Hero obj) {
        holder.setImageResource(R.id.img_icon, obj.gethIcon());
        holder.setText(R.id.txt_name, obj.gethName());
    }
};
spin_two.setAdapter(myAdadpter);
spin_one.setOnItemSelectedListener(this);
spin_two.setOnItemSelectedListener(this);

}

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
    switch (parent.getId()) {
        case R.id.spin_one:
            if (one_selected) {
                Toast.makeText(mContext, "Your rank is~: " + parent.getItemAtPosition(position).toString(),
                        Toast.LENGTH_SHORT).show();
            } else one_selected = true;
            break;
        case R.id.spin_two:
            if (two_selected) {
                TextView txt_name = (TextView) view.findViewById(R.id.txt_name);
                Toast.makeText(mContext, "The hero you selected is~: " + txt_name.getText().toString(),
                        Toast.LENGTH_SHORT).show();
            } else two_selected = true;
            break;
    }
}

@Override
public void onNothingSelected(AdapterView<?> parent) {

}
}

Regarding the Spinner's OnItemSelectedListener and how to get the value of the selected item, please refer to the code above.


3. Code Example Download:

SpinnerDemo.zip


Summary of This Section

>

Alright, this section introduced the usage of Spinner (drop-down selection box), and the example is quite interesting, haha! Don't ask me which district or what rank I am, I am the king of AI simulations, but I struggle in the bronze rank. You know why.

-1.0 Android Basic Beginner Tutorial

-1.0.1 2015 Latest Android Basic Beginner Tutorial Table of Contents

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Using Eclipse + ADT + SDK to Develop Android APP

-1.2.2 Using Android Studio to Develop Android APP

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial for Basic Local Repository Operations

-1.5.2 Git: Using GitHub to Set Up a Remote Repository

-1.6 How to Play with 9-Patch Images

-1.7 Interface Prototype Design

-1.8 Project Source Analysis (Various Files, Resource Access)

-1.9 Android Application Signing and Packaging

-1.11 Decompiling APK to Obtain Code & Resources

-2.1 Concepts of View and ViewGroup

-2.2.1 LinearLayout (Linear Layout)

-2.2.2 RelativeLayout (Relative Layout)

-2.2.3 TableLayout (Table Layout)

-2.2.4 FrameLayout (Frame Layout)

-2.2.5 GridLayout (Grid Layout)

-2.2.6 AbsoluteLayout (Absolute Layout)

-2.3.1 Detailed Explanation of TextView (Text Box)

-2.3.2 Detailed Explanation of EditText (Input Box)

-2.3.3 Button and ImageButton (Image Button)

-2.3.4 ImageView (Image View)

-2.3.5.RadioButton (Radio Button) & Checkbox (Checkbox)

-2.3.6 ToggleButton and Switch (Switch Button)

-2.3.7 ProgressBar (Progress Bar)

-2.3.8 SeekBar (Drag Bar)

-2.3.9 RatingBar (Star Rating Bar)

-2.4.1 ScrollView (Scroll Bar)

-2.4.2 Date & Time Components (Part 1)

-2.4.3 Date & Time Components (Part 2)

-2.4.4 Basic Explanation of Adapter

-2.4.5 Simple Usage of ListView

-2.4.6 Optimization of BaseAdapter

-2.4.7 Focus Issues with ListView

-2.4.8 Solving Checkbox Misalignment Issue in ListView

-2.4.9 Data Update Issues with ListView

-2.5.0 Building a Reusable Custom BaseAdapter

-2.5.1 Implementation of Multi-Layout ListView Items

-2.5.2 Basic Usage of GridView (Grid View)

-2.5.4 Basic Usage of AutoCompleteTextView (Auto-Complete Text Box)

-2.5.5 Basic Usage of ExpandableListView (Collapsible List)

-2.5.6 Basic Usage of ViewFlipper (Flip View)

-2.5.7 Basic Usage of Toast

-2.5.8 Detailed Explanation of Notification (Status Bar Notification) ```

Follow on WeChat

❮ Composer Install And Usage Android Tutorial Configuration ❯