Modul Praktikum

Pemrograman Mobile – Kotlin & Jetpack Compose

Andi Nurkholis, S.Kom., M.Kom.

Afifudin

Fakultas Teknik dan Ilmu Komputer

Universitas Teknokrat Indonesia
2021
3 Modifiers dan Image Card
A. Modifier

Modifier atau Perubahan merupakan sebuah fungsi yang dapat digunakan untuk
mengubah tampilan agar menjadi lebih indah atau dapat juga untuk menambahkan
fungsi lainnya pada aplikasi yang sedang dikembangkan. Hal yang dapat kita dapat
lakukan pada fungsi Modifier ini adalah :
1. Mengatur tampilan antarmuka pengguna atau User Interface yang meliputi
ukuran, tata letak, dan penambahan lainnya yang berkaitan pada User Interface.
2. Dapat digunakan untuk mempermudah pengembang dalam pembuatan aplikasi
3. Menjalankan fungsi proses atau alur aplikasi yang berjalan
4. Menambahkan fungsi dengan interaksi yang lebih baik, seperti dapat melakukan
fungsi klik, scroll, tarik dan lepas, atau juga dapat menggunakan fitur perbesar
tampilan.

Cara menambahkan library Modifier

Agar dapat menggunakan fungsi-fungsi yang ada pada modifier kita perlu
menambahkan sebuah library yang berfungsi sebagai penerjemah atau agar program
yang dibuat dapat mengerti dengan apa yang sedang dikerjakan.
a. Ketiklah sebuah perintah yang berkaitan dengan modifier agar android studio
dapat memberikan sebuah saran library yang sesuai dengan apa yang kita
lakukan. Dalam hal ini saya menggunakan contoh dengan code “Text(text =
“Universitas Teknokrat”)”, Dapat dilihat pada gambar dibawah.

b. Kemudian kita ketik code berikut

42 Pemrograman Mobile – Kotlin & Jetpack Compose

 c. Jika code yang sedang diketik berwarna merah, arahkan cursor pada text yang
berwarna merah. Maka akan tampil seperti berikut. Silahkan klik pada keyboard
anda alt + enter agar library modifier akan tersimpan.

d. Kemudian pilih library yang menggunakan “androidx.compose.ui” dapat di klik

atau enter

e. Jika code tidak berwarna merah artinya library berhasil terpasang

Mengatur Tampilan Antarmuka (User Interface) Dengan Modifier

Dalam mengatur sebuah perbuahan tampilan antarmuka kita dapat
mengandalkan fungsi-fungsi yang ada pada Modifier agar sebuah tampilan itu
membuat pengguna terasa nyaman menggunakan aplikasi yang telah kita kembangkan.
Berikut adalah beberapa contoh bagaimana menggunakan modifier untuk mengubah
sebuah tampilan/ interface. Silahkan siapkan halaman kosong atau file kt (Kotlin)
dengan jetpack compose. Maka tampilan awalnya akan menjadi sebagai berikut :

43 Pemrograman Mobile – Kotlin & Jetpack Compose

 Dalam melakukan testing atau uji coba tampilan kita akan melakukan
pembuatan tampilannya terlebih dahulu didalam “DefaultPreview”. Dikarenakan kita
dapat melihat hasil tampilan yang telah kita buat tanpa harus menginstalnya pada
smartphone.
1. Mengubah tampilan antar muka
a. Silahkan ketik code yang akan diubah latar belakangnya. Disini saya akan
memberikan contoh pada code “Text(text = “Teknokrat”)”. Dapat dilihat
pada gambar dibawah latarbelakang pada text “Teknokrat” masih berwarna
putih.

b. Selanjutnya kita akan menambahkan Modifier agar kita dapat mengubah

warna dari latar belakang text. Maka akan menjadi seperti berikut.

44 Pemrograman Mobile – Kotlin & Jetpack Compose

 c. Agar kita dapat menambahkan fungsi-fungsi modifier kita dapat
menambahkan titik (“ . ”) pada kata setelah Modifer, disini kita akan
mencoba mengubah warna background dari kata “Teknokrat” menjadi
warna merah. Dengan menambahkan code “.background(Color.Yellow)”
maka akan tampil seperti berikut.

