Tugas 2 PPB G - Membuat Aplikasi "Hello Android" dengan Jetpack Compose

Muhammad Fahmi Syahputra 

5025221302 - PPB (G)

Pendahuluan

Kali ini akan membahas cara membuat aplikasi Android sederhana dengan memanfaatkan Jetpack Compose. Jetpack Compose adalah framework deklaratif modern untuk membangun UI di Android. Dengan Compose, kita bisa membuat antarmuka pengguna secara langsung menggunakan bahasa Kotlin, tanpa perlu menggunakan XML.

Disini kita akan membuat aplikasi sederhana yang menampilkan teks "Hello, Android!" menggunakan Jetpack Compose. Dan kita akan membahas tiga bagian utama dalam kode, yaitu:

  1. MainActivity – Entry point aplikasi.
  2. Greeting – Fungsi untuk menampilkan teks.
  3. GreetingPreview – Pratinjau/Preview UI nya tanpa menjalankan aplikasi.

1. MainActivity – Entry Point Aplikasi


MainActivity adalah entry point aplikasi Android yang merupakan subclass dari ComponentActivity, yang mendukung Jetpack Compose. Disini terdapat beberapa fungsi seperti : 


onCreate(savedInstanceState: Bundle?)

  • Fungsi ini dipanggil ketika aplikasi pertama kali dijalankan.

enableEdgeToEdge()

  • Lalu mengaktifkan tampilan edge-to-edge agar UI bisa menggunakan seluruh layar.

setContent { ... }

  • Kemudian fungsi ini digunakan untuk menampilkan UI menggunakan Jetpack Compose.

BasicsCodelabTheme { ... }

  • Kita juga menerapkan tema aplikasi ini agar UI nya memiliki gaya yang konsisten.

Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding -> ... }

  • Scaffold adalah container utama yang menangani layout, termasuk TopAppBar, BottomNavigation, dan konten utama.

  • fillMaxSize() membuat UI memenuhi layar penuh.

  • innerPadding digunakan untuk memberikan ruang agar konten tidak tertutup elemen UI sistem.

Memanggil Greeting("Android")

  • Terakhir fungsi Greeting() digunakan untuk menampilkan teks dengan padding bawaan dari Scaffold.


2. Greeting – Menampilkan teks "Hello Android!"

@Composable
  • Ini untuk menandakan bahwa Greeting() adalah fungsi UI di Jetpack Compose. Artinya, fungsi ini bisa digunakan untuk membuat tampilan UI di Compose.
Greeting(name: String, modifier: Modifier = Modifier)
  • Menerima parameter “name” yang digunakan untuk membuat teks dinamis.
  • Menerima modifier yang memungkinkan modifikasi lebih lanjut (misalnya padding, ukuran, warna).
Text(text = "Hello $name!", modifier = modifier)
  • Menampilkan teks "Hello, Android!". modifier digunakan untuk menyesuaikan tampilan (misalnya padding dari Scaffold).

3. GreetingPreview – Pratinjau/Preview UI nya tanpa menjalankan aplikasi.

@Preview(showBackground = true)
  • Preview ini menandakan bahwa fungsi ini digunakan untuk pratinjau/preview UI di Android Studio tanpa menjalankan emulator.
GreetingPreview()
  • Fungsi ini memanggil Greeting("Android"), dan membungkusnya dalam tema BasicsCodelabTheme yang kita gunakan.

Hasil Preview



Jadi pada tugas kali ini kita mempelajari bahwa kita bisa membangun UI tanpa XML menggunakan Jetpack Compose. MainActivity bertindak sebagai titik masuk aplikasi, lalu Greeting untuk menangani tampilan teks, dan GreetingPreview yang memungkinkan kita melihat hasilnya tanpa menjalankan emulator. Sehingga penggunaan Jetpack Compose membuat lebih efisien dan fleksibel untuk membangun UI Android tanpa adanya kompleksitas XML.

Comments

Post a Comment

Popular posts from this blog

Final Project PPB G

Image
Final Project PPB (G) 👤 Anggota Kelompok: 5025221302 - Muhammad Fahmi Syahputra 5025221315 - Fairuz Fuadi 1. Judul Proyek ClassMate: Aplikasi Manajemen Jadwal, Tugas, dan Catatan Mahasiswa 2. Deskripsi Singkat Proyek Tema: Produktivitas & Manajemen Akademik Tujuan: Membantu mahasiswa dalam mengelola jadwal perkuliahan, tugas, dan catatan penting secara terpusat dan terstruktur. Target Pengguna: Mahasiswa tingkat sarjana atau diploma yang ingin merapikan seluruh kegiatan akademiknya dalam satu aplikasi mobile yang ringan dan sederhana. ClassMate adalah aplikasi mobile berbasis Android yang dirancang untuk membantu mahasiswa dalam mengelola aktivitas perkuliahan sehari-hari. Aplikasi ini menyediakan empat layanan utama: Manajemen Jadwal Kuliah Manajemen Tugas Mahasiswa Catatan Pribadi  Profil Pengguna Figur utama dari aplikasi ini adalah seorang mahasiswa yang ingin tetap terorganisir dan produktif selama masa kuliah. Dengan tampilan yang simple dan modern, ClassMate memban...
Read more

Tugas 9 - PPB G Aplikasi Woof

Image
 Muhammad Fahmi Syahputra  5025221302 - PPB (G) Link GitHub : https://github.com/fahmisyahputra/app-woof Pada tugas kali ini, saya membuat sebuah aplikasi Woof  dengan menerapkan Jetpack Compose dan  bahasa pemrograman   Kotlin .  Aplikasi ini adalah katalog anjing yang menampilkan daftar anjing beserta detail nama dan usia dalam bentuk card. File 1: MainActivity.kt File ini adalah entry point utama aplikasi. Di dalam onCreate() , kita menggunakan setContent {} untuk mengatur UI berbasis Jetpack Compose. Aplikasi dibungkus dengan WoofTheme {} agar seluruh tampilan konsisten mengikuti tema yang telah disediakan (baik untuk light mode maupun dark mode). Di dalamnya, fungsi WoofApp() dipanggil untuk menampilkan semua konten utama. Fungsi WoofApp() Fungsi ini memanfaatkan Scaffold sebagai layout utama, yang menyediakan Top App Bar dan isi konten di bawahnya. Di bagian atas ada WoofTopAppBar() (menampilkan logo dan nama aplikasi). Di bagian...
Read more