Aplikasi Sederhana dengan Jetpack Compose 📱

Furstin Aprilavia Putri - 5025221234

Membuat aplikasi sederhana dengan Jetpack Compose 📱

1. Instalasi Android Studio

Untuk memulai, unduh Android Studio dari developer.android.com dan ikuti proses instalasi. Setelah instalasi selesai, buka Android Studio dan buat proyek baru dengan memilih "Empty Activity". Bahasa pemrograman yang digunakan adalah Kotlin, lalu klik Finish dan tunggu hingga proyek siap digunakan.

2. Aplikasi Sederhana

Kode lengkap bisa dilihat di GitHub : https://github.com/furstinvia/ppb-d-2-helloandroid.git

Implementasi MainActivity

Pada MainActivity, metode onCreate() memanggil setContent untuk menentukan tampilan utama aplikasi dengan tema yang sudah didefinisikan dalam HelloAndroidTheme. Fungsi MyApp() kemudian dipanggil untuk menampilkan dua elemen sapaan (Greeting).

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloAndroidTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(vertical = 4.dp)) {
        Greeting(name = "Android")
        Greeting(name = "Furstin")
    }
}

Membuat Komponen Greeting

Fungsi Greeting() adalah komponen utama yang menampilkan teks sapaan dengan nama yang diberikan sebagai parameter. Komponen ini memiliki tombol interaktif untuk menampilkan atau menyembunyikan teks tambahan.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    var expanded by remember { mutableStateOf(false) }

    Surface(
        color = Color(0xFF6200EE),
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = "Hello",
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Text(
                    text = name,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Medium,
                    color = Color.White
                )
                if (expanded) {
                    Text(
                        text = "Informasi $name.",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Light,
                        color = Color.White,
                        textAlign = TextAlign.Justify
                    )
                }
            }
            ElevatedButton(
                onClick = { expanded = !expanded },
                colors = ButtonDefaults.elevatedButtonColors(containerColor = Color.White)
            ) {
                Text(
                    text = if (expanded) "Show less" else "Show more",
                    color = Color(0xFF6200EE)
                )
            }
        }
    }
}

Dengan Jetpack Compose, kita bisa membangun UI Android dengan cara yang lebih sederhana dan deklaratif. Proyek ini menunjukkan bagaimana membuat komponen sederhana, mengatur warna dan font, serta menambahkan interaktivitas dengan tombol.

3. Video Presentasi

atau klik disini

Referensi 

https://developer.android.com/codelabs/jetpack-compose-basics?hl=id#0

Kode Lengkap

package com.example.helloandroid

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp
import com.example.helloandroid.ui.theme.HelloAndroidTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloAndroidTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(vertical = 4.dp)) {
        Greeting(name = "Android")
        Greeting(name = "Furstin")
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    var expanded by remember { mutableStateOf(false) }

    Surface(
        color = Color(0xFF6200EE),
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = "Hello",
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White
                )
                Text(
                    text = name,
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Medium,
                    color = Color.White
                )
                if (expanded) {
                    Text(
                        text = "Informasi $name",
                        fontSize = 16.sp,
                        fontWeight = FontWeight.Light,
                        color = Color.White,
                        textAlign = TextAlign.Justify
                    )
                }
            }
            ElevatedButton(
                onClick = { expanded = !expanded },
                colors = ButtonDefaults.elevatedButtonColors(containerColor = Color.White)
            ) {
                Text(
                    text = if (expanded) "Show less" else "Show more",
                    color = Color(0xFF6200EE)
                )
            }
        }
    }
}

@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetingPreview() {
    HelloAndroidTheme {
        MyApp()
    }
}