Android Kotlin MVVM Networking dengan RX Java dan RX Android (2)

Lanjutan artikel sebelumnya. setelah merhasil mengkoneksikan API langkah selanjutnya adalah menampilkan data pada aplikasi. dan karena datanya disini ada gambarnya maka tambahkan library untuk menampilkan gambar tersebut. disini menggunakan Glide.

terus yang penting jangan lupa tambahkan di app/build.gradle apply plugin: 'kotlin-kapt' yang nantinya digunakan untuk kotlin compiler.

lanjut ke pembuatan class converter yang akan digunakan untuk menampilkan gambar secara data binding. class nya seperti berikut ini.

persiapan selesai, langkah pertama merubah ItemPlaceViewModel. tambahkan model dari Place dan variable.

setelah item view model dirubah, lanjut ke layout xml dari item view model tersebut. tampilkan datanya. berikut adalah layout item_place.xml yang sudah dirubah.

	<?xml version="1.0" encoding="utf-8"?>
	<layout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto">
	<data>
	<variable
	name="itemPlace"
	type="com.yoesuv.mvvmnetworking.menu.viewmodels.ItemPlaceViewModel"/>
	</data>
	<RelativeLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content">
	<!-- imageView item place -->
	<android.support.v7.widget.AppCompatImageView
	android:id="@+id/imageViewItemPlace"
	android:layout_width="70dp"
	android:layout_height="70dp"
	android:scaleType="centerCrop"
	app:srcCompat="@drawable/sample_image"
	app:loadImage="@{itemPlace.image}"/>
	<LinearLayout
	android:id="@+id/layoutText"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical"
	android:layout_toRightOf="@id/imageViewItemPlace"
	android:layout_toEndOf="@id/imageViewItemPlace"
	android:layout_centerVertical="true"
	android:layout_marginLeft="8dp"
	android:layout_marginStart="8dp">
	<!-- textView title item place -->
	<android.support.v7.widget.AppCompatTextView
	android:id="@+id/textTitle"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@{itemPlace.title}"
	android:textSize="18sp"
	android:textStyle="bold"
	tools:text="Place Name"/>
	<!-- textView location item place -->
	<android.support.v7.widget.AppCompatTextView
	android:id="@+id/textLocation"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@{itemPlace.location}"
	tools:text="Place Location"/>
	</LinearLayout>
	</RelativeLayout>
	</layout>

view raw item_place.xml hosted with ❤ by GitHub

berikutnya adalah membuat adapter. adapternya seperti biasanya tapi sekarang via data binding. codingnya seperti berikut ini.

	package com.yoesuv.mvvmnetworking.menu.adapters
	import android.content.Context
	import android.databinding.DataBindingUtil
	import android.support.v7.widget.RecyclerView
	import android.view.LayoutInflater
	import android.view.ViewGroup
	import com.yoesuv.mvvmnetworking.R
	import com.yoesuv.mvvmnetworking.databinding.ItemPlaceBinding
	import com.yoesuv.mvvmnetworking.menu.models.ListPlaceResponseModel
	import com.yoesuv.mvvmnetworking.menu.viewmodels.ItemPlaceViewModel
	class ListPlaceAdapter(val context: Context): RecyclerView.Adapter<ListPlaceAdapter.ItemPlaceViewHolder>() {
	private var listPlace: MutableList<ListPlaceResponseModel.PlaceModel> = mutableListOf()
	override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemPlaceViewHolder {
	val binding: ItemPlaceBinding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.item_place, parent, false)
	return ItemPlaceViewHolder(binding)
	}
	override fun getItemCount(): Int {
	return listPlace.size
	}
	override fun onBindViewHolder(holder: ItemPlaceViewHolder, position: Int) {
	holder.bindData(listPlace[holder.adapterPosition])
	}
	fun setData(list: MutableList<ListPlaceResponseModel.PlaceModel>){
	this.listPlace = list
	}
	class ItemPlaceViewHolder(private val binding: ItemPlaceBinding) : RecyclerView.ViewHolder(binding.root) {
	fun bindData(model: ListPlaceResponseModel.PlaceModel){
	val viewModel = ItemPlaceViewModel(model)
	binding.itemPlace = viewModel
	}
	}
	}

view raw ListPlaceAdapter.kt hosted with ❤ by GitHub

setelah itu lanjut ke MainActivity, disini menggunakan LiveData. perhatikan function observeLiveData()

	package com.yoesuv.mvvmnetworking.menu.views
	import android.arch.lifecycle.Observer
	import android.arch.lifecycle.ViewModelProviders
	import android.databinding.DataBindingUtil
	import android.support.v7.app.AppCompatActivity
	import android.os.Bundle
	import android.support.v7.widget.LinearLayoutManager
	import com.yoesuv.mvvmnetworking.R
	import com.yoesuv.mvvmnetworking.databinding.ActivityMainBinding
	import com.yoesuv.mvvmnetworking.menu.adapters.ListPlaceAdapter
	import com.yoesuv.mvvmnetworking.menu.viewmodels.MainViewModel
	class MainActivity : AppCompatActivity() {
	private lateinit var binding: ActivityMainBinding
	private lateinit var viewModel: MainViewModel
	private lateinit var adapter: ListPlaceAdapter
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
	viewModel = ViewModelProviders.of(this).get(MainViewModel::class.java)
	binding.main = viewModel
	setupRecyclerView()
	observeLiveData()
	viewModel.getListPlace()
	}
	private fun setupRecyclerView(){
	val layoutManager = LinearLayoutManager(this)
	binding.recyclerViewPlace.layoutManager = layoutManager
	adapter = ListPlaceAdapter(this)
	binding.recyclerViewPlace.adapter = adapter
	}
	private fun observeLiveData(){
	viewModel.listPlace.observe(this, Observer {
	adapter.setData(it?.data!!)
	adapter.notifyDataSetChanged()
	})
	viewModel.error.observe(this, Observer {
	//handle error atau tampilkan pesan errror
	})
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Setelah lumayan lama, akhirnya selesai juga tinggal dijalankan. cek complete repositorynya disini.

selamat mencoba.