Langkah dan Cara Membuat Spinner di Android Studio

Spinner Android Studio

Spinner merupakan sebuah drop down menu yang dapat memiliki banyak item, seorang pengguna dapat memilih hanya satu item diantara item-item yang tersedia. Dalam pembahasan "Mengenal Layout di Android Studio" pada postingan sebelumnya, elemen Spinner ini beberapa kali digunakan sebagai contoh isi dalam penerapan layout.

Disini akan ditutorialkan pembuatan Spinner baik melalui XML Resource ataupun tidak melaui Resource (dibuat secara terprogram pada sebuah file java ). Tentunya persiapkan terlebih dahulu project Anda. Pembahasan mengenai membuat sebuah project bisa Anda temukan di blog ini.

Spinner Melalui XML Resource

Seperti biasanya, disini saya pakai proyekpertama sebagai contoh dalam pembahasan ini. Setelah proyek Anda ready, buka activity_main.xml, untuk membuat Spinner panggil dengan tag <Spinner. Tentukan atribut-atribut ukuran, letak dan lain sebagainnya untuk spinner tersebut, kemudian tambahkan atribut android:entries dan beri nama array/sahamPerbankan. Sehingga akan menjadi android:entries="@array/sahamPerbankan". Atribut ini digunakan untuk memanggil item-item pada array tersebut untuk ditempatkan pada Spinner.

Pada atribut entries tersebut akan digaris bawahi warna merah, karena memang resource aray/sahamPerbankan belum dibuat sebelumnya. Arahkan mouse Anda pada tulisan sahamPerbankan lalu klik create array value resource 'sahamPerbankan', setelah itu akan muncul tab konfigurasi; tidak usah di apa-apakan langsung saja klik OK, kita akan mengaturnya nanti.

Lalu tambahkan sebuah Button (tombol) dibawah Spinner tersebut. Fungsi tombol ini adalah sebagai event pelaksanaan saat sebuah item dipilih. Berikut kode lengkap pada activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/spinner_perbankan"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:textSize="16sp"/>

    <TextView
        android:id="@id/text2"
        android:layout_below="@id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:textSize="20sp"
        android:text="Kode Saham"/>

    <Spinner
        android:id="@+id/spinner"
        android:layout_below="@id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:entries="@array/sahamPerbankan" />

    <Button
        android:id="@+id/buttonGo"
        android:layout_below="@id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:text="Show"/>

</RelativeLayout>

Pada saat Anda melakukan langkah create array value resource 'sahamPerbankan', seacara otomatis terbuat file resource array.xml yang berada pada folder res > value > arrays.xml. Buka file arrays.xml tersebut, kemudian gantikan <string-array name="sahamPerbankan"/> dengan kode dibawah ini :

<string-array name="sahamPerbankan">
        <item>BBRI</item>
        <item>BBNI</item>
        <item>BBCA</item>
        <item>BDMN</item>
        <item>BNLI</item>
        <item>BJBR</item>
        <item>BJTM</item>
        <item>BNII</item>
        <item>BMRI</item>
    </string-array>

Sampai disini, Spinner sudah berhasil dibuat. Namun, saat item dipilih dan tombol di klik tidak memperlihatkan apa-apa alias nothing happen. Agar sesuatu terjadi saat item dipilih dan tombol diklik, kita perlu melakukan sesuatu pada MainActivity.java. Disini akan dibuat pesan toast, saat sebuah item dipilih akan menampilkan pesan toast informasi tentang masing-masing item kode saham.

Berikut kode lengkap pada MainActivity.java :