d. Begitupula dengan fungsi-fungsi lainnya seperti penambahan lainnya

seperti penambahan fungsi padding seperti berikut ini.

Perlu di perhatikan tata letak pemanggilang fungsi diatas harap di

perhatikan, karena akan mempengaruhi hasil akhir tampilan yang akan di
buat.

e. Kita juga dapat menamahkan sebuah border pada bagian yang ingin kita
tambahkan. Seperti pada gambar berikut ini

45 Pemrograman Mobile – Kotlin & Jetpack Compose

 2. Menggunakan Modifier untuk Mengubah tata letak.
Untuk melakukan perubahan tata letak attribut yang akan dipakai, dapat
menggunakan fungsi Column/ Row yang sudah dipelajar pada materi
sebelumnya. Berikut adalah bagaimana cara kita agar dapat mengubah posisi
tata letak attribut sesuai yang kita inginkan.
a. Silahkan tambahkan fungsi Column pada code yang telah dibuat
sebelumnya.

b. Pindahkan attribut teks yang ada kedalam fungsi Column agar dapat diubah
sesuai column.

c. Untuk mengubah tata letak dari atribut text kita dapat menambahkan
modifier didalam fungsi Column seperti berikut, dan juga tambahkan fungsi

46 Pemrograman Mobile – Kotlin & Jetpack Compose

 “.filMaxSize()” agar kita dapat mengetahu tata letak atribut yang telah kita
pasang sebelumnya.

Dari gambar diatas kita dapat melihat bahwa sebenarnya atribut yang sedang
kita buat berada pada pojok kiri layar. Lalu bagaimana cara agar kita dapat
menubah tata letak dari atribut tersebut.

d. Untuk membuat agar posisi teks atau atribut yang akan tampil berada pada
bagian kiri atas tampilan android kita dapat menambahkan code sebagai
berikut.

Perhatikan pada bagian horizontalAlignment dan verticalArrangement yang

mengindikasikan bahwa atribut atau teks diatas akan dimulai dari posisi
yang telah di tentukan pada Column. Jika menggunakan start maka posisi
atribut akan berada pada posisi Kiri.

e. Jika kita menggunakan CenterHorizontally pada horizontalAlignment maka

akan membuat atribut atau text yang buat akan menjadi seperti berikut.

47 Pemrograman Mobile – Kotlin & Jetpack Compose

 f. Jika kita menggunakan End pada horizontalAlignment maka akan membuat
atribut atau text yang buat akan menjadi seperti berikut.

g. Untuk mengubah posisi vertical pada atribut yang telah di buat kita dapat
mengubah pada bagian verticalArrangement menjadi yang diinginkan
seperti berikut ini yang mengubah bagiannya menjadi ditengah tampilan.

h. Kita juga dapat mengatur posisi tampilan berada pada bagian bawa layar
android dengan menggunakan bottom agar posisi atribut berada dibawah.

Kita juga dapat mengatur posisi lainnya sesuai kombinasi atara

horizontalAlignment dan verticalArrangement tergantung keperluan yang
dibutuhkan untuk membangun sebuah tampilan yang sesuai.

48 Pemrograman Mobile – Kotlin & Jetpack Compose

B. Image Card

Image card merupakan hal yang wajar pada pembuatan aplikasi android. Yang
bertujuan agar kita dapat memasukan gambar pada tampilan atau aplikasi yang sedang
kita kembangkan. Sebelumnya kita akan mempelajari tahap-tahapan yang dapat
dilakukan untuk memasukan sebuah gambar ke dalam aplikasi android. Berikut ini
adalah hal yang dapat di pelajari pada bab ini.
1. Memasukan Gambar Kedalam Project Android Studio
2. Menampilkan Gambar Pada Aplikasi Android
3. Menerapkan Image Card Pada Gambar.

Memasukan Gambar Kedalam Project

1. Siapkan gambar yang ingin dimasukan kedalam project, disini sudah disiapkan
gambar yang akan dimasukan kedalam project yaitu “sky.jpg”.

2. Kemudian Buka project yang akan ditambahkan gambar kedalamnya. Dapat

