TUGAS PERTEMUAN KE-2 [APLIKASI DENGAN JETPACK COMPOSE]

Berikut merupakan dokumentasi dari aplikasi sederhana dengan Jetpack Compose yang telah saya buat dengan mengikuti tutorial dokumentasi yang pada Dasar-Dasar Jetpack Compose.

1. Memulai project Compose baru

Untuk memulai project baru menggunakan Compose, buka Android Studio terlebih dahulu. Jika anda berada di halaman Welcome to Andorid Studio, klik opsi Start a new Android Studio project. Namun, jika Anda sudah membuka proyek lain, pilih File > New > New Project dari menu di bagian atas. Selanjutnya, untuk membuat proyek baru, pilih template Empty Activity dari daftar template yang tersedia. 

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

• Project sudah dikonfigurasi untuk menggunakan Compose.
• File AndroidManifest.xml dibuat.
• File build.gradle.kts dan app/build.gradle.kts berisi opsi dan depedensi yang diperlukan untuk Compose.

Setelah proyek selesai disinkronkan, buka MainActivity.kt, lalu 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

2. Memulai Compose

Fungsi composable adalah fungsi reguler yang dianotasi dengan @Composable. Hal ini memungkinkan fungsi Anda memanggil fungsi @Composable lain di dalamnya. Anda 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.

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

view raw MainActivity.kt hosted with ❤ by GitHub

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). Anda menggunakan setContent untuk menentukan tata letak, tetapi alih-alih menggunakan file XML seperti yang biasa Anda lakukan di sistem View tradisional, Anda memanggil fungsi Composable di dalamnya.

	class MainActivity : AppCompatActivity() {
	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")
	}
	}
	}
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

3. Menyesuaikan UI

Mari mulai dengan menetapkan warna latar belakang yang berbeda untuk Greeting. Anda dapat melakukannya dengan menggabungkan composable Text dengan Surface. Surface membutuhkan warna, jadi gunakan MaterialTheme.colorScheme.primary.

Hasil running aplikasi pada Android Virtual Device:

Hasil modifikasi aplikasi :

Berikut adalah beberapa modifikasi yang saya lakukan pada tampilan sebelumnya :

1. Mengubah beberapa value dari dummy text serta melakukan penyesuaian dari yang sebelumnya merupakan hard code menjadi menggunakan string resources dari  Strings.xml untuk menyimpan dummy text.
2. Mengubah warna tema yang sebelumnya biru menjadi merah muda pada  Theme.kt.
3. Menambahkan  BackHandler  agar memudahkan user untuk kembali ke halaman Onboarding Screen.

Video Demo

Github Link