Tugas 2 PPB G - Membuat Aplikasi Hello Android Sederhana Menggunakan Jetpack Compose

Tugas Pertemuan 2 PPB G 2025

oleh : Arfi Raushani Fikra (5025211084)

Pada pertemuan ke-2 ini, kami diminta untuk membuat sebuah aplikasi sederhana. Aplikasi ini merupakan contoh sederhana penggunaan Jetpack Compose untuk membuat UI di Android. Aplikasi ini memiliki tombol yang harus diklik terlebih dahulu sebelum menampilkan teks "Hello Android!".
adapun fitur utamanya yaitu:
  • State Management: Menggunakan remember { mutableStateOf(false) } untuk mengontrol tampilan teks.
  • Composable Functions: Memisahkan UI ke dalam fungsi GreetingScreen.
  • Material 3 Components: Menggunakan Button, Text, dan Scaffold untuk tampilan modern.
  • Preview: Menyediakan preview langsung di Android Studio.
Source code dapat dilihat disini

Berikut penjelasan kodenya

Fungsi MainActivity

  • onCreate memanggil setContent {} untuk menginisialisasi UI menggunakan Jetpack Compose.
  • enableEdgeToEdge() memastikan aplikasi berjalan dalam mode layar penuh.
  • Menggunakan Scaffold untuk tata letak dasar aplikasi.
Fungsi GreetingScreen

  • var showText by remember { mutableStateOf(false) }
    • Menggunakan state untuk menyimpan status apakah teks "Hello Android!" akan ditampilkan atau tidak.
  • Button(onClick = { showText = true })
    • Saat tombol ditekan, showText berubah menjadi true, sehingga teks akan muncul di atas tombol.
  • Column dengan Arrangement.Center dan Alignment.CenterHorizontally
    • Mengatur elemen UI agar berada di tengah layar.
Preview (@Preview)

  • Fungsi GreetingPreview memungkinkan melihat UI langsung di Android Studio tanpa perlu menjalankan emulator.

Berikut hasil dari aplikasinya, dijalankan pada sebuah emulator.


Aplikasi ini menunjukkan bagaimana Jetpack Compose dapat digunakan untuk mengelola state dan membangun UI interaktif dengan kode yang lebih ringkas dibandingkan pendekatan XML konvensional.


terima kasih

Comments

Post a Comment

Popular posts from this blog

Tugas 1 Presentasi Evolusi Teknologi Bergerak PPB G

Image
Tugas Pertemuan 1 PPB G 2025 oleh : Arfi Raushani Fikra (5025211084) Pada pertemuan ke-1 ini, kami diminta untuk membuat presentasi tentang evolusi teknologi perangkat bergerak. Penjelasan ini terbagi ke dalam beberapa periodisasi. Setiap periodisasi memiliki peningkatan teknologinya masing-masing. Pemaparan dibahas pada video berikut. Link Video Youtube Presentasi Evolusi Teknologi Bergerak Terima Kasih
Read more

Tugas 5 PPB G - Membuat Aplikasi Kalkulator Sederhana Menggunakan Jetpack Compose

Image
  Tugas Pertemuan 5 PPB G 2025 oleh : Arfi Raushani Fikra (5025211084) Pada pertemuan ke-5 ini, kami diminta membuat aplikasi Kalkulator sederhana.  Aplikasi ini adalah kalkulator sederhana yang dibuat menggunakan Jetpack Compose di Android Studio dengan Kotlin . Pengguna dapat memasukkan dua angka dan memilih operasi matematika dasar ( penjumlahan, pengurangan, perkalian, dan pembagian ) untuk mendapatkan hasilnya. Source Code dapat dilihat  disini Berikut penjelasan kodenya a. MainActivity.kt Kelas MainActivity bertindak sebagai titik masuk utama aplikasi. Di dalamnya, UI dikonstruksi dengan fungsi setContent { CalculatorApp() } , yang memanggil fungsi Composable utama. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { CalculatorA...
Read more

ETS PPB G - Membuat Aplikasi Centry: Money Tracker App Menggunakan Jetpack Compose

Image
  Evaluasi Tengah Semester PPB G 2025 oleh :  Arfi Raushani Fikra (5025211084) Farhan Dwi Putra (5025211093) Pada Evaluasi Tengah Semester ini, kami membuat a plikasi android Centry.  Centry Money Tracker adalah aplikasi Android sederhana untuk membantu pengguna dalam mencatat dan melacak pemasukan dan pengeluaran harian mereka. Proyek ini dikembangkan menggunakan Kotlin dan Jetpack Compose. Source Code dapat dilihat  disini a. Fitur Utama Tambah pemasukan dan pengeluaran dengan mudah Lihat histori transaksi UI modern menggunakan Jetpack Compose b. Struktur Proyek centry/ ├── ui/ │ ├── screens/ │ │ ├── HomeScreen.kt │ │ └── AddTransactionScreen.kt │ │ └── AnalyticsScreen.kt │ ├── components/ │ │ └── TransactionItem.kt │ │ └── TransactionGroupCard.kt │ ├── theme/ │ │ └── Color.kt │ │ └── Theme.kt │ │ └── Type.kt ├── model/ │ └── Transaction.kt │ └── TransactionType.kt ├── viewmodel/ │ └── TransactionViewModel.kt ├─...
Read more