Nusagatizen

Cara Membuat Dropdown Menggunakan Spinner di Android Studio

Ahmad Budairi

5.525 2 menit dibaca

Daftar Isi

0.1 Daftar Isi Catatan

1 Pengertian Dropdown dan Spinner
2 Menambahkan Spinner di Dalam Layout
3 Membuat Custom Style untuk Spinner
- 3.1 Menambahkan Gambar Icon
- 3.2 Membuat Drawable Style
4 Menginisiasi Spinner di Activity
5 Membuat Adapter dan Mengisi Data Spinner
6 Output Pada Emulator

Daftar Isi Catatan

Pengertian Dropdown dan Spinner
Menambahkan Spinner di Layout
Menginisiasi Spinner di Activity
Membuat Custom Style Spinner
1. Menambahkan Gambar Icon
2. Membuat Drawable Style
Menginisiasi Spinner di Activity
Membuat Adapter dan Mengisi Data Spinner
Output di Emulator

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" />

<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:

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.
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.
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

Siapkan sebuah gambar arrow down. Misalnya seperti ini
Tambahkan icon tersebut ke dalam folder mipmap dengan cara klik kanan project pilih New – Image Asset
Menambahkan Image Assets di Android Studio
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
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:

Buat sebuah file drawable dengan cara klik kanan folder drawable yang terletak di dalam folder res. Pilih New – Drawable resource file
Beri nama file tersebut dengan style_spinner

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>

<?xml version="1.0" encoding="UTF-8"?>

<item>

<layer-list>

<item>

<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>

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>

<?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.

Deklarasikan variabel Spinner di dalam Activity Spinner spinner;
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:

Tambahkan data berikut ke dalam strings.xml yang terletak di dalam folder res – values

<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>

<string-array name="nama_bulan">

<item>Januari</item>

<item>Februari</item>

<item>Maret</item>

<item>April</item>

<item>Agustus</item>

<item>September</item>

<item>Oktober</item>

<item>November</item>

<item>Desember</item>

</string-array>

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);

1 2	ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.nama_bulan, android.R.layout.simple_spinner_item);

Tambahkan style untuk tampilan item Spinner dengan kode

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

1

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

Pasang adapter tersebut ke dalam Spinner dengan kode

spinner.setAdapter(adapter);

1	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);

    }
}

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:

Buat sebuah ArrayList baru di Activity dengan kode seperti di bawah ini

ArrayList<String> nama_bulan = new ArrayList<String>();

1

ArrayList<String> nama_bulan = new ArrayList<String>();
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);

1

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, nama_bulan);

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");

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");

Pasangkan adapter ke dalam Spinner

spinner.setAdapter(adapter);

1	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);

    }
}

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"
    }]
}

{

"result": [{

"id": "2",

"nama": "COD0"

}, {

"id": "4",

"nama": "CASH"

}, {

"id": "5",

"nama": "Utang"

}]

}

Langkah-langkah menambahkan data Spinner dari server:

Deklarasikan variabel url json yang berada di server.

String url = "http://url_json_di_server.com";

1

String url = "http://url_json_di_server.com";

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);

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();

1	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);


    }
}

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 Strings.xml dan ArrayList Statis

Demikian catatan singkat mengenai cara membuat dropdown menggunakan Spinner di Android.

Pencarian Terkait:

Kata Kunci

7 komentar

Misael Rikky berkata:

19 Mei 2018 pukul 16:52

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. 😀

Balas
1. Ahmad Budairi berkata:
  
  20 Mei 2018 pukul 02:37
  
  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
  
  Balas
  1. Misael Rikky berkata:
    
    20 Mei 2018 pukul 11:09
    
    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 😀
    
    Balas
    1. Ahmad Budairi berkata:
      
      20 Mei 2018 pukul 14:12
      
      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:
      
      Koneksi HTTP
      
      Parse Json
      
      Membuat Arraylist dan Adapter
      
      Balas
Galang Yudha berkata:

4 Desember 2018 pukul 14:20

gan klo bikin 2 spinner bisa tidak

Balas
1. Ahmad Budairi berkata:
  
  6 Desember 2018 pukul 06:04
  
  Bisa, gan. Tinggal tambahkan 2 spinner dan buat dua adapter.
  
  Balas
Ryzky Mahesa berkata:

18 Mei 2019 pukul 19:28

Gan saya punya beberapa pertanyaan, saya masih baru belajar 🙏🏻
klo cara mengubah isi data spinner nya menjadi angka itu gimana ya?
misal seperti ini,
nama yang tampil di spinner nya “Desember” tetapi ketika di klik isi datanya adalah nomor 12,
klo seperti itu apakah bisa secara offline atau harus terhubung ke server database?
🙏🏻🙏🏻🙏🏻

Balas