package com.example.proyekpertama;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String sahamBank;

    @Override    

        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        /* Mendapatkan id dari spinner memanggil resourece dari item dan membuat adapter untuk spinner */        

        final Spinner saham = findViewById(R.id.spinner);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this,
                android.R.layout.simple_list_item_1,
                getResources().getStringArray(R.array.sahamPerbankan));
        saham.setAdapter(adapter);

        /* mendapatkan id dari tombol */

        Button tombol = findViewById(R.id.buttonGo);

        /* Agar setiap item yang dipilih muncul pada halaman */

        saham.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override

            public void onItemSelected(AdapterView<?> parent,
                        View view, int position, long l) {
                        sahamBank = (String)saham.getSelectedItem();
            }
            @Override

            public void onNothingSelected(AdapterView<?> adapterView) {
            }
        });

        /* Memunculkan aksi saat item dipilih dan tombol di klik */

       tombol.setOnClickListener(new View.OnClickListener() {
              @Override            

              public void onClick(View v) {
                switch(sahamBank){
                    case "BBRI":
                        Toast.makeText(MainActivity.this,
                                "BBRI adalah kode saham dari Bank Rakyat Indonesia",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BBNI":
                        Toast.makeText(MainActivity.this,
                                "BBNI adalah kode saham dari Bank Negara Indonesia",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BBCA":
                        Toast.makeText(MainActivity.this,
                                "BBCA adalah kode saham dari Bank Central Asia",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BDMN":
                        Toast.makeText(MainActivity.this,
                                "BDMN adalah kode saham dari Bank Danamon",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BNLI":
                        Toast.makeText(MainActivity.this,
                                "BNLI adalah kode saham dari Bank Permata",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BJBR":
                        Toast.makeText(MainActivity.this,
                                "BJBR adalah kode saham dari Bank Jawa Barat",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BJTM":
                        Toast.makeText(MainActivity.this,
                                "BJTM adalah kode saham dari Bank Jawa Timur",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BNII":
                        Toast.makeText(MainActivity.this,
                                "BNII adalah kode saham dari Bank Maybank",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BMRI":
                        Toast.makeText(MainActivity.this,
                                "BMRI adalah kode saham dari Bank Mandiri",
                                Toast.LENGTH_LONG).show();
                        break;
                }
            }
        });

    }
}

Berikutnya adalah testing aplikasi. Dibawah ini sebuah video pendek saat aplikasi di running pada Android Smartphone.

Spinner Melalui Java 

Pertama-tama hapus terlebih dahulu atribut android:entries="@array/sahamPerbankan" pada activity_main.xml yang dibuat tadi. Hapus juga resource file arrays.xml (bisa juga tidak di hapus kalau Anda mau). Kemudian untuk membuat spinner langsung pada file java tidak begitu sulit jika kita sudah paham, namun juga tidak terlalu mudah jika kita belum begitu paham. Anda hanya perlu menambahkan  string-array dengan class String seperti berikut :

String[] sahamPerbankan = {"BBRI","BBNI","BBCA","BDMN","BNLI","BJBR","BJTM","BNII","BMRI"};

Lalu mengganti beberapa kode dan metode yang ada pada file MainActivity.java diatas. Berikut ini kode lengkapnya :

package com.example.proyekpertama;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String[] sahamPerbankan = {"BBRI","BBNI","BBCA","BDMN","BNLI","BJBR","BJTM","BNII","BMRI"};
    String sahamBank;

    @Override

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        final Spinner saham = findViewById(R.id.spinner);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(MainActivity.this,
                android.R.layout.simple_list_item_1, sahamPerbankan);
        saham.setAdapter(adapter);
        
        Button tombol = findViewById(R.id.buttonGo);
        
        saham.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override

            public void onItemSelected(AdapterView<?> parent,
                                       View view, int position, long l) {
                sahamBank = (String)saham.getSelectedItem();
            }
            @Override

            public void onNothingSelected(AdapterView<?> adapterView) {
            }
        });
        
        tombol.setOnClickListener(new View.OnClickListener() {
            @Override

            public void onClick(View v) {
                switch(sahamBank){
                    case "BBRI":
                        Toast.makeText(MainActivity.this,
                                "BBRI adalah kode saham dari Bank Rakyat Indonesia",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BBNI":
                        Toast.makeText(MainActivity.this,
                                "BBNI adalah kode saham dari Bank Negara Indonesia",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BBCA":
                        Toast.makeText(MainActivity.this,
                                "BBCA adalah kode saham dari Bank Central Asia",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BDMN":
                        Toast.makeText(MainActivity.this,
                                "BDMN adalah kode saham dari Bank Danamon",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BNLI":
                        Toast.makeText(MainActivity.this,
                                "BNLI adalah kode saham dari Bank Permata",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BJBR":
                        Toast.makeText(MainActivity.this,
                                "BJBR adalah kode saham dari Bank Jawa Barat",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BJTM":
                        Toast.makeText(MainActivity.this,
                                "BJTM adalah kode saham dari Bank Jawa Timur",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BNII":
                        Toast.makeText(MainActivity.this,
                                "BNII adalah kode saham dari Bank Maybank",
                                Toast.LENGTH_LONG).show();
                        break;
                    case "BMRI":
                        Toast.makeText(MainActivity.this,
                                "BMRI adalah kode saham dari Bank Mandiri",
                                Toast.LENGTH_LONG).show();
                        break;
                }
            }
        });
    }
}

Sekarang coba jalankan aplikasi, maka hasilnya akan sama seperti demo video diatas (harusnya sama). Baik, terima kasih sudah meluangkan waktu membaca-baca. Jika ada pertanyaan atau kritik saran bisa di posting melalui komentar atau kontak lain yang bisa dilihat pada halaman Contact.