dilihat pada menu yang ada disebelah kiri silahkan buka App -> Res ->
Drawable hingga tampilannya menjadi seperti berikut.

49 Pemrograman Mobile – Kotlin & Jetpack Compose

 3. Selanjutnya kita dapat Drag and Drop gambar yang telah kita siapkan tersebut
kedalam folder drawable tersebut.

4. Setelah gambar dimasukan maka akan tampil pemberitahuan seperti gambar

berikut. Silahkan klik Refactor agar gambar dapat dimasukan kedalam project.

50 Pemrograman Mobile – Kotlin & Jetpack Compose

 5. Jika sudah maka gambar yang dimasukan sudah dapat tampil seperti berikut.

Menampilkan Gambar Pada Aplikasi Android

1. Siapkan Empty Compose baru, lalu hapus bagian yang tidak di perlukan hingga
tampilannya seperti berikut.

51 Pemrograman Mobile – Kotlin & Jetpack Compose

 2. Kemudian Buatlah variabel yang akan menampung id gambar dan deskripsi.
Disini kita dapat membuat code pada DefaultPreviewImage atau didalam
setContent.

Yang perlu di perhatikan juga pada Code “R.drawable.sky” pada code tersebut
kita memanggil nama dari gambar yang telah dimasukan sebelumnya, jika nama
file yang dimasukan berbeda silahkan disesuaikan.

3. Selanjutnya buat sebuah composable dan method yang akan berfungsi sebagai
menampilkan gambar. tambahkan parameter pada method yang telah dibuat.

4. Selanjutnya masukan code berikut untuk menampilkan gambar.

52 Pemrograman Mobile – Kotlin & Jetpack Compose

 5. Lalu tambahkan method yang telah dibuat kedalam class utamanya maka
gambar akan tampil seperti berikut.

Menerapkan Image Card

1. Pertama tambahkan code Card baru pada method sebelumnya yang akan
menampilkan gambar. Isilah codenya sebagai berikut.

fungsi pada kode di atas adalah agar kita dapat mencetak gambar dengan desain
sesuai yang diinginkan, pada contoh diatas kita menggunkan :
a. Shape yang berguna untuk mengubah lekuk atau bentuk gambar sesuai
dengan cetakan yang digunakan, dapat dilihat pada code setelahnya yaitu
RoundedCornerShape yang membuat sisi ujung pada gambar melengkung.
b. Elevation yang berguna untuk membuat bayangan pada card aga terlihat
lebih baik.

53 Pemrograman Mobile – Kotlin & Jetpack Compose

 2. Kemudian kita kan membuat tempat dimana gambar tersebut akan dirangkup
agar menjadi ukuran yang diinginkan menggunakan Box.

3. Selanjutnya pindahkan code Image kedalam box yang baru saja kita buat dan
tambahkan codenya menjadi.

Fungsi contentScale pada code diatas adalah agar kita dapat mengatur ukuran
gambar yang akan ditampilkan salah satunya yang dapat kita gunakan pada kali
ini adalah Crop. Selain crop kita juga dapat menggunakan fungsi lainnya seperti
None, Inside, fit, Fill bounds, Fill Height, Fill Width.

54 Pemrograman Mobile – Kotlin & Jetpack Compose

 4. Kemudian kembali lagi kedalam bagian utama yang ada pada setContent atau
Preview dan tambahkan code berikut.

dapat dilihat ada tambahan code pada line 75 hingga 76, code ini berfungsi agar
kita dapat melihan ukuran full pada preview difitur android studio tetapi jika
kita melakukan testing secara langsung menggunakan android smartphone atau
simulator maka code tersebut dapat kita hilangkan.

Pada code Box yang ada pada line 79 ini berguna sebagai code yang berfungsi
sebagai pembungkus dari gambar yang tampil pada android, pembungkus ini
berfungsi agar gambar tidak melebar maka kita tambahkan code fillMaxWidth
didalamnya dan padding agar gambar tidak terlalu merapat kesisi layar
smarthphone.

5. Maka tampilan hasilnya akan menjadi seperti berikut ini.

55 Pemrograman Mobile – Kotlin & Jetpack Compose