Tugas 6: Latihan Membuat Aplikasi Android Kalkulator Sederhana - Jetpack Compose

Nama     : Helsa Nesta Dhaifullah

NRP       : 5025201005
Kelas      : PPB I - 2024
Github   : Link repository

Selamat datang kembali!!! Di postingan kali ini, kita akan berlatih lagi untuk membuat aplikasi Android dengan Jetpack Compose. Aplikasi yang akan dibuat adalah Kalkulator Sederhana, dimana akan ada dua textField untuk input pengguna dan beberapa button untuk kalkulasi hasil dari penjumlahan, pengurangan, perkalian, dan pembagian dari kedua angka yang diinputkan oleh pengguna. Berikut adalah demo aplikasi kalkulator sederhana yang akan kita buat. 

Tampilan Awal Kalkulator Sederhana

Tampilan Toast Hasil Penjumlahan dan Pengurangan

Tampilan Toast Hasil Perkalian dan Pembagian

Tanpa berlama-lama lagi, gasss langsung ke bagian Tutorial di bawah ini dan ikuti langkah-langkahnya.

TUTORIAL

1. Membuat Project Baru
   
   Pertama, buka Android Studio kalian dan buat project baru dengan template empty activity. Beri nama aplikasi yang akan dibuat sesuai keinginan kalian. Buatlah yang mudah dan sesuai dengan aplikasi yang akan dibangun, misalnya disini saya menetapkan nama aplikasinya adalah SimpleCalculator.
   

   

   Buat project baru dengan template Empty Activity

   
   

   

   Beri nama project baru

   
   
2. Hapus Fungsi Greeting
   Setelah gradle selesai proses build, Anda akan melihat adanya fungsi Greeting() di fungsi MainActivity.kt sebagai default ketika membuat project baru. Kita tidak membutuhkan fungsi Greeting(), jadi hapuslah. Kita akan membuat fungsi composable sendiri untuk membentuk UI dari aplikasi simple calculator di langkah selanjutnya.
   

   

   Hapus bagian fungsi Greeting() di MainActivity.kt

   
   
3. Buat Field Input angka 1 dan angka 2
   Hal pertama yang harus kalian lakukan adalah buat variabel num1 dan num2 untuk menampung angka pertama dan kedua menggunakan remember dan mutableStateOf("0") untuk menyimpan nilai secara persisten. Ini akan memastikan nilai-nilai tersebut diingat oleh komposisi, dan nilai awalnya adalah "0". Selain itu, buat juga variabel context menggunakan LocalContext.current untuk mengakses konteks lokal saat ini dalam aplikasi Android, yang diperlukan untuk melakukan berbagai tugas, seperti mengambil sumber daya, memulai aktivitas, atau mengakses preferensi bersama.
   
   Selanjutnya, gunakan TextField untuk menciptakan dua input pengguna yang terhubung dengan num1 dan num2. Tetapkan value dari TextField pertama ke num1 dan yang kedua ke num2, sehingga nilainya selalu sesuai. Fungsi onValueChange untuk masing-masing TextField akan mengupdate num1  dan num2 sesuai dengan input baru dari pengguna. Dengan ini, Anda telah membuat dua input pengguna yang terhubung dengan variabel num1 dan num2, memastikan bahwa nilai-nilainya terus terupdate sesuai dengan input yang diberikan.
   
   Terakhir, Susunlah tata letak TextField tersebut sehingga tersusun secara vertikal dengan menggunakan Column. 
   

   

   Deklarasi Variabel dan Membuat TextField Input Pengguna

   
   
4. Buat Tombol Add, Sub, Mul, dan Div beserta Toast hasilnya
   Untuk membuat tombol, kita bisa menggunakan komponen Button dari Composable. Seperti yang terlihat dari hasil akhir Aplikasi, terdapat empat tombol: tombol untuk operasi penambahan (Add), pengurangan (Sub), perkalian (Mul), dan pembagian (Div). Ketika salah satu tombol ditekan, fungsi onClick dipanggil. Fungsi ini melakukan operasi matematika yang sesuai dengan tombol yang ditekan, yaitu penambahan, pengurangan, perkalian, atau pembagian, menggunakan nilai num1 dan num2. Hasil operasi tersebut kemudian ditampilkan menggunakan Toast.makeText(). Untuk mengakses konteks aplikasi yang diperlukan untuk menampilkan toast, kita menggunakan context yang telah didefinisikan sebelumnya dengan LocalContext.current.
   
   Spacer digunakan untuk memberikan ruang horizontal antara tombol-tombol tersebut untuk tata letak yang lebih baik. Selain itu gunakan komponen Row dari Composable untuk menempatkan elemen-elemen Button secara horizontal dalam satu baris. Komponen tersebut diletakkan di bawah TextField sehingga masih di dalam tata letak Column.
   

   

   Button untuk Penambahan dan Pengurangan

   
   

   

   Button untuk Perkalian dan Pembagian

KODE SOLUSI