A.

ImageView
1. Defenisi ImageView
Adalah komponen dasar android yang tugasnya menampilkan gambar. Gambar di
komponen ImageView bisa diambil dari Assets atau dari Drawable. ImageView memiliki tinggi dan
lebar yang sudah ditentukan sejak awal.

2. Menerapkan ImageView
Berikut potongan kode program untuk menerapkan ImageView
<ImageView
android:id=”@+id/image”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:scaltType=”center”
android:src=”@drawable/my_image”
/>
View ini secara umum akan memuat gambar dari drawable bernama my_image. Atribut
scaleType memungkinkan pengguna untuk memosisikan sebuah gambar di dalam ImageView.
Pada contoh diatas, akan ditampilkan gambar dengan ukuran aslinya dan berada di tengah
ImageView.

3. Mengatur Ukuran ImageView

ImageView dapat memiliki tinggi dan lebar yang sudah ditentukan sejak awal. Berikut kode
program untuk mengatur ukuran ImageView.
<ImageView
android:layout_width=”50dp”
android:Layout_height=”50dp”
android:scaleType =”fitXY”
…
/>
Atribut scaleType akan memaksa gambar untuk menurunkan tinggi dan lebarnya agar sama
dengan layout_width dan layout_height (dalam hal ini 50dp). Anda dapat memuat gambar yang
memiliki lebar atau tinggi menyesuaikan ukuran yang ditentukan (aspek rasio) dengan
memanfaatkan parameter adjustViewBounds.
Kode program yang diimplementasikan sebagai berikut :
<ImageView
android:layout_width=”50dp”
android:Layout_height=”wrap_content”
android:scaleType =”fitXY”
android:adjustViewBounds=”true”
…
/>

4. ScaleType
Sebuah ImageView dapat menampilkan gambar berdasarkan atribut scaleType yang
diberikan. Berikut ini beberapa properti atribut scaleType.
a. Center
Menampilkan gambar ditengah view tanpa merubah skalanya.
b. centerCrop
merubah skala gambar sehingga dimensi x dan y lebih besar atau sama dengan view dengan
menjaga aspek rasionya, lalu menampilkan gambar di tengah view
c. centerInside
 merubah skala gambar agar pas didalam view dengan menjaga aspek rasionya. Jika ukuran
gambar lebih kecil dari view, maka hasil yang didapatkan sama seperti center.
d. Matrix
Merubah skala gambar melalui kelas matrix. Matrix ini dapat diberikan lewat method
setImageMatrix. Kelas matrix dapat melakukan transformasi, misalnya memutar gambar
e. fitCenter
menampilkan gambar agar pas berada di dalam view dengan menjaga aspek rasionya.
Setidaknya akan ada satu sisi yang pas dengan view, lalu hasilnya ditampilkan di tengah.
f. fitStart
sama seperti fitCenter tapi sejajar dengan posisi kiri atas dari view
g. fitEnd
sama seperti fitCenter tapi sejajar dengan posisi kanan atas dari view
h. fitXY
merubah dimensi x dan y agar pas dengan ukuran view; aspek ratio gambar tidak dijaga

5. Mipmap dan drawable

Mulai android versi 4.3 developer memiliki opsi untuk menggunakan res/mipmap untuk
menyimpan gambar bertipe “mipmap” biasanya digunakan sebagai ikon aplikasi, misalnya
untuk ikon launcher. Gambar di folder mipmap dapat dipanggil dengan @mipmap/ic_launcher
dimana pemanggilannya mirip dengan @drawable. Seperti drawable, developer dapat
membuat ikon alternatif berdasarkan kerapatan layar.

6. Mendukung beberapa jenis layar

Karena perangkat android memiliki lebar layar, resolusi, serta kerapatan layar yang
berbeda- beda, diciptakanlah sebuah sistem untuk memilih gambar yang paling sesuai dengan
ukuran perangkat yang memuatnya.
Terdapat beberapa folder drawable khusus untuk setiap kerapatan layar, diantaranya
ldpi(resolusi rendah), mdpi (resolusi menengah), hdpi (resolusi tinggi), dan xhdpi (resolusi
lebih tinggi). Untuk membuat jenis – jenis gambar yang berbeda ukuran, harus memastikan
aspek rasio 3:4:6:8 untuk jenis – jenis kerapatan. Perhatikan tabel berikut
Kerapatan Layar DPI Contoh Skala
Perangkat
ldpi 120 Galaxy Y 0,75x
mdpi 160 Galaxy tab 1x
hdpi 240 Galaxy Sll 1,5x
xhdpi 320 Nexus 4 2x
xxhdpi 480 Nexus 5 3x

