23 Apr 2017

Android Tutorial Membuat Spinner atau Combo Box menggunakan Database MySQL

By Dedy Kuncoro Android Programming Tutorial Comments

Pertama membuat database dengan nama kuncoro_spinner dengan nama tabel menu dan struktur tabelnya seperti berikut :

Column name	Data Type	lenght	Primary Key	Not Null	Auto Increment
id	int	5	v	v	v
pendidikan	varchar	30		v

Membuat web service untuk parsing data aplikasi android.
koneksi.php
Sebagai koneksi aplikasi ke database. Coding-nya disini.

menu.php
Untuk menampilkan data pendidikan. Coding-nya disini.

Buat project baru di Android Studio File ⇒ New Project. Kemudian pilih Empty Activity dan melanjutkannya hingga selesai.

activity_main.xml
Tampilan untuk menampilkan spinner berserta datannya.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="com.dedykuncoro.spinner.MainActivity">

    <TextView
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pilih Pendidikan :" />

    <Spinner
        android:id="@+id/spinner_pendidikan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/txt_hasil"
        android:layout_marginTop="10dp"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pendidikan Terakhir : -" />

</LinearLayout>

list_pendidikan.xml
Sebagai list data dari spinner.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/pendidikan"
        android:textSize="20dp"
        android:textStyle="bold"
        android:text="Pendidikan"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Buka build.gradle dan tambahkan volley library didalamnya.

compile 'com.mcxiaoke.volley:library-aar:1.0.0'

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.mcxiaoke.volley:library-aar:1.0.0' /*tambahan volley library*/
    testCompile 'junit:junit:4.12'
}

Agar project terstruktur dan terorganisir, buat package adapter, app, data. Untuk membuat paket baru , klik kanan pada src=>New=>Peckage dan memberikan nama paket . Contoh : com.dedykuncoro.spinner.

Buat class AppController.java didalam package app dan tambah coding seperti dibawah ini. Class tunggal yang menginisialisasi class global yang diperlukan. Semua objek yang berhubungan dengan volley diinisialisasi di sini.
AppController.java

package com.dedykuncoro.spinner.app;

import android.app.Application;
import android.text.TextUtils;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.Volley;

public class AppController extends Application {

	public static final String TAG = AppController.class.getSimpleName();

	private RequestQueue mRequestQueue;
	private ImageLoader mImageLoader;

	private static AppController mInstance;

	@Override
	public void onCreate() {
		super.onCreate();
		mInstance = this;
	}

	public static synchronized AppController getInstance() {
		return mInstance;
	}

	public RequestQueue getRequestQueue() {
		if (mRequestQueue == null) {
			mRequestQueue = Volley.newRequestQueue(getApplicationContext());
		}

		return mRequestQueue;
	}

	public <T> void addToRequestQueue(Request<T> req, String tag) {
		req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
		getRequestQueue().add(req);
	}

	public <T> void addToRequestQueue(Request<T> req) {
		req.setTag(TAG);
		getRequestQueue().add(req);
	}

	public void cancelPendingRequests(Object tag) {
		if (mRequestQueue != null) {
			mRequestQueue.cancelAll(tag);
		}
	}
}

Buat class Data.java didalam package data dan tambahkan coding seperti dibawah ini. Class ini berfungsi sebagai membuat objek untuk setiap item yang diparsing JSON. Objek ini berisi informasi seperti id, pendidikan.
Data.java

package com.dedykuncoro.spinner.data;

/**
 * Created by KUNCORO on 23/04/2017.
 */

public class Data {
    private String id, pendidikan;

    public Data() {
    }

    public Data(String id, String pendidikan) {
        this.id = id;
        this.pendidikan = pendidikan;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getPendidikan() {
        return pendidikan;
    }

    public void setPendidikan(String pendidikan) {
        this.pendidikan = pendidikan;
    }

}

Buat class Adapter.java didalam package adapter dan tambahkan coding seperti dibawah ini. Class ini berfungsi sebagai menampilkan data seperti id, pendidikan kemudian ditampilkan ke dalam spinner.
Adapter.java

package com.dedykuncoro.spinner.adapter;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.dedykuncoro.spinner.R;
import com.dedykuncoro.spinner.data.Data;

import java.util.List;

/**
 * Created by KUNCORO on 23/04/2017.
 */

public class Adapter extends BaseAdapter {
    private Activity activity;
    private LayoutInflater inflater;
    private List<Data> item;
    
