Hai sobat blog setya aji, kembali lagi dengan saya di tutorial android. Pada tutorial sebelumnya yang berjudul Menampilkan Data dari Database MySQL ke Aplikasi Android dengan Volley, saya telah jelaskan bagaimana membuat database server data dan mengambil data tersebut kemudian menampilkannya di aplikasi android menggunakan librari volley. Dan pada aritikel kali ini saya akan meneruskan tutorial kemarin, masih menggunakan librari volley sebagai pengambil data, nah bedanya nanti data akan saya tampilkan di komponen RecyclerView. Oke sob, berikut tutorialnya 😁



Untuk membuat aplikasi android, kadang aplikasi membutuhkan data yan gdi simpan di server clound agar bisa diakses oleh banyak pengguna. Data tersebut biasanya disimpan di dalam database MySQL dan diakses dengan file WEB PHP. Untuk bisa mengakses data pada server ke dalam aplikasi android, aplikasi harus mengunakan layanan web (Web Service). Untuk penjelasan lanjut tentang Web Service bisa sobat baca di artikel sebelumnya.

Nah, untuk menggunakan Web Service, kita bisa menggunakan beberapa librari seperti asyntask, Android Query, Volley, maupun Retrofit. Librari-librari tersebut memiliki kelebihan dan kekurangan masing-masing, dan untuk kecepatan mengambil data Retrofit yang paling unggul.

Baca juga "Cara Menampilkan Kecepatan Internet Android di Statusbar"

Pada artikel kali ini masih menggunakan librari volley untuk mengambil data. Dan tambahanya adalah, data yang diambil akan ditampilan pada komponen RecyclerView berbentuk list. Oke berikut angkah pembuatanya.

Pada artikel ini saya menggunakan server dan project dari artikel sebelumnya. Jika sobat belum membuatnya, silahkan bisa sobat buka pada link di bawah ini

Menampilkan Data Dari MySql ke Aplikasi Android

Membuat Server

Server yang saya gunakan sama dengan tutorial sebelumnya, yaitu dengan database MySQL dengan nama database app_blogvolley di table hape

Membuat Project Baru

Untuk project yang dibuat saya ambil dari artikel sebelumnya, yaitu project volley

Menginstal Librari

Librari yang digunakan masih sama dengan artikel sebelumnya, yaitu gabungan antara volley dan glide

Membuat Tampilan

Untuk nanti kita akan tampilkan data pada komponen RecyclerView, untuk menambahkan komponen RecyclerView, silahkan sobat bisa membaca pada postingan saya sebelumnya di link berikut

Membuat Aplikasi Android RecyclerView dan Menampilkan Gambar dengan Glide

Setelah komponen recyclerview telah ditambahkan, sekarang buka file activity_main.xml dan tambahkan komponen RecyclerView, kodenya seperti berikut ini :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.aji.voley1.MainActivity">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/lvhape"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>

Kemudian jika kita ingin menampilkan data pada RecyclerView dengan tampilan yang kita inginkan, maka kita membuatuhkan layout baru agar kita bisa menampilkan data pada komponen yang kita butuhkan. Pada komponen RecyclerView kita akan tampilkan data gambar dan satu teks sebagai judul data.


Untuk menampung gambar menggunakan komponen ImageView dan untuk menampilkan teks menggunakan komponen TextView. Silahkan buat layout baru kemudian beri nama dengan list_item.xml, kodenya sebagai berikut

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="5dp">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:padding="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">

            <ImageView
                android:id="@+id/imghp"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:id="@+id/txthape"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:gravity="center_vertical"
                android:text="Merk"
                android:textSize="25sp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>

</RelativeLayout>

Membuat Logika Java

Jika tampilanya sudah dibuat, sekarang masukkan logika java pada file MainActivity.java. Untuk kali ini kita akan ubah beberapa kode yang ada pada artikel sebelumnya, silahkan sobat cek kode pada file MainActivity.java dan rbah seperti berikut ini :

package com.aji.voley1;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

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.StringRequest;
import com.android.volley.toolbox.Volley;
import com.bumptech.glide.Glide;

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

import java.util.ArrayList;
import java.util.HashMap;

public class MainActivity extends AppCompatActivity {

    private RecyclerView lvhape;

    private RequestQueue requestQueue;
    private StringRequest stringRequest;

