Cara Parsing Data JSON di Aplikasi Android

Hai semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara parsing data dari file json ke dalam aplikasi android dengan tutorial dasar di android studio.

JSON adalah singkatan dari JavaScript Object Notation. Ini adalah format minimal yang dapat dibaca dan untuk menyusun data. JSON adalah transmisi data independen antara server dan aplikasi. Merupana alternatif terbaik untuk XML. Ini mewakili data dalam format teks sehingga dapat dengan mudah di urai.

Android telah menyediakan kelas yang berbeda untuk memanipulasi data JSON. Mereka adalah JSONArray, JSONStringer, JSONObject dan JSONTokenizer. File JSON memiliki banyak komponen seperti Array ( [ ), Objects ( { ), Key dan Value.

- Advertisement -

Dalam tutorial ini kalian akan belajar cara membuat aplikasi android untuk membaca data atau parsing data dari file json dengan mudah di android studio.

Tutorial Parsing Data File JSON di Android Studio

Buatlah projek android studio baru dengan informasi dibawah ini:

Application Name:JSON Parse
Package Name:com.androidrion.jsonparse
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml
  2. listview_item.xml

Daftar file java yang digunakan dalam projek ini:

  1. HttpHandler.java
  2. MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi JSON Parse.

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Tambahkan widget ListView di dalam RelativeLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listview"
        tools:listitem="@layout/list_item"/>

</RelativeLayout>

Buat file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file xml layout baru dengan nama list_item. Berikut ini adalah kode lengkap untuk file list_item.xml

app/res/layout/list_item.xml

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

    <TextView
        android:id="@+id/colorName"
        style="@style/TextAppearance.AppCompat.Headline"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Color Name"
        android:textColor="@color/colorPrimaryDark" />

    <TextView
        android:id="@+id/colorType"
        style="@style/TextAppearance.AppCompat.Subhead"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type Color" />

    <TextView
        android:id="@+id/colorHex"
        style="@style/TextAppearance.AppCompat.Caption"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:hint="Hex Color" />

</LinearLayout>

JSON File

Buka link dibawah ini:

http://myjson.com

Masukkan kode dibawah ini pada link tersebut

{
    "colors": [{

            "id": "c0",
            "color": "Black",
            "category": "Hue",
            "type": "Primary",
            "code": {
                "rgba": "[255, 255, 255, 1]",
                "hex": "#000"
            }
        }

        ,
        {

            "id": "c1",
            "color": "White",
            "category": "value",
            "type": " ",
            "code": {
                "rgba": "[0, 0, 0, 1]",
                "hex": "#FFF"
            }
        }

        ,
        {

            "id": "c2",
            "color": "Red",
            "category": "Hue",
            "type": "Primary",
            "code": {
                "rgba": "[255,0,0,1]",
                "hex": "#FF0"
            }
        }

        ,
        {

            "id": "c3",
            "color": "Blue",
            "category": "Hue",
            "type": "Primary",
            "code": {
                "rgba": "[0,0,255,1]",
                "hex": "#00F"
            }
        }

        ,
        {

            "id": "c4",
            "color": "Yellow",
            "category": "Hue",
            "type": "Primary",
            "code": {
                "rgba": "[255,255,0,1]",
                "hex": "#FF0"
            }
        }

        ,
        {

            "id": "c5",
            "color": "Green",
            "category": "Hue",
            "type": "Secondary",
            "code": {
                "rgba": "[0,255,0,1]",
                "hex": "#0F0"
            }
        }
    ]
}

Klik tombol SAVE, maka kalian akan mendapatkan link api seperti di bawah ini:

https://api.myjson.com/bins/br98e

Ikuti seperti pada gambar dibawah ini

Cara Parsing Data JSON  di Aplikasi Android

Java File

Buatlah file java class baru dengan cara klik kanan pada folder java dalam projek android studio kalian. Lalu pilih New>Java Class. Simpan file java baru tersebut dengan nama HttpHandler. Dibawah ini adalah kode lengkap untuk file HttpHandler.java

app/java/com.androidrion.jsonparser/HttpHandler.java

[sociallocker id=”1410″]

package com.androidrion.jsonparse;

import android.util.Log;

import java.io.BufferedInputStream;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.ProtocolException;
import java.net.URL;

class HttpHandler {

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

    HttpHandler() {
    }

    String makeServiceCall(String Urlreq) {
        String res = null;
        try {
            URL mUrl = new URL(Urlreq);
            HttpURLConnection httpURLConnection = (HttpURLConnection) mUrl.openConnection();
            httpURLConnection.setRequestMethod("GET");
            InputStream inputStream = new BufferedInputStream(httpURLConnection.getInputStream());
            res = convertStreamToString(inputStream);
        } catch (MalformedURLException e) {
            Log.e(TAG, "MalformedURLException: " + e.getMessage());
        } catch (ProtocolException e) {
            Log.e(TAG, "ProtocolException: " + e.getMessage());
        } catch (IOException e) {
            Log.e(TAG, "IOException: " + e.getMessage());
        } catch (Exception e) {
            Log.e(TAG, "Exception: " + e.getMessage());
        }
        return res;
    }

    private String convertStreamToString(InputStream inputStream) {
        BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
        StringBuilder sb = new StringBuilder();

        //line
        String i;
        try {
            while ((i = bufferedReader.readLine()) != null) {
                sb.append(i).append('\n');
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                inputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return sb.toString();
    }
}

[/sociallocker]

Masih didalam folder java, sekarang buka file MainActivity, lalu gunakan kode dibawah ini untuk membuat aplikasi menampilkan data file json yang telah di parsing. Dibawah ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.jsonparser/MainActivity.java

package com.androidrion.jsonparse;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.app.ProgressDialog;
import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

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 String TAG = MainActivity.class.getSimpleName();

    private ProgressDialog progressDialog;
    private ListView listView;
    ArrayList<HashMap<String, String>> colorJsonList;

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

        colorJsonList = new ArrayList<>();
        listView = findViewById(R.id.listview);
        new GetColors().execute();
    }

    @SuppressLint("StaticFieldLeak")
    private class GetColors extends AsyncTask<Void, Void, Void> {

        @Override
        protected void onPreExecute() {
            super.onPreExecute();
            progressDialog = new ProgressDialog(MainActivity.this);
            progressDialog.setMessage("Please wait...");
            progressDialog.setCancelable(false);
            progressDialog.show();
        }

        @Override
        protected Void doInBackground(Void... arg0) {
            HttpHandler httpHandler = new HttpHandler();

            // JSON data url
            String jsonurl = "https://api.myjson.com/bins/dgx70";
            String jsonString = httpHandler.makeServiceCall(jsonurl);
            Log.e(TAG, "Response from url: " + jsonString);
            if (jsonString != null) {
                try {
                    JSONObject jsonObject = new JSONObject(jsonString);
                    // Getting JSON Array node
                    JSONArray colors = jsonObject.getJSONArray("colors");

                    for (int i = 0; i < colors.length(); i++) {
                        JSONObject c = colors.getJSONObject(i);
                        String id = c.getString("id");
                        String color = c.getString("color");
                        String type = c.getString("type");

                        JSONObject code = c.getJSONObject("code");
                        String hex = code.getString("hex");

                        HashMap<String, String> colorx = new HashMap<>();

                        colorx.put("id", id);
                        colorx.put("color", color);
                        colorx.put("type", type);
                        colorx.put("hex", hex);

                        colorJsonList.add(colorx);
                    }
                } catch (final JSONException e) {
                    Log.e(TAG, "Json parsing error: " + e.getMessage());
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            Toast.makeText(getApplicationContext(),
                                    "Json parsing error: " + e.getMessage(),
                                    Toast.LENGTH_LONG).show();
                        }
                    });

                }
            } else {
                Log.e(TAG, "Could not get json from server.");
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(getApplicationContext(),
                                "Could not get json from server.",
                                Toast.LENGTH_LONG).show();
                    }
                });

            }

            return null;
        }

        @Override
        protected void onPostExecute(Void result) {
            super.onPostExecute(result);
            // Dismiss the progress dialog
            if (progressDialog.isShowing()) progressDialog.dismiss();
            ListAdapter adapter = new SimpleAdapter(
                    MainActivity.this, colorJsonList, R.layout.list_item,
                    new String[]{"color", "type", "hex"},
                    new int[]{R.id.colorName, R.id.colorType, R.id.colorHex});

            listView.setAdapter(adapter);
        }

    }
}

Manifests File

Buka file AndroidManifest.xml dalam folder manifests pada projek android studio. Tambahkan permission INTERNET di dalamnya. Berikut adalah kode lengkap untuk file AndroidManifest.xml

app/manifests/AndroidManifest.xml

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

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

    <application
        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 ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat adanya data yang tersusun rapi menjelaskan tentang warna. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

Cara Parsing Data JSON  di Aplikasi Android

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat aplikasi android untuk membaca atau mem-parsing data dari file json di android studio. Tutorial diatas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang digunakan hanya untuk membuat aplikasi android bisa memparsing data dari file json.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Projek

Untuk download projek dalam tutorial ini, silahkan klik tombol yang berada di bawah ini.

[sociallocker id=”1406″]

[/sociallocker]

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.