    public Adapter(Activity activity, List<Data> item) {
        this.activity = activity;
        this.item = item;
    }

    @Override
    public int getCount() {
        return item.size();
    }

    @Override
    public Object getItem(int location) {
        return item.get(location);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        if (inflater == null)
            inflater = (LayoutInflater) activity
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (convertView == null)
            convertView = inflater.inflate(R.layout.list_pendidikan, null);

        TextView pendidikan = (TextView) convertView.findViewById(R.id.pendidikan);

        Data data;
        data = item.get(position);

        pendidikan.setText(data.getPendidikan());

        return convertView;
    }
}

Buka MainActivity.java dan tambahkan coding seperti dibawah ini. Class ini digunakan untuk request data ke server kemudian menampilkannya ke dalam spinner.
MainActivity.java

package com.dedykuncoro.spinner;

import android.app.ProgressDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.JsonArrayRequest;
import com.dedykuncoro.spinner.adapter.Adapter;
import com.dedykuncoro.spinner.app.AppController;
import com.dedykuncoro.spinner.data.Data;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    TextView txt_hasil;
    Spinner spinner_pendidikan;
    ProgressDialog pDialog;
    Adapter adapter;
    List<Data> listPendidikan = new ArrayList<Data>();

    // sesuaikan dengan IP Address PC/laptop atau ip address emulator android 10.0.2.2
    public static final String url = "http://10.0.2.2/android/kuncoro_spinner/menu.php";

    private static final String TAG = MainActivity.class.getSimpleName();

    public static final String TAG_ID = "id";
    public static final String TAG_PENDIDIKAN = "pendidikan";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        txt_hasil = (TextView) findViewById(R.id.txt_hasil);
        spinner_pendidikan = (Spinner) findViewById(R.id.spinner_pendidikan);

        spinner_pendidikan.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                // TODO Auto-generated method stub
                txt_hasil.setText("Pendidikan Terakhir : " + listPendidikan.get(position).getPendidikan());
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                // TODO Auto-generated method stub

            }
        });

        adapter = new Adapter(MainActivity.this, listPendidikan);
        spinner_pendidikan.setAdapter(adapter);

        callData();

    }

    private void callData() {
        listPendidikan.clear();

        pDialog = new ProgressDialog(MainActivity.this);
        pDialog.setCancelable(false);
        pDialog.setMessage("Loading...");
        showDialog();

        // Creating volley request obj
        JsonArrayRequest jArr = new JsonArrayRequest(url,
                new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        Log.e(TAG, response.toString());

                        // Parsing json
                        for (int i = 0; i < response.length(); i++) {
                            try {
                                JSONObject obj = response.getJSONObject(i);

                                Data item = new Data();

                                item.setId(obj.getString(TAG_ID));
                                item.setPendidikan(obj.getString(TAG_PENDIDIKAN));

                                listPendidikan.add(item);
                            } catch (JSONException e) {
                                e.printStackTrace();
                            }
                        }

                        // notifying list adapter about data changes
                        // so that it renders the list view with updated data
                        adapter.notifyDataSetChanged();

                        hideDialog();
                    }
                }, new Response.ErrorListener() {

            @Override
            public void onErrorResponse(VolleyError error) {
                VolleyLog.e(TAG, "Error: " + error.getMessage());
                Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH_LONG).show();
                hideDialog();
            }
        });

        // Adding request to request queue
        AppController.getInstance().addToRequestQueue(jArr);
    }

    private void showDialog() {
        if (!pDialog.isShowing())
            pDialog.show();
    }

    private void hideDialog() {
        if (pDialog.isShowing())
            pDialog.dismiss();
    }

}

Tambahkan beberapa perijinan pada AndroidManifest.xml seperti dibawah ini :
AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.dedykuncoro.spinner">

    <uses-permission android:name="android.permission.INTERNET"/> <-- tambahan -->

    <application
        android:name=".app.AppController" <-- tambahan -->
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Run Aplikasinya.

Download Source Code :

Please share 🙂