Nusagatizen

Cara Membuat Dropdown Menggunakan Spinner di Android Studio

Daftar Isi Catatan

  1. Pengertian Dropdown dan Spinner
  2. Menambahkan Spinner di Layout
  3. Menginisiasi Spinner di Activity
  4. Membuat Custom Style Spinner
    1. Menambahkan Gambar Icon
    2. Membuat Drawable Style
  5. Menginisiasi Spinner di Activity
  6. Membuat Adapter dan Mengisi Data Spinner
    1. Mengisi data Spinner dari Strings.xml
    2. Mengisi data Spinner dari ArrayList
    3. Mengisi data Spinner dari Server
  7. Output di Emulator

Pengertian Dropdown dan Spinner

Dropdown adalah sebuah view dalam bentuk container di android yang tampil di bawah view lain ketika view tersebut menerima suatu event. Umunya adalah ketika event click atau touch. Contohnya adalah sebuah Button (tombol) yang ketika di klik menampilkan sebuah container view di bawahnya.

Spinner adalah sebuah view di android yang bisa digunakan dengan mudah untuk membuat dropdown dari sebuah dataset yang dibuat dalam sebuah array. Dataset yang ingin ditampilkan dalam spinner harus dimasukkan di dalam sebuah adapter terlebih dahulu. Dalam kata lain, untuk membuat dropdown menggunakan Spinner, kita perlu membuat sebuah adapter untuk mengadapsi sekumpulan data yang dimasukkan ke dalam array.

Menambahkan Spinner di Dalam Layout

Untuk menggunakan Spinner di Android, kita perlu menambahkan Spinner ke dalam layout yang digunakan oleh Activity. Cara yang paling umum digunakan adalah menambahkan Spinner tersebut di dalam layout xml yang terletak di dalam folder res-layout. Kode yang perlu ditambahkan untuk membuat Spinner adalah seperti di bawah ini:

<Spinner
    android:id="@+id/nama_bulan"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
Kode Spinner di atas menggunakan 3 (tiga) atribut yang penjelasannya adalah sebagai berikut:

  1. android:id="@+id/nama_bulan"

    adalah atribut id. Digunakan untuk menghandel Spinner tersebut dari dalam activity. Melalui id tersebut kita bisa menambahkan data ke dalam Spinner.

  2. android:layout_width="fill_parent"

    adalah atribut width atau lebar. Digunakan untuk menentukan lebar dropdown yang diinginkan. Value 

    fill_parent

    maksudnya adalah lebar Spinner mengikuti lebar container  induknya.

  3. android:layout_height="wrap_content"

    adalah atribut height atau tinggi. Digunakan untuk menentukan tinggi dropdown yang diinginkan. Value

    wrap_content

    maksudnya dalah tinggi spinner mengikuti tinggi content atau data yang ditambahkan pada spinner. Ilustrasinya begini: Misalnya sebuah spinner memiliki 5 item data. Setiap item tersebut masing-masing memiliki tinggi 5dp. Maka tinggi Spinner adalah 5dp x 5 = 25 dp. Tinggi Spinner tersebut adalah 25 dp. Dalam kata lain, value

    wrap_content

    digunakan untuk membuat lebar atau tinggi suatu view dinamis mengikuti content atau isinya.

Membuat Custom Style untuk Spinner

Custom style untuk spinner bisa dibuat menggunakan resource drawable. Cara membuatnya adalah sebagai berikut:

Menambahkan Gambar Icon

  1. Siapkan sebuah gambar arrow down. Misalnya seperti ini arrow down image
  2. Tambahkan icon tersebut ke dalam folder mipmap dengan cara klik kanan project pilih New – Image Asset
    Menambahkan Image Assets di Android Studio
    Menambahkan Image Assets di Android Studio
  3. Isi dengan data sebagai berikut => Icon type: Launcher Icon, Name: arrow_down, Asset Type: Image, Path: pilih lokasi gambar arrow, Shape: none. Pengaturan lainnya sesuaikan dengan keinginan kalian.
    Menambahkan Image Assets di Android Studio
    Menambahkan Image Assets di Android Studio
  4. Klik Next kemudian klik Finish.

Membuat Drawable Style

Drawable ini akan kita gunakan untuk memodifikasi tampilan Spinner yang kita buat. Cara membuat drawable style adalah sebagai berikut:

  1. Buat sebuah file drawable dengan cara klik kanan folder drawable yang terletak di dalam folder res. Pilih New – Drawable resource file
  2. Beri nama file tersebut dengan style_spinner
  3. Ganti semua kode yang di dalam style_spinner.xml dengan kode di bawah ini
    <?xml version="1.0" encoding="UTF-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item>
    
            <layer-list>
    
                <item>
                    <shape android:shape="rectangle">
                        <solid android:color="#ffffff"/>
                        <corners android:radius="7dp" />
                        <stroke
                            android:width="2dp"
                            android:color="#3bbdfa"
                            />
                    </shape>
                </item>
    
                <item>
                    <bitmap
                        android:gravity="center_vertical|right"
                        android:src="@mipmap/arrow_down"/>
                </item>
    
            </layer-list>
    
        </item>
    
    </selector>
  4. Setelah custom style selesai dibuat, selanjutnya tambahkan atribut background berikut ke dalam atribut Spinner di layout.
    android:background="@drawable/style_spinner"

    Sehingga kode lengkap untuk spinner_activity.xml adalah seperti di bawah ini.

    <?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="com.nusagates.sisteminformasicargo.Spinner">
    
        <Spinner
            android:id="@+id/nama_bulan"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/style_spinner" />
    </RelativeLayout>
    