B. RecyclerView pada aplikasi

1. Defenisi RecyclerView
Adalah komponen yang berfungsi untuk menampilkan data dalam bentuk list. Data yang
ditampilkan cukup banyak. User bisa melihat semua data yang ada dengan melakukan
scroll. RecyclerView memungkinkan aplikasi mampu menampung ribuan bahkan ratusan
ribu data tanpa mengalami lag atau hang pada aplikasi. RecyclerView cocok digunakan
untuk menampung data yang banyak dan selalu berubah – ubah.
 Jka developer menggunakan RecyclerView, maka objek yang dibuat hanya sebatar ukuran
layar dan beberapa diatas dan dibawahnya saja. Selanjutnya RecyclerView akan
menggunakan kembali item yang akan menggunakan kembali lem yang sudah tidak terlihat.
Dampak yang ditimbulkan dengan menggunakan RecyclerView yaitu aplikasi menjadi lebih
efisien dan tidak menghabiskan memori.

2. Komponen Utama RecycleView

a. ViewHolder
Setiap item yang ditampilkan pada RecyclerView adalah objek ViewHolder. Objek
ViewHolder adalah subclass “RecyclerView.VideHolder”. anda perlu menyediakan
layout XML untuk setiap item yang akan ditampilkan. Semua komponen yang ada di
layout XML ini akan digunakan di objek ViewHolder.
b. Adapter
Setiap ViewHolder yang dibuat akan diatur oleh Adapter. Adapter adalah subclass dari
class “RecycleView.Adapter”. proses pembuatan ViewHolder juga dilakukan didalam
Adapter. Ada tiga method utama yang diperlukan yaitu :
1) getItemCount()
berfungsi untuk menentukan jumlah item yang akan ditampilkan. Jika method ini
mengembalikan nilai 1, artinya hanya akan ada 1 item yang ditampilkan
2) onCreateViewHolder()
berfungsi untuk membuat objek ViewHolder. Di method ini juga menentukan layout
XML yang akan digunakan untuk setiap item
3) onBindViewHolder()
berfungsi untuk menghubungkan data yang ada dengan objek ViewHolder.
c. Layout Manager
Berfungsi untuk menentukan bentuk dari list yang akan ditampilkan. Anda bisa
membuat list dari atas ke bawah (vertikal), atau dari kiri ke kanan (horizontal)

3. Penerapan RecyclerView
a. Langkah Pertama : Tambahkan Dependency untuk recycler view dan card view pada
gradle file kalian.
//recycler view
implementation "androidx.recyclerview:recyclerview:1.1.0"
// card view
implementation "androidx.cardview:cardview:1.0.0"
b. Langkah Kedua : Buat item xml masing-masing utuk card promo dan card load more
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="10dp">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/imageBanner"
 android:layout_width="300dp"
android:layout_height="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="@mipmap/ic_launcher" />

<TextView
android:id="@+id/titleBadgePromo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="TextView"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="@+id/imageBanner"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/imageBanner"
app:layout_constraintTop_toBottomOf="@+id/imageBanner" />

<TextView
android:id="@+id/titlePromo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:text="TextView"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/titleBadgePromo"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/titleBadgePromo"
app:layout_constraintTop_toBottomOf="@+id/titleBadgePromo"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Code untuk item_promo.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="10dp">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="24dp">

<ImageView
android:id="@+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_baseline_chevron_right_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/titleLoadMore"
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:text="View ALL"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/imageView2"
app:layout_constraintStart_toStartOf="@+id/imageView2"
app:layout_constraintTop_toBottomOf="@+id/imageView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Code untuk item_load_more.xml

