Spinner atau lebih familiar di panggil widget dropdown di android merupakan sebuah fitur yang sangat bermanfaat untuk menampilkan atau memilih data yang sifatnya statis seperti data agama atau pendidikan yang notabene data yang ditampilkan tidak berubah-ubah. Biasanya data tersebut di tulis pada file string.xml dalam bentuk string-array . Contoh adalah sebagai berkut
string.xml:
<string-array name="data_pendidikan"> <item>SD</item> <item>SMP</item> <item>SMA</item> <item>D1</item> <item>D2</item> <item>D3</item> </string-array>
layout:
<Spinner android:id="@+id/spinnerPendidikan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:entries="@array/data_pendidikan" />
Pada baris kode string.xml diatas diinisialisasikan string-array dengan nama “data_pendidikan” kemudian pada baris layout ada spinner dengan id “spinnerPendidikan” dimana datanya diambil langsung ke string.xml dengan menambahkan baris kode android:entries=”@array/data_pendidikan”. Dengan begitu data dalam bentuk drop down akan muncul di spinner pendidikan.
Nah, pertanyaannya bagaimana jika spinnernya tersebut merupakan data yang dinamis? tentu saja jawabnya adalah mengambil data dari database baik database Sqlite atau MySQL kemudian data tersebut di push ke spinner. Implementasi atau manfaat dari penggunaan spinner jenis ini menyesuaikan dengan kebutuhan contoh sederhananya adalah pada data spinner yang bersifat bisa bertambah atau berkurang. Agar tidak panjang lebar mari ikut prosedur atau langkah-langkah menampilkan data dari database MySql ke spinner android.
Menyiapkan Database
- Buat database dengan nama db_siswa
- Buat tabel dengan nama tb_data_siswa
- Kolom pada tb_data_siswa: id_siswa (int,primary_key,auto_increment), nama (varchar(50), allow null)
- Isikan datanya secara manual. Untuk menampilkan data ke dalam bentuk listview bisa mengikuti tutorial disni
- Untuk yang tidak mau ribet database bisa di download disini
- Perhatikan Masing – masing gambar dibawah ini
Design Tabel | Contoh Isi Tabel |
![]() | ![]() |
Menyiapkan Webservice
- Buat folder baru di xampp/htdocs dengan nama : ws_siswa
- Membuat file koneksi ke database: koneksi.php –> DOWNLOAD
- Membuat file untuk mengambil data : siswaManager.php –> DOWNLOAD
- Perhatikan masing – masing gambar di bawah ini
Baris kode koneksi.php | Baris kode siswaManager.php |
![]() | ![]() |
Struktur file ws_siswa | hasil JSON |
![]() | ![]() |
Implementasi Android
- Buat project android baru dengan nama package “com.theheran.spinnermysql”. Klik disini untuk lebih detail
- Buat class baru dengan nama ModelSiswa.java –>DOWNLOAD
- Buat class baru dengan nama ServiceHandler.java –> DOWNLOAD
- Buka layout/activity_main.xml dan lakukan modifikasi sehingga seperti baris kode dibawah ini. Ohya, ubah text “hello_word” yang ada pada value/string.xml menjadi “Menampilkan Data Dari Database MySQL ke Spinner” atau sesuai dengan kenginan anda.
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">SpinnerMySQL</string> <string name="hello_world">Menampilkan Data Dari Database MySQL ke Spinner</string> <string name="action_settings">Settings</string> </resources>
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="10dp" tools:context="com.theheran.spinnermysql.MainActivity" > <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="@string/hello_world" android:textSize="17dp" android:textStyle="bold" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignRight="@+id/textView2" android:layout_below="@+id/textView2" android:layout_marginTop="41dp" android:onClick="LoadData" android:text="Tampilkan Data" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/button1" android:layout_alignRight="@+id/button1" android:layout_below="@+id/button1" android:layout_marginTop="16dp" android:text="Spinner Data Siswa" android:textAppearance="?android:attr/textAppearanceMedium" /> <Spinner android:id="@+id/spinner1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_below="@+id/textView1" /> </RelativeLayout>
- Buka file MainActivity.java dan ketikkan kode di bawah ini
package com.theheran.spinnermysql; import java.util.ArrayList; import java.util.List; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android.app.Activity; import android.app.ProgressDialog; import android.os.AsyncTask; import android.os.Bundle; import android.util.Log; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.ArrayAdapter; import android.widget.Spinner; import android.widget.Toast; public class MainActivity extends Activity { /* Author : www.theheran.com | [email protected] PIN BBM: 571078A7 */ Spinner spinnerSiswa; //Ganti "KETIK_IP_DISINI" dengan IP yg di dijadikan laptop. ex: 192.168.1.10 private static String URL="http://KETIK_IP_DISINI/ws_siswa/"; ProgressDialog pDialog; JSONArray JsonArraySiswa = null; List<String> valueIdSiswa = new ArrayList<String>(); List<String> valueNamaSiswa = new ArrayList<String>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); spinnerSiswa = (Spinner) findViewById(R.id.spinner1); } public void LoadData(View v){ // Menggunakan async task untuk "ngeload" data JSON new getDataSiswa().execute(); } private class getDataSiswa extends AsyncTask<Void, Void, Void> { @Override protected void onPreExecute() { super.onPreExecute(); pDialog = new ProgressDialog(MainActivity.this); pDialog.setMessage("Mohon Tunggu..."); pDialog.setCancelable(false); pDialog.show(); } @Override protected Void doInBackground(Void... arg0) { //Membuat Service "ServiceHandler" ServiceHandler sh = new ServiceHandler(); // Memanggil URL untuk mendapatkan respon data String jsonStr = sh.makeServiceCall(URL+"siswaManager.php?mode=getAllDataSiswa", ServiceHandler.GET); //siswaManager.php?mode=getAllDataSiswa Log.d("Response: ", "> " + jsonStr); if (jsonStr != null) { try { JSONObject jsonObj = new JSONObject(jsonStr); // Mendapatkan data Array JSON JsonArraySiswa = jsonObj.getJSONArray("values"); ArrayList<ModelSiswa> listDataSiswa = new ArrayList<ModelSiswa>(); listDataSiswa.clear(); //Melakukan perulangan untuk memecah data for (int i = 0; i < JsonArraySiswa.length(); i++) { JSONObject obj = JsonArraySiswa.getJSONObject(i); ModelSiswa modelSiswa = new ModelSiswa(); modelSiswa.setIdSiswa(obj.getString("id_siswa")); modelSiswa.setNama(obj.getString("nama")); listDataSiswa.add(modelSiswa); System.out.println("data "+modelSiswa.getIdSiswa()); } valueIdSiswa = new ArrayList<String>(); valueNamaSiswa = new ArrayList<String>(); for (int i = 0; i < listDataSiswa.size(); i++) { valueIdSiswa.add(listDataSiswa.get(i).getIdSiswa()); valueNamaSiswa.add(listDataSiswa.get(i).getNama()); System.out.println("data 2 "+listDataSiswa.get(i).getNama()); } System.out.println("id siswa + "+valueIdSiswa.get(0)); } catch (JSONException e) { e.printStackTrace(); } } else { Log.e("ServiceHandler", "Couldn't get any data from the url"); } return null; } @Override protected void onPostExecute(Void result) { super.onPostExecute(result); // Dismiss the progress dialog if (pDialog.isShowing()) pDialog.dismiss(); // Membuat adapter untuk spinner ArrayAdapter<String> spinnerAdapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_spinner_item, valueNamaSiswa); spinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); //Mengaitkan adapter spinner dengan spinner yang ada di layout spinnerSiswa.setAdapter(spinnerAdapter); spinnerSiswa.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<?> parentView, View selectedItemView, int position, long id) { String idSiswa = valueIdSiswa.get(position); String namaSiswa = valueNamaSiswa.get(position); Toast.makeText(MainActivity.this, "Anda Memilih ID SISWA: "+idSiswa+", Nama: "+namaSiswa, Toast.LENGTH_LONG).show(); } @Override public void onNothingSelected(AdapterView<?> parentView) { // your code here } }); } } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }
- Buka AndroidManifest.xml, tambahkan juga sebuah permission Internet seperti di bawah ini
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.theheran.spinnermysql" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="18" /> <!-- Internet permission --> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
- Selanjutnya jalankan program ke AVD atau langsung debug ke handphone. PASTIKAN variabel URL sudah di sesuaikan.
- Jika tidak ada masalah maka akan tampak seperti gambar dibawah ini
Screenshoot 1, Sebelum menekan tombol “Tampilkan Data” |
| |
![]() | ![]() |
Download Source Code untuk mengetahui passwordnya bisa invite BBM 571078A7
Baik sekian tutorial tentang cara menampilkan data dinamis berasal dari database MySql ke Spinner. Tutorial Selanjutnya adalah masih tetap tentang Spinner namun bedanya adalah asal datanya, yakni dari SqlLite.
Jika ada pertanyaan silahkan sampaikan melalui beberapa kontak yang ada di halaman ini. Recomended via BBM (Fast Respon).
Semoga bermanfaat!, Salam Hangat
theheran.com
mas itu bisa get IDnya gimana ya? kok saya error indexofbound