Buatlah project baru bernama Kotlin List dan jangan lupa untuk memilihinclude kotlin support:
![Nama Project](https://d33wubrfki0l68.cloudfront.net/ea94483dd471c8cacd6f3a302b0c9881ed82bb3c/360e4/img/android/kotlin/listview/project-listview.png)
Klik Next…
![Level API](https://d33wubrfki0l68.cloudfront.net/99cc7a354348613c1c5b91a50cd138e0125d3989/107ff/img/android/kotlin/project/level-api.png)
Klik Next…
![Tipe Activity](https://d33wubrfki0l68.cloudfront.net/7e7cf28f25b4027fb8f7d32952ab63cf58458ae3/8fe94/img/android/kotlin/project/tipe-activity.png)
Klik finish…
![Nama Activity](https://d33wubrfki0l68.cloudfront.net/d6c70f2f344105de27cf751b25c9325e577f0962/b8c43/img/android/kotlin/project/nama-activity.png)
Setelah itu, untuk memastikan versi library yang kamu gunakan sama dengan versi pada tutorial ini. Silahkan buka file
build.gradle
(app).
Pastikan versi yang digunakan seperti ini ya…
compileSdkVersion 27
targetSdkVersion 27
implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.android.support:appcompat-v7:27.1.0'
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
android {
compileSdkVersion 27
defaultConfig {
applicationId "com.petanikode.kotlinlist"
minSdkVersion 16
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.android.support:appcompat-v7:27.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test
1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}
Setelah itu klik Sync Now:
![Sync Project](https://d33wubrfki0l68.cloudfront.net/21aa29c4a01b94cf4c811a73831b3dec805b7e7e/44272/img/android/sync.png)
Tunggu sampai proeses Sync selesai. Setelah itu silahkan lanjutkan…
Membuat Layout ListView
Berikutnya silahkan buka
layout/activity_main.xml
.
Kita akan menggunakan
<ListView>
, silahkan ubah kode layout-nya menjadi seperti ini:<?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="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">
<ListView
android:id="@+id/lv_languages"
android:layout_width="match_parent"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
Pada kode layout di atas, kita menggunakan id
lv_languages
untuk ListView. Id ini nanti akan kita gunakan untuk menakses ListView dari Kotlin.
Berikut ini tampilan preview dari kode layout di atas:
![Layout ListView](https://d33wubrfki0l68.cloudfront.net/ae248bdb47f645961684bacc721abe13a0c5aded/856d8/img/android/kotlin/listview/layout.png)
Menampilkan Data ke ListView
Untuk dapat menampilkan data ke ListView, kita membutuhkan sebuah adapter.
Adapter ini bertugas untuk menghubungkan sumber data (data source)dengan ListView.
![Peran Adapter Activity](https://d33wubrfki0l68.cloudfront.net/457ad07f2c70205d9fce03491a4c5c44220371b1/fbefc/img/android/kotlin/listview/adapter.png)
Ada berbagai macam adapter yang bisa kita gunakan. Kita juga bisa membut kustom adapter dengan membuat Class turunan dari adapternya.
Pada tutorial ini, kita akan mencoba menggunakan
ArrayAdapter
, karena sumber data yang akan kita gunakan berasal dari sebuah List atau Array.
Silahkan buka file
MainActivity.kt
kemdian impor class-class yang dibutuhkan.import android.R.layout.simple_list_item_1
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.ArrayAdapter
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*
Setelah itu tambahkan kode berikut pada fungsi
onCreate
.// data yang akan kita tampilkan ke dala ListView
val languages = listOf("Java", "Kotlin", "Javascript", "PHP", "Python")
// memberikan adapter ke ListView
lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)
Pada kode di atas, kita membuat sebuah list bernama
languages
yang menyimpan nama-nama bahasa pemrograman.
List ini akan menjadi sumber data yang akan ditampilkan ke dalam ListView.
Berikutnya kita menggunakan kotlin extension untuk mengakses langsung ListView dengan id-nya.
lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)
Arti kode tersebut:
Kita akan menggunakan
ArrayAdapter
untuk ListView yang sudah dibuat.ArrayAdapter
memiliki tiga parameter penting:- Context:
this
- Layout: layout yang akan digunakan oleh item ListView.
simple_list_item_1
adalah layout bawaan Android yang akan kita gunakan. - Data:
languages
data yang akan kita tampilkan ke ListView.
Okay, sekarang kode lengkap untuk
MainActivity.kt
akan menjadi seperti ini:import android.R.layout.simple_list_item_1
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.ArrayAdapter
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// data yang akan kita tampilkan ke dalam ListView
val languages = listOf("Java", "Kotlin", "Javascript", "PHP", "Python")
// memberikan adapter ke ListView
lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)
}
}
Sekarang, cobalah untuk menjalankan aplikasinya.
Maka hasilnya akan seperti ini:
![Menjalankan Aplikasi List View](https://d33wubrfki0l68.cloudfront.net/ad20497f2b88d8370f273584ffb4d4711d6c6a91/1193b/img/android/kotlin/listview/aplikasi-listview.png)
Selamat
…
Kita sudah berhasil menampilkan data ke dalam ListView.
Pertanyaanya:
Bagaimana cara memberikan respon ketika salah satu item diklik?
Jawabannya, kita harus membuatkan handler untuk event tersebut. Silahkan lanjutkan…
Menangani Klik pada ListView
Buka file
MainActivity.kt
, kemudian tambahkan kode berikut di dalam fungsi onCreate
. Tepat di bawah kode yang kita buat tadi.// menangani item saat dilklik
lv_languages.setOnItemClickListener { parent, view, position, id ->
Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()
}
Sehingga akan class
MainActivity
menjadi seperti ini:class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// data yang akan kita tampilkan ke dalam ListView
val languages = listOf("Java", "Kotlin", "Javascript", "PHP", "Python")
// memberikan adapter ke ListView
lv_languages.adapter = ArrayAdapter(this, simple_list_item_1, languages)
// menangani item saat dilklik
lv_languages.setOnItemClickListener { parent, view, position, id ->
Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()
}
}
}
…dan coba jalankan lagi aplikasinya:
![Menjalankan Aplikasi List View](https://d33wubrfki0l68.cloudfront.net/52e85cec2882db2dbacc9e4832d3f635f6e00463/7f810/img/android/kotlin/listview/listview-klik.gif)
Penjelasan:
Pada kotlin, kita bisa langsung memberikan listener dengan cara seperti ini:
// menangani item saat dilklik
lv_languages.setOnItemClickListener { parent, view, position, id ->
Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()
}
Lebih sederhana dibandingkan java bukan…
Pada kode di atas terdapat empat parameter yang perlu diperhatikan:
parent
adalah view dari induknya, dalam hal ini mengacu ke ListView;view
adalah view dari baris yang diklik yang ada di dalam ListView;position
adalah posisi item yang diklik;id
adalah ID dari view item yang diklik;
Kita menggunakan
position
untuk mengakses indeks dari List, sehingga menampilkan bahasa pemrograman yang diklik.Toast.makeText(this, "Anda memilih: ${languages[position]}",Toast.LENGTH_SHORT).show()
Kita menggunakan
Toast
untuk menampilkannya.
Selain menampilkan pesan
Toast
, kita juga bisa melakukan hal lain di sini. Misalnya: membuka activity lain, menghapus item dari list, dll.Share : Listview dengan ArrayAdapter Kotlin
Listview dengan ArrayAdapter Kotlin
4/
5
Oleh
anovandi
0 comments : Listview dengan ArrayAdapter Kotlin
0 comments : Listview dengan ArrayAdapter Kotlin