Tutorial Cara Membuat Spinner di Android dengan Android Studio

Last Updated on 8 years by Mas Herdi

Yo semua, kali ini saya akan membuat series baru yang berisi tentang tutorial basic layout di Android, dengan menggunakan Android Studio. Kali ini yang akan dibahas adalah tentang cara membuat Spinner di Android. Spinner adalah salah satu view yang cukup sering kita lihat penggunaannya di hampir semua aplikasi Android. Spinner berbentuk list dropdown berisi item-item yang bisa kita pilih. Spinner biasa digunakan untuk memudahkan pengguna memilih salah satu value dari sebuah list/array yang disajikan dengan cepat.

Tutorial Cara Membuat Spinner di Android dengan Android Studio

Oke, langsung saja kita mulai codingnya. 😀 Perlu diketahui, ada dua cara untuk membuat Spinner di Android berdasarkan sumber data yang ingin ditampilkan. Yang pertama, data array disimpan pada file resource xml dalam bentuk string-array. Cara ini berguna jika value list pada Spinner bersifat statis/tidak sering diubah-ubah. Sedangkan cara kedua membuat Spinner di Android adalah dengan cara data array disimpan langsung pada file Java, dalam bentuk String array ataupun String ArrayList. Cara kedua ini berguna jika data yang hendak kita sajikan bersifat dinamis atau dapat berubah-ubah. Misal kita harus fetch array dari server terlebih dahulu sebelum menampilkannya pada Spinner. Kedua cara ini akan saya bahas satu persatu. 🙂

Membuat Spinner dengan data string-array di XML

Kita akan membahas cara pertama terlebih dahulu, yaitu membuat Spinner dengan data list-nya disimpan di file XML sebagai string-array. Pertama-tama, seperti biasa kita akan membuat project baru di Android Studio terlebih dahulu.

Setelah itu, kita buka file strings.xml pada folder res/values, dan kita masukkan string-array sebagai berikut :

    <string-array name="german_familienname">
        <item>Fischer</item>
        <item>Bauer</item>
        <item>Scheider</item>
        <item>Jäger</item>
        <item>Müller</item>
        <item>Schulz</item>
        <item>Neumann</item>
        <item>Schwarz</item>
        <item>Lange</item>
        <item>Köhler</item>
        <item>Schumacher</item>
    </string-array>

Langkah selanjutnya, pada layout activity_main.xml kita tambahkan sebuah Spinner view dan sebuah tombol, hingga menjadi seperti di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:paddingStart="50dp"
    android:paddingEnd="50dp"
    android:paddingLeft="50dp"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Spinner
        android:padding="20dp"
        android:id="@+id/sp_name"
        android:entries="@array/german_familienname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></Spinner>

    <Button
        android:id="@+id/bt_check"
        android:text="Submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Kemudian, bagaimana cara mengambil value yang terpilih pada Spinner? Caranya sangat gampang, kita akan buka file MainActivity.java dan melakukan logic codingnya di sana. Jadi flow nya adalah kita memilih value yang ada pada Spinner tersebut, kemudian ketika Button diklik, maka akan memunculkan nama value yang kita pilih.

Berikut adalah contoh codingannya pada MainActivity.java.

/**
 * Created by Hafizh Herdi on 8/15/2016.
 */
public class MainActivity extends AppCompatActivity {

    private Spinner spNamen;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spinner);
        spNamen = (Spinner) findViewById(R.id.sp_name);

        Button btSpinner = (Button) findViewById(R.id.bt_check);
        btSpinner.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(TWOHLayoutSpinner.this, "Selected "+ spNamen.getSelectedItem().toString(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Yup, hanya seperti itu saja :). Karena Spinner tersebut sudah terisi list dari XML, maka saat kita melakukan klik Button, kita cukup memanggil method getSelectedItem() yang otomatis akan mengambil item mana yang sedang dipilih pengguna dan mengubahnya ke String dengan method toString(). Kemudian cara yang kedua :

Membuat Spinner dengan data dinamis berupa String Array/ ArrayList

Jika menggunakan cara yang kedua, kita tidak perlu menambahkan string-array pada xml resource, karena data list untuk Spinner akan kita dapatkan dari Activity nya langsung berupa Array/ArrayList. Namun sebagai gantinya, kita akan menggunakan SpinnerAdapter, yang berfungsi untuk mengolah data array string tersebut supaya bisa ditampilkan di Spinner.

Pertama-tama, mari kita tambahkan satu lagi Spinner view pada activity_main.xml :

    <Spinner
        android:padding="20dp"
        android:id="@+id/sp_name_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></Spinner>

Perlu diperhatikan, Spinner di atas tidak mempunyai atribut android:entries karena kita tidak menggunakan atribut itu untuk memasukkan data di Spinner, berbeda seperti di cara pertama.

Adapun main codingannya pada file MainActivity.java adalah seperti berikut :

/**
 * Created by Hafizh Herdi on 8/15/2016.
 */
public class MainActivity extends AppCompatActivity {

    private Spinner spNamen2;
    private String[] germanFeminine = {
            "Karin",
            "Ingrid", "Helga",
            "Renate",
            "Elke",
            "Ursula",
            "Erika",
            "Christa",
            "Gisela",
            "Monika"
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spinner);

        spNamen2 = (Spinner) findViewById(R.id.sp_name_2);

        // inisialiasi Array Adapter dengan memasukkan string array di atas
        final ArrayAdapter<String> adapter = new ArrayAdapter<>(this,
                android.R.layout.simple_spinner_item, germanFeminine);

        // mengeset Array Adapter tersebut ke Spinner
        spNamen2.setAdapter(adapter);

        // mengeset listener untuk mengetahui saat item dipilih
        spNamen2.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                // memunculkan toast + value Spinner yang dipilih (diambil dari adapter)
                Toast.makeText(TWOHLayoutSpinner.this, "Selected "+ adapter.getItem(i), Toast.LENGTH_SHORT).show();
            }

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

            }
        });
    }
}

Jika kita lihat pada codingan di atas, hal yang baru adalah adanya String[] array yang berisi data yang nantinya akan kita gunakan di Spinner. Dan jangan lupa untuk memasukkan array String tersebut ke dalam Spinner, kita harus menggunakan ArrayAdapter. Setelah itu kita akan mengeset OnItemSelectedListener() pada Spinner. Supaya kita dapat memonitor state Spinner saat user selesai memilih sebuah item pada Spinner. Dalam kasus ini akan memunculkan sebuah Toast yang berisi value item Spinner yang dipilih.

Demo

Oke, langsung saja untuk demonya :

Cara 1 :

Demo memilih value pada Spinner XML (cara 1) | (c) Instagram

Cara 2 :

Demo memilih value pada Spinner Array String (cara 2) | (c) Instagram

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.