Membuat Image Scroll dengan menggunakan Desain Material

Nama  : Naily Khairiya

NRP : 5025201244

Kelas : PPB - I

Tugas 8

Kita akan belajar membuat daftar yang dapat digulir di aplikasi menggunakan Jetpack Compose. Kita akan memperluas aplikasi Affirmations dengan menambahkan daftar afirmasi yang dapat digulir dengan gambar. Kita akan belajar membuat kartu Desain Material dan daftar yang dapat digulir menggunakan Jetpack Compose. Selain itu, kita akan menambahkan daftar yang dapat digulir ke dalam antarmuka pengguna (UI) aplikasi yang telah ada. Untuk melakukannya, kita memerlukan komputer dengan akses internet, browser web, serta Android Studio terinstal. Selain itu, kita juga membutuhkan akses ke GitHub untuk mengunduh kode awal proyek yang akan diperluas. Berikut hasil akhir dari tugas ini.

1️⃣ Membuat class data item daftar

Dalam pengembangan aplikasi Android, kita membuat class data Affirmation untuk merepresentasikan setiap item dalam daftar afirmasi. Class ini terdiri dari dua properti, stringResourceId dan imageResourceId, yang masing-masing mewakili ID dari teks dan gambar afirmasi.

Properti-properti tersebut dianotasikan dengan @StringRes dan @DrawableRes untuk menunjukkan bahwa mereka merupakan referensi ke resource string dan drawable. Selain itu, kita mengimplementasikan class Datasource untuk memuat daftar afirmasi menggunakan data yang telah ditentukan sebelumnya.

2️⃣ Menambahkan daftar ke aplikasi

Aplikasi ini bertujuan untuk menampilkan daftar afirmasi, dimulai dengan membuat kartu item daftar. Kartu tersebut terdiri dari gambar dan teks yang disusun secara vertikal. Dalam metode AffirmationCard(), sebuah komponen UI dibuat untuk menampilkan item afirmasi dengan menggunakan composable Card yang berisi composable Image dan Text. Dalam membuat komponen ini, diperhatikan parameter modifier dan contentScale untuk menyesuaikan tampilan. Selanjutnya, dengan membuat komponen AffirmationList() yang menggunakan LazyColumn, daftar afirmasi dapat ditampilkan dengan efisien, dengan meneruskan setiap item ke komponen AffirmationCard(). Akhirnya, dengan memanggil AffirmationList() dalam AffirmationsApp() dan memberikan data dari DataSource(), daftar afirmasi ditampilkan secara keseluruhan. Sumber kode dapat dilihat pada lampiran dibawah ini.

ANIMASI BOTOL AIR MENGGUNAKAN JETPACK COMPOSE CANVAS

Nama : Naily Khairiya

NRP : 5025201244

Kelas : PPB-I

Tugas 7

 

Animasi merupakan salah satu cara yang efektif untuk menarik perhatian pengguna dalam pengembangan aplikasi Android. Dalam blog ini, kita akan fokus pada membuat animasi botol air menggunakan Jetpack Compose Canvas, sebuah alat yang kuat untuk membangun antarmuka pengguna deklaratif di Android. 

Berikut merupakan hasil yang dibuat dari langkah yang nanti akan dijelaskan.

Langkah 1️⃣: Persiapan Proyek

Langkah pertama adalah mempersiapkan proyek Jetpack Compose yang baru. Kita dapat membuat proyek baru menggunakan Android Studio. 

Langkah 2️⃣: Membuat Botol Air

Setelah proyek Anda siap, langkah berikutnya adalah membuat botol air. Dalam kasus ini, kita akan membuat botol air sederhana menggunakan bentuk geometris dasar seperti persegi panjang dan lingkaran. Kita akan menggunakan Canvas untuk menggambar botol air ini. Berikut code yang telah dibuat.

Langkah 3️⃣: Membuat Main Activity

Sekarang kita akan menambahkan animasi ke botol air pada main activity seperti pada code berikut.

Kesimpulan

Dengan menggunakan Jetpack Compose Canvas, kita dapat membuat animasi yang menarik dan responsif di aplikasi Android kita. Dalam blog ini, kita telah belajar cara membuat animasi botol air yang sederhana namun efektif. Jangan ragu untuk mengeksplorasi lebih lanjut dan membuat animasi yang lebih kompleks sesuai dengan kebutuhan proyek Anda.

Terima kasih telah membaca! 🚀

KALKULATOR SEDERHANA DENGAN KOTLIN

Nama : Naily Khairiya

NRP : 5025201244

Kelas : PPB - I

Kalkulator adalah salah satu aplikasi yang sangat umum digunakan di perangkat Android. Dalam tugasini, kita akan membuat aplikasi kalkulator sederhana menggunakan Kotlin. Aplikasi ini akan memiliki antarmuka yang intuitif dan dapat melakukan operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Berikut merupakan video demo aplikasi yang sudah dibuat.

Langkah 1️⃣: Persiapan Proyek

1. Buka Android Studio dan buat proyek baru.
2. Pilih "Empty Activity" sebagai template proyek.
3. Beri nama proyek Anda dan atur bahasa pemrograman Kotlin.

Langkah 2️⃣: Desain Antarmuka Pengguna

Kita akan menggunakan XML untuk mendesain tata letak kalkulator. Berikut adalah kode XML untuk layout:

Langkah 3️⃣: Implementasi Logika Kalkulator

Mari kita implementasikan logika kalkulator. Berikut adalah kode Kotlin untuk MainActivity:

Langkah 4️⃣: Pengujian Aplikasi

Uji aplikasi di emulator atau perangkat Android fisik. Pastikan kalkulator dapat melakukan operasi dasar dengan benar seperti pada video demo di atas.

Kesimpulan

Kita telah berhasil membuat aplikasi kalkulator sederhana untuk Android menggunakan Kotlin. Kita telah belajar tentang mendesain antarmuka pengguna, mengimplementasikan logika kalkulator, dan menguji aplikasi. Selanjutnya, kita dapat menyesuaikan aplikasi ini dengan menambahkan fitur tambahan atau meningkatkan antarmuka pengguna.

Kode sumber lengkap proyek ini tersedia di GitHub.