c. Langkah 3 : Buat Model untuk Promo dan Load More dengan Menggunakan Data Class
pada Kotlin.
data class Promo(val imagePromo: String, val titleBadge: String, val title: String)
promo.kt
data class LoadMore(val title: String)
LeadMore.kt
Cukup satu baris saja, dengan menggunakan keyword data kita telah membuat setter
dan getter otomatis untuk semua parameternya. The Amazing of kotlin !!!

d. Langkah 4 : Buat Base untuk Recylerview View Holder

import android.view.View
import androidx.recyclerview.widget.RecyclerView

abstract class BaseViewHolder<T>(itemView: View) :

RecyclerView.ViewHolder(itemView) {
abstract fun bind(item: T)
}
BaseViewHolder.kt

Code tersebut digunakan untuk mempermudah membuat Recyler View Holder dengan
model yang akan berbeda-beda dan akan menjadi multiple view nantinya.

e. Langkah 5: Buat adapter Recyler view untuk menampung data yang berbeda.
Kita buat dulu class dengan extends ke RecylerView.Adapter yang akan berisi
BaseViewHolder
class DataAdapter(private val context: Context) :
RecyclerView.Adapter<BaseViewHolder<*>>() {}

Tambahkan muttable list kosong dan fungsi untuk menambahkan data kedalam muttable
list tersebut.
private val adapterDataList: MutableList<Any> = mutableListOf()private fun addData(item:
Any) {
adapterDataList.add(item)
notifyItemChanged(adapterDataList.size - 1)
}

fun addAllData(itemList: List<Any>) {

for (item in itemList)
addData(item)
}
Buat Companion Object untuk membedakan antara type promo dan type load more.
companion object {
private const val TYPE_PROMO = 0
private const val TYPE_LOAD_MORE = 1
}

Buat inner class Promo View Holder dan Load More View Holder yang merupakan
child/turunan dari BaseViewHolder. Class tersebut berfungsi untuk set data model pada
item view kita.
inner class PromoViewHolder(itemView: View) : BaseViewHolder<Promo>(itemView) {
override fun bind(item: Promo) {
itemView.apply {
val resId = resources.getIdentifier(item.imagePromo, "drawable",
context.packageName)
imageBanner.setBackgroundResource(resId)
titleBadgePromo.text = item.titleBadge
titlePromo.text = item.title
}
}
}

inner class LoadMoreViewHolder(itemView: View) : BaseViewHolder<LoadMore>(itemView) {

override fun bind(item: LoadMore) {
itemView.titleLoadMore.text = item.title
}
}

Setelah itu di bagian class data adapter pasti masih terdapat error, coba
lakukan alt+enter kita diminta untuk mengimplement 3 fungsi
onCreateViewHolder, getItemCount dan onBindViewHolder. Pilih ketiga fungsi
tersebut dan mulai implementasi.

Pada onCreateViewHolder inilah kita akan mengembalikan nilai view holder sesuai
dengan type masing-masing. kita juga memasukan view kedalam masing View Holder
disini.
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder<*> {
return when (viewType) {
TYPE_PROMO -> {
val view = LayoutInflater.from(context).inflate(R.layout.item_promo, parent,false)
PromoViewHolder(view)
}
TYPE_LOAD_MORE -> {
val view =
LayoutInflater.from(context).inflate(R.layout.item_load_more, parent,false)
LoadMoreViewHolder(view)
}
else -> throw IllegalArgumentException("Invalid view type")
}
}

Pada fungsi onBindViewHolder digunakan mapping data kepada tiap-tiap view holder.
override fun onBindViewHolder(holder: BaseViewHolder<*>, position: Int) {
val element = adapterDataList[position]
when (holder) {
 is PromoViewHolder -> holder.bind(element as Promo)
is LoadMoreViewHolder -> holder.bind(element as LoadMore)
else -> throw IllegalArgumentException()
}
}

Pada fungsi getItemCount digunakan untuk menentukan jumlah item pada Recylerview
override fun getItemCount(): Int {
return adapterDataList.size
}

Ini yang terpenting, untuk menentukan jenis / type pada masing-masing data kita
perlu ovveride getItemViewType.
override fun getItemViewType(position: Int): Int {
return when (adapterDataList[position]) {
is Promo -> TYPE_PROMO
is LoadMore -> TYPE_LOAD_MORE
else -> throw IllegalArgumentException("Invalid type of data " + position)
}
}

