Daftar Isi
Daftar Isi Catatan
- Pengertian Dropdown dan Spinner
- Menambahkan Spinner di Layout
- Menginisiasi Spinner di Activity
- Membuat Custom Style Spinner
- Menginisiasi Spinner di Activity
- Membuat Adapter dan Mengisi Data Spinner
- 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:
|
1 2 3 4 |
<Spinner android:id="@+id/nama_bulan" android:layout_width="fill_parent" android:layout_height="wrap_content" /> |
[box type=”info” align=”” class=”” width=””]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.
[/box]
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
1234567891011121314151617181920212223242526272829<?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" /><strokeandroid:width="2dp"android:color="#3bbdfa"/></shape></item><item><bitmapandroid: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.
12345678910111213<?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"><Spinnerandroid: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
1234567891011121314<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> - Buat sebuah adapter dengan kode seprti di bawah ini
12ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,R.array.nama_bulan, android.R.layout.simple_spinner_item); - Tambahkan style untuk tampilan item Spinner dengan kode
1adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); - Pasang adapter tersebut ke dalam Spinner dengan kode
1spinner.setAdapter(adapter);
Kode lengkap SpinnerActivity akan tampak seprti di bawah ini
123456789101112131415161718192021package 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;@Overrideprotected 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
1ArrayList<String> nama_bulan = new ArrayList<String>(); - Buat sebuah adapter dari ArrayList nama bulan dengan kode di bawah ini
1ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, nama_bulan); - Tambahkan list data ke dalam ArrayList nama_bulan
123456789101112nama_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
1spinner.setAdapter(adapter);
Kode lengkap SpinnerActivity.java tampak seperti di bawah ini
1234567891011121314151617181920212223242526272829303132333435package 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>();@Overrideprotected 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "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.
1String url = "http://url_json_di_server.com"; - Buat request ke server menggunakan JsonObjectRequest
123456789101112131415161718192021JsonObjectRequest request = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {@Overridepublic 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() {@Overridepublic 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
1adapter.notifyDataSetChanged();
Sehingga, kode lengkap SpinnerActivity.java untuk mengisi Spinner dari server adalah seperti di bawah ini
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758package 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>();@Overrideprotected 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>() {@Overridepublic 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() {@Overridepublic void onErrorResponse(VolleyError error) {}});RequestQueue requestQueue = Volley.newRequestQueue(SpinnerActivity.this);requestQueue.add(request);}}
Output Pada Emulator
Demikian catatan singkat mengenai cara membuat dropdown menggunakan Spinner di Android.
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. 😀
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
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 😀
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:
gan klo bikin 2 spinner bisa tidak
Bisa, gan. Tinggal tambahkan 2 spinner dan buat dua adapter.
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?
🙏🏻🙏🏻🙏🏻
Gan Mau tanya,
Saya ada spinner isinya NRP dan Nama Karyawan, ketika spiner terselect saya mau ambil NRP nya sedangkan yang tampil di display Nama, gimana cara ambil NRP nya saja. kalo pake spinner.getSelctedItem yang diambil namanya.
demikian terima kasih
Iwn