TUGAS 2 PPB - KEYSA ANADEA 5025211028

TUGAS 2 PPB

Deskripsi Proyek: Aplikasi Android "Hello World" dengan Jetpack Compose

Nama: Keysa Anadea Aqiva Ajie

NRP: 5025211028

Kelas: PPB A

Nama Proyek: HelloWorldApp

Teknologi yang Digunakan:

• Bahasa Pemrograman: Kotlin
• Framework UI: Jetpack Compose
• Arsitektur: Material 3
• Android Studio: Untuk pengembangan dan debugging
• Emulator/Perangkat Fisik: Untuk menjalankan aplikasi

---

1. Tampilan UI Sederhana dengan Jetpack Compose

Aplikasi ini menggunakan Jetpack Compose untuk membuat tampilan UI yang menampilkan:
Judul: "Hello World"
Nama Developer: "by Keysa Anadea"
NRP: "5025211028"
Semua elemen ini ditampilkan menggunakan Composable Function dalam MainActivity.kt.

2. Implementasi Tema dengan Material 3

Aplikasi ini menerapkan tema Material 3 dengan konsep Dark Mode & Light Mode yang telah didefinisikan di Theme.kt.

• Menggunakan warna kustom dari Color.kt.
• Mendukung Dynamic Color untuk Android 12+ menggunakan dynamicDarkColorScheme dan dynamicLightColorScheme.
• Menggunakan Typography kustom dari Typography.kt untuk konsistensi desain teks.

---

Alur Kerja Aplikasi

1. Saat aplikasi dibuka, MainActivity.kt akan dijalankan.
2. setContent { HelloWorldTheme { ... } } akan menerapkan tema yang diambil dari Theme.kt.
3. UI ditampilkan menggunakan fungsi HelloWorldScreen(), yang berisi teks "Hello World", nama, dan NRP.
4. Tema dan warna diatur berdasarkan preferensi pengguna (light/dark mode).

---

Kesimpulan & Manfaat

Aplikasi ini adalah contoh dasar dari Android Jetpack Compose yang menerapkan:

• Struktur kode yang rapi dan modular
• Penerapan tema Material 3
• Pemisahan UI dan logika bisnis dengan Compose
• Dukungan Dynamic Theming

Aplikasi ini bisa dikembangkan lebih lanjut dengan fitur tambahan, seperti tombol interaktif, animasi, atau navigasi ke halaman lain. 🚀✨

Hasil Kode:

Kode:

MainActivity.kt

package com.example.helloworld

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.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.helloworld.ui.theme.HelloWorldTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloWorldTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    HelloWorldScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun HelloWorldScreen(modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        Text(text = "Hello World", fontSize = 24.sp)
        Text(text = "by Keysa Anadea", fontSize = 20.sp)
        Text(text = "NRP 5025211028", fontSize = 20.sp)
    }
}

@Preview(showBackground = true)
@Composable
fun HelloWorldPreview() {
    HelloWorldTheme {
        HelloWorldScreen()
    }
}

Theme.kt

package com.example.helloworldtugasppb2.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

@Composable
fun HelloWorldTugasPPB2Theme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Color.kt

package com.example.helloworldtugasppb2.ui.theme

import androidx.compose.ui.graphics.Color

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)