android-kotlin-jetpack-compose

Membuat Projek untuk Jetpack Compose

 

 

1. Membuat Projek

Klik Menu File -> New -> New Project …

 

Lalu pilih Empty Activity lalu tekan tombol Next maka akan tampil jendela berikut ini:

Keterangan:

  • Name : ini adalah nama projekmu
  • Package name : ini nama package diisi dengan format sub domain terbalik
  • Language : isi dengan kotlin
  • Minimum SDK : ini disesuaikan dengan versi api dari handphone yang akan digunakan

Jika sudah selesai maka tekan tombol Finish

 

2. File MainActivity

Bukalah file MainActivity.kt dan isinya seperti berikut ini:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MuhibbinTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

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

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

Keterangan:

  • ComponentActivity() adalah class dasar yang digunakan oleh Jetpack Compose
  • enableEdgeToEdge() digunakan untuk menampilkan layout selebar dan setinggi layar
  • setContent adalah fungsi yang digunakan untuk menentukan isi dari tampilan aplikasi
  • MuhibbinTheme adalah kata gabungan dari nama aplikasimu dan kata Theme, ini adalah Theme dari Jetpack Compose
  • Scaffold adalah template untuk layout yang sudah menyediakan tempat bagi elemen top bar, bottom bar, floatingActionButton, snackbarHost dan drawerContent
  • @Composable adalah catatan yang digunakan untuk menandai bahwa kode fungsi dibawahnya ini digunakan untuk membangun tampilan ke user
  • Text() adalah fungsi dari Jetpack Compose untuk membuat Teks
  • @Preview  adalah catatan yang digunakan untuk menampilkan hasil di bagian design tanpa menjalankan emulator

 

3. Jalankan Aplikasi

Pilih virtual devicemu lalu tekan tombol Play