วิธี Parse JSON Object ใน Android ด้วย Kotlin และ RecyclerView

บทนำ

ตัวอย่างนี้สาธิตการอ่านไฟล์ JSON จาก Assets แล้ว Parse เพื่อแสดงใน RecyclerView ด้วย Kotlin

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ใหม่ใน Android Studio

ขั้นตอนที่ 2: Layout (activity_main.xml)

เพิ่มโค้ดใน res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

ขั้นตอนที่ 3: สร้างไฟล์ JSON (assets/users_list.json)

สร้างโฟลเดอร์ assets (New → Folder → Assets Folder) แล้วสร้างไฟล์ users_list.json:

{
  "users": [
    {
      "name": "Niyaz",
      "email": "testemail1@gmail.com",
      "contact": { "mobile": "+91 0000000000" }
    },
    {
      "name": "Azhar",
      "email": "testemail2@gmail.com",
      "contact": { "mobile": "+91 0000000000" }
    },
    {
      "name": "Mahi",
      "email": "testemail3@gmail.com",
      "contact": { "mobile": "+91 0000000000" }
    }
  ]
}

ขั้นตอนที่ 4: MainActivity.kt

เพิ่มโค้ดใน src/MainActivity.kt:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import org.json.JSONException
import org.json.JSONObject
import java.io.IOException
import java.nio.charset.Charset
import java.nio.charset.StandardCharsets

class MainActivity : AppCompatActivity() {
    var personName: ArrayList<String> = ArrayList()
    var emailId: ArrayList<String> = ArrayList()
    var mobileNumbers: ArrayList<String> = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"

        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
        val linearLayoutManager = LinearLayoutManager(applicationContext)
        recyclerView.layoutManager = linearLayoutManager

        try {
            val obj = JSONObject(loadJSONFromAsset())
            val userArray = obj.getJSONArray("users")
            for (i in 0 until userArray.length()) {
                val userDetail = userArray.getJSONObject(i)
                personName.add(userDetail.getString("name"))
                emailId.add(userDetail.getString("email"))
                val contact = userDetail.getJSONObject("contact")
                mobileNumbers.add(contact.getString("mobile"))
            }
        } catch (e: JSONException) {
            e.printStackTrace()
        }

        val customAdapter = CustomAdapter(this@MainActivity, personName, emailId, mobileNumbers)
        recyclerView.adapter = customAdapter
    }

    private fun loadJSONFromAsset(): String {
        return try {
            val inputStream = assets.open("users_list.json")
            val size = inputStream.available()
            val buffer = ByteArray(size)
            inputStream.read(buffer)
            inputStream.close()
            String(buffer, StandardCharsets.UTF_8)
        } catch (ex: IOException) {
            ex.printStackTrace()
            ""
        }
    }
}

ขั้นตอนที่ 5: CustomAdapter.kt

สร้างไฟล์ CustomAdapter.kt:

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import android.widget.Toast
import androidx.recyclerview.widget.RecyclerView

class CustomAdapter(
    private var context: Context,
    private var personNames: ArrayList<String>,
    private var emailIds: ArrayList<String>,
    private var mobileNumbers: ArrayList<String>
) : RecyclerView.Adapter<CustomAdapter.MyViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.rowlayout, parent, false)
        return MyViewHolder(v)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        holder.name.text = personNames[position]
        holder.email.text = emailIds[position]
        holder.mobileNo.text = mobileNumbers[position]

        holder.itemView.setOnClickListener {
            Toast.makeText(context, personNames[position], Toast.LENGTH_SHORT).show()
        }
    }

    override fun getItemCount(): Int = personNames.size

    inner class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        var name: TextView = itemView.findViewById(R.id.tvName)
        var email: TextView = itemView.findViewById(R.id.tvEmail)
        var mobileNo: TextView = itemView.findViewById(R.id.tvMobile)
    }
}

ขั้นตอนที่ 6: Layout รายการ (res/layout/rowlayout.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_margin="5dp"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name"
            android:textColor="#000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/tvEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="email@email.com"
            android:textColor="#000"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/tvMobile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="e9999999999"
            android:textColor="#000"
            android:textSize="15sp" />

    </LinearLayout>
</androidx.cardview.widget.CardView>

ขั้นตอนที่ 7: AndroidManifest.xml

ตรวจสอบการประกาศ Activity

การทดสอบ

รันแอป จะแสดงรายการผู้ใช้จาก JSON ใน RecyclerView กดที่รายการจะแสดง Toast ชื่อ

แนวทางปัจจุบัน: ควรใช้ไลบรารี Gson หรือ Moshi สำหรับ JSON Parsing และ Retrofit สำหรับ Network Call แทนการเขียน Manual Parsing