    ArrayList<HashMap<String, String>> list_data;

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

        String url = "http://192.168.95.77/app_blogvolley/getdata.php";

        lvhape = (RecyclerView) findViewById(R.id.lvhape);
        LinearLayoutManager llm = new LinearLayoutManager(this);
        llm.setOrientation(LinearLayoutManager.VERTICAL);
        lvhape.setLayoutManager(llm);

        requestQueue = Volley.newRequestQueue(MainActivity.this);

        list_data = new ArrayList<HashMap<String, String>>();

        stringRequest = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
                Log.d("response ", response);
                try {
                    JSONObject jsonObject = new JSONObject(response);
                    JSONArray jsonArray = jsonObject.getJSONArray("handphone");
                    for (int a = 0; a < jsonArray.length(); a++) {
                        JSONObject json = jsonArray.getJSONObject(a);
                        HashMap<String, String> map = new HashMap<String, String>();
                        map.put("id", json.getString("idhp"));
                        map.put("merk", json.getString("merk"));
                        map.put("tipe", json.getString("tipe"));
                        map.put("gambar", json.getString("gambar"));
                        map.put("keterangan", json.getString("keterangan"));
                        list_data.add(map);
                        AdapterList adapter = new AdapterList(MainActivity.this, list_data);
                        lvhape.setAdapter(adapter);
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });

        requestQueue.add(stringRequest);
    }
}

Untuk menampilkan data ke dalam RecyclerView, kita membutuhkan adapter untuk memproses data. Adapter yang digunakan adalah adapter yang diubah sesuai keinginan kita agar data tampil di masing-masing komponen yang ada di layout list_item.xml. Oke, untuk membuat adapter, kita menggunakan sebuah class baru yang nanti kita beri nama AdapterList yang class ini memiliki sifat dari RecyclerView.Adapter. Kemudian untuk penampung data, menggunakan ViewHolder yang kita masukan ke dalam AdapterList. Untuk kodenya seperti berikut

package com.aji.voley1;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.ArrayList;
import java.util.HashMap;

/**
 * Created by AJISETYA.
 */
public class AdapterList extends RecyclerView.Adapter<AdapterList.ViewHolder>{

    Context context;
    ArrayList<HashMap<String, String>> list_data;

    public AdapterList(MainActivity mainActivity, ArrayList<HashMap<String, String>> list_data) {
        this.context = mainActivity;
        this.list_data = list_data;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, null);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Glide.with(context)
                .load("http://192.168.95.77/app_blogvolley/img/" + list_data.get(position).get("gambar"))
                .crossFade()
                .placeholder(R.mipmap.ic_launcher)
                .into(holder.imghape);
        holder.txthape.setText(list_data.get(position).get("merk"));
    }

    @Override
    public int getItemCount() {
        return list_data.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView txthape;
        ImageView imghape;

        public ViewHolder(View itemView) {
            super(itemView);

            txthape = (TextView) itemView.findViewById(R.id.txthape);
            imghape = (ImageView) itemView.findViewById(R.id.imghp);
        }
    }
}

Memberikan Izin Mengakses Internet

Karena aplikasi mengambil data dari server lewat internet, maka kita harus memberikan izin internet di dalam AndroidManifest.xml, untuk kodenya di bawah ini lalu letakkan di atas kode <application>

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

Menjalankan Aplikasi

Jika tampilan dan kode javanya sudah, sekarang aplikasi sudah bisa dijalankan dengan memilih menu Run-app, untuk tampilanya seperti berikut ini



Nah, konsepnya sama seperti kita menampikan data ke aplikasi menggunakan AQuery dan ListView. Jadi data diambil dengan memanggil json dari server, kemudian diproses dan dimasukkan ke dalam RecyclerView untuk ditampilkan pada layar.

Oke sekian artikel tentang Menampilkan Data MySQL ke Aplikasi Android dengan Volley dan RecyclerView, semoga bermanfaat dan membantu sobat yang sedang belajar pemrograman android. Silahkan bagikan artike ini ke taman-teman sobat jika sobat senang dengan artikel ini. Silahkan isi kolom komentar di bawah jika sobat ada pertanyaan, kritik, dan saran. Oke, terimakasih sampai jumpa di artikel selanjutnya.. 😀