Learn, Practice, Share | Praktikum Android Semester 7: Part 2

Praktikum Android Semester 7: Part 1
Praktikum Android Semester 7: Part 2
Praktikum Android Semester 7: Part 3
Praktikum Android Semester 7: Part 4
Praktikum Android Semester 7: Part 5
Praktikum Android Semester 7: Part 6
Praktikum Android Semester 7: Part 7

Pada Part 1 aplikasi sudah dapat melakukan request data namun hanya menampilkan 1 (satu) field ke TextView. Data dapat ditampilkan dalam bentuk list yang bisa diimplementasikan dalam Android Studio dengan menggunakan ListView atau RecyclerView. Pada part ini akan digunakan RecyclerView dengan layout sederhana.

tambahkan pada build.graddle.app

    ...
    dependencies{
        ...
        implementation 'androidx.recyclerview:recyclerview:1.2.1'
    }

pada layout, buat sebuah Layout Resource File dan berikan nama item_row_user dan isikan dengan

<?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="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/tv_item_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:textSize="16sp"
        android:textStyle="bold"
        tools:text="Name" />

    <TextView
        android:id="@+id/tv_item_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="2"
        tools:text="Email" />
</LinearLayout>

Buat sebuah empty activity baru didalam package ui.user dengan nama UserActivity, buka file activity_user.xml dan isikan dengan

<?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:id="@+id/activity_user"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.user.UserActivity">

    <ProgressBar
        android:id="@+id/progressBarUser"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:indeterminate="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_users"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        tools:listitem="@layout/item_row_user" />

</LinearLayout>

Buat sebuah class baru didalam package ui.user dengan nama ListUserAdapter dan isikan dengan

class ListUserAdapter(private val listUser: ArrayList<UserData>) : RecyclerView.Adapter<ListUserAdapter.ListViewHolder>() {
    class ListViewHolder(private val binding: ItemRowUserBinding) : RecyclerView.ViewHolder(binding.root) {

    }
}

Import dan implementasikan semua method yang diminta oleh interface Adapter RecyclerView. Masih pada file ListUserAdapter, tambahkan method bind di dalam inner class `ListViewHolder

class ListViewHolder(private val binding: ItemRowUserBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(userData: UserData) {
            with(binding){
                tvItemName.text = userData.first_name + " " + userData.last_name
                tvItemEmail.text = userData.email
            }
        }
    }

Masuk ke blok method onCreateViewHolder dan isikan dengan

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder {
    val binding = ItemRowUserBinding.inflate(LayoutInflater.from(parent.context), parent, false)
    return ListViewHolder(binding)
}

Masuk ke blok method onBindViewHolder dan isikan dengan

override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
        holder.bind(listUser[position])
}

Pada blok method getItemCount isikan dengan

override fun getItemCount():Int = listUser.size

Sehingga hasil akhirnya ListUserAdapter berisikan

class ListUserAdapter(private val listUser: ArrayList<UserData>) : RecyclerView.Adapter<ListUserAdapter.ListViewHolder>() {

    class ListViewHolder(private val binding: ItemRowUserBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(userData: UserData) {
            with(binding){
                tvItemName.text = userData.first_name + " " + userData.last_name
                tvItemEmail.text = userData.email
            }
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder {
        val binding = ItemRowUserBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return ListViewHolder(binding)
    }

    override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
        holder.bind(listUser[position])
    }

    override fun getItemCount():Int = listUser.size

}

Ubah isi dari UserActivity dengan

class UserActivity : AppCompatActivity() {

    private lateinit var binding:ActivityUserBinding
    private val list = ArrayList<UserData>()
    private val viewModel: UserViewModel by lazy {
        ViewModelProvider(this).get(UserViewModel::class.java)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityUserBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.rvUsers.setHasFixedSize(true)

        binding.progressBarUser.visibility = View.VISIBLE

        getListUser()

    }

    private fun getListUser() {
        viewModel.getUsers()
        viewModel.response.observe(this, {
            binding.progressBarUser.visibility = View.INVISIBLE
            list.addAll(it.data)
            binding.rvUsers.layoutManager = LinearLayoutManager(this)
            val listUserAdapter = ListUserAdapter(list)
            binding.rvUsers.adapter = listUserAdapter
        })
    }
}

Terakhir pada manifest kita ganti agar UserActivity menjadi Main Launcher

<application ...
    <activity android:name=".ui.user.UserActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

    </activity>
</application>

Voila ! jadilah data tampil di RecyclerView

Praktikum Android Semester 7: Part 2

Recent Posts

Tags