Menginisiasi Spinner di Activity

Kita bisa menggunakan spinner yang telah ditambahkan pada layout setelah membuat inisiasi variable Spinner dan mengisi variabel tersebut dengan id spinner di layout.

  1. Deklarasikan variabel Spinner di dalam Activity
    Spinner spinner;
  2. Isi variabel tersebut dengan id Spinner dengan kode
    spinner=(Spinner)findViewById(R.id.nama_bulan);

Membuat Adapter dan Mengisi Data Spinner

Mengisi Data Spinner dari File Strings.xml

Cara menambahakan data Spinner dari strings.xml adalah sebagai berikut:

  1. Tambahkan data berikut ke dalam strings.xml yang terletak di dalam folder resvalues
    <string-array name="nama_bulan">
            <item>Januari</item>
            <item>Februari</item>
            <item>Maret</item>
            <item>April</item>
            <item>Mei</item>
            <item>Juni</item>
            <item>Juli</item>
            <item>Agustus</item>
            <item>September</item>
            <item>Oktober</item>
            <item>November</item>
            <item>Desember</item>
    </string-array>
    
  2. Buat sebuah adapter dengan kode seprti di bawah ini
    ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
                    R.array.nama_bulan, android.R.layout.simple_spinner_item);
  3. Tambahkan style untuk tampilan item Spinner dengan kode
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  4. Pasang adapter tersebut ke dalam Spinner dengan kode
    spinner.setAdapter(adapter);

    Kode lengkap SpinnerActivity akan tampak seprti di bawah ini

    package com.nusagates.sisteminformasicargo;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    
    public class SpinnerActivity extends AppCompatActivity {
    Spinner spinner;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_spinner);
            spinner=(Spinner)findViewById(R.id.nama_bulan);
            ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
                    R.array.nama_bulan, android.R.layout.simple_spinner_item);
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            spinner.setAdapter(adapter);
    
        }
    }
    

Mengisi Data Spinner dari ArrayList Statis

Cara ke dua untuk mengisi data Spinner adalah dengan membuat ArraList dan membuat adapter dari ArrayList tersebut. Cara untuk mengisi data Spinner dari ArrayList adalah sebagai berikut:

  1. Buat sebuah ArrayList baru di Activity dengan kode seperti di bawah ini
    ArrayList<String> nama_bulan = new ArrayList<String>();
  2. Buat sebuah adapter dari ArrayList nama bulan dengan kode di bawah ini
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, nama_bulan);
  3. Tambahkan list data ke dalam ArrayList nama_bulan
            nama_bulan.add("Januari");
            nama_bulan.add("Februari");
            nama_bulan.add("Maret");
            nama_bulan.add("April");
            nama_bulan.add("Mei");
            nama_bulan.add("Juni");
            nama_bulan.add("Juli");
            nama_bulan.add("Agustus");
            nama_bulan.add("September");
            nama_bulan.add("Oktober");
            nama_bulan.add("November");
            nama_bulan.add("Desember");
  4. Pasangkan adapter ke dalam Spinner
    spinner.setAdapter(adapter);

    Kode lengkap SpinnerActivity.java tampak seperti di bawah ini

    package com.nusagates.sisteminformasicargo;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    
    import java.util.ArrayList;
    
    public class SpinnerActivity extends AppCompatActivity {
        Spinner spinner;
        ArrayList<String> nama_bulan = new ArrayList<String>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_spinner);
            spinner = (Spinner) findViewById(R.id.nama_bulan);
            ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, nama_bulan);
            nama_bulan.add("Januari");
            nama_bulan.add("Februari");
            nama_bulan.add("Maret");
            nama_bulan.add("April");
            nama_bulan.add("Mei");
            nama_bulan.add("Juni");
            nama_bulan.add("Juli");
            nama_bulan.add("Agustus");
            nama_bulan.add("September");
            nama_bulan.add("Oktober");
            nama_bulan.add("November");
            nama_bulan.add("Desember");
            spinner.setAdapter(adapter);
    
        }
    }
    

Mengisi Data Spinner dari Server

Cara mengisi data Sepinner dari server bisa menggunakan Volley. Silahkan baca catatan sebelumnya mengenai Cara Parse JSON Menggunakan Volley untuk mempelajari cara menambahkan dependency Volley ke dalam project. Setelah Volley ditambahkan ke dalam project, selanjutnya kita membuat request ke server. Pada kesempatan kali ini, json yang akan diparse berupa JSON Object yang di dalamnya berisi JSON Array.

Format json tersebut adalah sebagai berikut:

{
    "result": [{
        "id": "2",
        "nama": "COD0"
    }, {
        "id": "4",
        "nama": "CASH"
    }, {
        "id": "5",
        "nama": "Utang"
    }]
}

Langkah-langkah menambahkan data Spinner dari server:

  1. Deklarasikan variabel url json yang berada di server.
    String url = "http://url_json_di_server.com";
  2. Buat request ke server menggunakan JsonObjectRequest
    JsonObjectRequest request = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
                @Override
                public void onResponse(JSONObject response) {
                    try {
                        JSONArray array = response.getJSONArray("result");
                        for(int i=0;i<array.length();i++){
                            JSONObject result = array.getJSONObject(i);
                            metode_pembayaran.add(result.getString("nama"));
                        }
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
            }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
    
                }
            });
            RequestQueue requestQueue = Volley.newRequestQueue(SpinnerActivity.this);
            requestQueue.add(request);

    Untuk memberitahu adapter bahwa ada perubahan data gunakan kode di bawah ini

    adapter.notifyDataSetChanged();

    Sehingga, kode lengkap SpinnerActivity.java untuk mengisi Spinner dari server adalah seperti di bawah ini

    package com.nusagates.sisteminformasicargo;
    
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.Spinner;
    
    import com.android.volley.Request;
    import com.android.volley.RequestQueue;
    import com.android.volley.Response;
    import com.android.volley.VolleyError;
    import com.android.volley.toolbox.JsonObjectRequest;
    import com.android.volley.toolbox.Volley;
    
    import org.json.JSONArray;
    import org.json.JSONException;
    import org.json.JSONObject;
    
    import java.util.ArrayList;
    
    public class SpinnerActivity extends AppCompatActivity {
        Spinner spinner;
        String url = "http://url_json_di_server.com";
        ArrayList<String> metode_pembayaran = new ArrayList<String>();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_spinner);
            spinner = (Spinner) findViewById(R.id.nama_bulan);
            final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, metode_pembayaran);
            spinner.setAdapter(adapter);
            JsonObjectRequest request = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
                @Override
                public void onResponse(JSONObject response) {
                    try {
                        JSONArray array = response.getJSONArray("result");
                        for(int i=0;i<array.length();i++){
                            JSONObject result = array.getJSONObject(i);
                            metode_pembayaran.add(result.getString("nama"));
                            adapter.notifyDataSetChanged();
                        }
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
            }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
    
                }
            });
            RequestQueue requestQueue = Volley.newRequestQueue(SpinnerActivity.this);
            requestQueue.add(request);
    
    
        }
    }
    

Output Pada Emulator

Output Mengisi data Spinner dari Server
Output Mengisi data Spinner dari Server
Output Mengisi Data Spinner dari Strings.xml dan ArrayList Statis
Output Mengisi Data Spinner dari Strings.xml dan ArrayList Statis
Demikian catatan singkat mengenai cara membuat dropdown menggunakan Spinner di Android.

Pencarian Terkait:

Tahukah Kamu Arti kementam?

ke·men·tam, ber·ke·men·tam v berbunyi berdentam
Kata Kunci
Selengkapnya...

Ahmad Budairi

Seorang blogger yang bekerja menjadi freelancer di bidang bahasa pemrograman. Baca biografi Ahmad Budairi atau kunjungi lapaknya di Fiverr. Kontak via email: [email protected]. Hubungi via 0822 2500 5825

4 komentar

  1. terima kasih mas, sangat bermanfaat,
    sebelumnya saya mau tanya. kalau seandainya kita coba 3 spinner. spinner 1 tanggal, yang kedua bulan bagaimana yah?
    mohon bantuannya gan. 😀

    1. Kalau tanggal dan bulan mungkin lebih eloknya pakai date picker, mas. Tapi kalau mau tetap pakai spinner konsepnya ya sama saja sih. Tanggal dan bulan disimpan di ArrayList dulu setelah itu baru dimasukkan ke masing-masing Adapternya spinner. Ini untuk memudahkan pengambilan value ketika item spinner dipilih.
      Jadi begni:
      * 2 Spinner
      * 2 ArrayList berisi koleksi tanggal dan bulan. Bagian in paling sulit kalau mau membuat tanggal dan bulan dinamis.
      * 2 Adapter

      1. aku pengennya dia terkoneksi database, jadi dia mengambil (getTanggal) tapi didalam database terdapat tahun-bulan-tanggal. tapi pas munculin di spinner mereka terpihan tahun, bulan, dan tanggalnya.
        maaf banyak pertanyaan 😀

        1. Kalau model begitu sampean nyediain datanya mending format json yang sudah dipisah menjadi 3 bagian itu. Return getTanggal() formatnya json misal: [{tgl:01,  bln: Mei, thn: 2018}]
          Ngambil data json dan parsenya bisa menggunakan Volley. Masing-masing data tanggal, bulan, dan tahun kemudian dipush ke Arraylist sekaligus memberitahu adapter kalau ada perubahan data (notifyDataSetChanged()).

          Yang perlu agan kuasai antara lain:

          1. Koneksi HTTP
          2. Parse Json
          3. Membuat Arraylist dan Adapter

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Close