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

[box type=”info” align=”” class=”” width=””]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.

[/box]

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
2. Tambahkan icon tersebut ke dalam folder mipmap dengan cara klik kanan project pilih New – Image Asset

   

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.

   

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

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