Tugas Pertemuan 2 PPB - Membuat aplikasi sederhana dengan Jetpack Compose

Nama	Akmal Sulthon Fathulloh
NRP	5025211047
Kelas	PPB - D

Pada pertemuan kali ini, kita diminta untuk belajar menggunakan Jetpack Compose dan membuat aplikasi pertama sederhana yang mencetak tulisan "Hello World". Dalam mengerjakan ini, saya mengikuti dokumentasi resmi mengenai Dasar-Dasar Jetpack Compose. Berikut adalah dokumentasi dan hasil aplikasi yang telah dibuat.

Memulai Project Compose Baru

Untuk memulai project Compose baru, buka Android Studio. Jika baru memulai di jendela Welcome to Android Studio, klik Start a new Android Studio project. Jika sudah membuka project Android Studio, pilih File > New > New Project dari panel menu. Untuk project baru, pilih Empty Activity dari template yang tersedia.

Saat memilih template Empty Activity, kode berikut akan dibuat secara otomatis dalam project:

Project sudah dikonfigurasi untuk menggunakan Compose.
File MainActivity.kt sudah diubah untuk menggunakan Compose.
File build.gradle.kts dan app/build.gradle.kts berisi opsi dan dependensi yang diperlukan untuk Compose.

Setelah menyinkronkan project, buka MainActivity.kt dan periksa kodenya.

	class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContent {
	BasicsCodelabTheme {
	// A surface container using the 'background' color from the theme
	Surface(
	modifier = Modifier.fillMaxSize(),
	color = MaterialTheme.colorScheme.background
	) {
	Greeting("Android")
	}
	}
	}
	}
	}

	@Composable
	fun Greeting(name: String, modifier: Modifier = Modifier) {
	Text(
	text = "Hello $name!",
	modifier = modifier
	)
	}

	@Preview(showBackground = true)
	@Composable
	fun GreetingPreview() {
	BasicsCodelabTheme {
	Greeting("Android")
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Memulai Compose

Fungsi composable adalah fungsi reguler yang dianotasi dengan @Composable. Hal ini memungkinkan fungsi ini memanggil fungsi @Composable lain di dalamnya. Kita dapat melihat cara fungsi Greeting ditandai sebagai @Composable. Fungsi ini akan menghasilkan bagian hierarki UI yang menampilkan input yang diberikan, yaitu String. Text adalah fungsi composable yang disediakan oleh library.

Dengan Compose, Activity tetap menjadi titik entri ke aplikasi Android. Di project kita, MainActivity diluncurkan saat pengguna membuka aplikasi (seperti yang ditetapkan dalam file AndroidManifest.xml). Kita menggunakan setContent untuk menentukan tata letak, tetapi alih-alih menggunakan file XML seperti yang biasa Anda lakukan di sistem View tradisional, kita memanggil fungsi Composable di dalamnya.

Menyesuaikan UI

Kita dapat menerapkan warna latar belakang yang berbeda untuk Greeting dengan menggabungkan compsable Text dengan Surface. Surface membutuhkan warna, jadi kita dapat menggunakan MaterialTheme.colorScheme.primary. Berikut adalah fungsi yang telah kita modifikasi.

Berikut adalah hasil setelah kita menambahkan latar belakang biru dan padding.

	import androidx.compose.foundation.layout.padding
	import androidx.compose.ui.unit.dp
	// ...

	@Composable
	fun Greeting(name: String, modifier: Modifier = Modifier) {
	Surface(color = MaterialTheme.colorScheme.primary) {
	Text(
	text = "Hello $name!",
	modifier = modifier.padding(24.dp)
	)
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Berikut adalah hasil running aplikasi pada Android Virtual Device.

Modifikasi

Saya melakukan beberapa modifikasi dan penyesuaian pada kode sebelumnya. Berikut adalah perubahan yang saya lakukan.

Mengubah warna primary menjadi ungu pastel
Mengubah beberapa string teks menjadi berbahasa Indonesia
Memperbaiki string hardcoded dengan menggunakan string resources (res/values/strings.xml) untuk menyimpan teks
Menambahkan Modifier.fillMaxWidth() di OnboardingScreen agar elemen di dalamnya lebih fleksibel
Menambahkan BackHandlersupaya ketika pengguna menekan tombol back, aplikasi kembali ke Onboarding Screen.

Berikut adalah hasil running aplikasi dari kode yang telah saya modifikasi.