Full Codenya akan menjadi seperti tampilan berikut ini.

package com.galangaji.recylermultipleview
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.recyclerview.widget.RecyclerView
import com.galangaji.recylermultipleview.model.LoadMore
import com.galangaji.recylermultipleview.model.Promo
import kotlinx.android.synthetic.main.item_load_more.view.*
import kotlinx.android.synthetic.main.item_promo.view.*

class DataAdapter(private val context: Context) :

RecyclerView.Adapter<BaseViewHolder<*>>() {

private val adapterDataList: MutableList<Any> = mutableListOf()

companion object {
private const val TYPE_PROMO = 0
private const val TYPE_LOAD_MORE = 1
}

private fun addData(item: Any) {

adapterDataList.add(item)
notifyItemChanged(adapterDataList.size - 1)
}

fun addAllData(itemList: List<Any>) {

for (item in itemList)
addData(item)
}

inner class PromoViewHolder(itemView: View) : BaseViewHolder<Promo>(itemView) {

override fun bind(item: Promo) {
itemView.apply {
val resId = resources.getIdentifier(item.imagePromo, "drawable",
context.packageName)
 imageBanner.setBackgroundResource(resId)
titleBadgePromo.text = item.titleBadge
titlePromo.text = item.title
}
}
}

inner class LoadMoreViewHolder(itemView: View) : BaseViewHolder<LoadMore>(itemView)

{
override fun bind(item: LoadMore) {
itemView.titleLoadMore.text = item.title
}
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):

BaseViewHolder<*> {
return when (viewType) {
TYPE_PROMO -> {
val view = LayoutInflater.from(context).inflate(R.layout.item_promo,
parent, false)
PromoViewHolder(view)
}
TYPE_LOAD_MORE -> {
val view =
LayoutInflater.from(context).inflate(R.layout.item_load_more,
parent, false)
LoadMoreViewHolder(view)
}
else -> throw IllegalArgumentException("Invalid view type")
}
}

override fun getItemCount(): Int {

return adapterDataList.size
}

override fun onBindViewHolder(holder: BaseViewHolder<*>, position: Int) {

val element = adapterDataList[position]
when (holder) {
is PromoViewHolder -> holder.bind(element as Promo)
is LoadMoreViewHolder -> holder.bind(element as LoadMore)
else -> throw IllegalArgumentException()
}
}

override fun getItemViewType(position: Int): Int {

return when (adapterDataList[position]) {
is Promo -> TYPE_PROMO
is LoadMore -> TYPE_LOAD_MORE
else -> throw IllegalArgumentException("Invalid type of data " + position)
}
}

f. Langkah 5: Buat tampilan Recylerview pada activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerPromo"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

g. Langkah 6 : Tambahkan adapter, layout manager, data list pada recycler view.
package com.galangaji.recylermultipleview
import android.graphics.Rect
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import androidx.recyclerview.widget.RecyclerView.*
import com.galangaji.recylermultipleview.model.LoadMore
import com.galangaji.recylermultipleview.model.Promo
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

private lateinit var dataAdapter: DataAdapter

private lateinit var manager: LayoutManager

private var dataList: List<Any> = listOf(

Promo(
"promo_1",
"Super Cash Back",
"Beli Minimal 1 juta Cashback sampain 100.000 khusus untuk pengguna lama"
),
Promo(
"promo_2",
"Beli Bayak Lebih murah",
"Potongan harga sampai dengan 50% minimal belanja 20.000.000"
),
Promo(
"promo_3",
"Gratis Ongkir",
"Tanpa batas gratis onkir kemanapun *syarat dan ketentuan berlaku"),
LoadMore("Load more")
)

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

dataAdapter = DataAdapter(this)
manager = LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)

recyclerPromo.apply {
adapter = dataAdapter
layoutManager = manager
addItemDecoration(object : ItemDecoration() {
 override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: State
) {
outRect.set(10, 10, 10, 10)
}
}
)
}
dataAdapter.addAllData(dataList)
}
}
Selesai….
Jalankan dan lihat hasilnya akan tampil seperti gambar dibawah ini.