Tugas Pertemuan ke-8 [Woof App]

Woof App - Material Design Code Implementation

Woof App adalah aplikasi Android yang dikembangkan untuk mempelajari implementasi Material Design 3 dengan Jetpack Compose. Aplikasi ini menampilkan daftar anjing dengan theming yang konsisten menggunakan Material Design components dan color system.

📚 Akses Android Codelab: Material Theming dengan Jetpack Compose

Implementasi Material Theme

@Composable
fun WoofTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }

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

📝 Penjelasan Material Theme

Function WoofTheme adalah custom theme yang mengatur color scheme berdasarkan dark/light mode sistem. MaterialTheme component menggabungkan colorScheme, typography, dan shapes untuk konsistensi UI.

Color Scheme Definition

val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    onPrimaryContainer = md_theme_light_onPrimaryContainer,
    secondary = md_theme_light_secondary,
    onSecondary = md_theme_light_onSecondary,
    surface = md_theme_light_surface,
    onSurface = md_theme_light_onSurface
)

🎨 Color System Material Design 3

LightColorScheme mendefinisikan warna untuk mode terang. Setiap color role memiliki pasangan (primary/onPrimary) untuk memastikan kontras yang cukup dan aksesibilitas yang baik.

Typography System

val Typography = Typography(
    displayLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 57.sp,
        lineHeight = 64.sp,
        letterSpacing = 0.sp
    ),
    bodyLarge = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    )
)

📝 Typography Scale

Typography system mendefinisikan text styles yang konsisten. Material Design 3 menyediakan scale dari displayLarge hingga labelSmall dengan proporsi yang harmonis.

Dog Card Component

@Composable
fun DogCard(
    dog: Dog,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
                .sizeIn(minHeight = 72.dp)
        ) {
            DogIcon(dog.imageResourceId)
            DogInformation(dog.name, dog.age)
        }
    }
}

🐕 Component Structure

DogCard menggunakan Material Card dengan elevation. Row layout mengatur DogIcon dan DogInformation horizontally. Padding dan sizeIn memastikan spacing yang konsisten.

Surface dan Elevation

@Composable
fun DogIcon(
    @DrawableRes dogIcon: Int,
    modifier: Modifier = Modifier
) {
    Surface(
        modifier = modifier
            .size(72.dp)
            .clip(RoundedCornerShape(8.dp)),
        color = MaterialTheme.colorScheme.surface
    ) {
        Image(
            painter = painterResource(dogIcon),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
    }
}

🖼️ Surface Component

Surface component memberikan background dan elevation. Menggunakan MaterialTheme.colorScheme.surface untuk warna yang adaptif terhadap theme. RoundedCornerShape memberikan sudut melengkung.

Fungsi Utama Material Design Code

• 1. MaterialTheme Wrapper
  Menyediakan theme context untuk seluruh aplikasi dengan colorScheme, typography, dan shapes yang konsisten.
• 2. Color Scheme Management
  Mengelola color roles yang semantik dan adaptif terhadap light/dark mode untuk aksesibilitas optimal.
• 3. Component Consistency
  Memastikan semua UI components menggunakan design tokens yang sama untuk visual harmony.

Komponen Material Design

🎨

ColorScheme

Sistem warna yang semantik dan adaptif

📝

Typography

Hierarki text dengan scale yang harmonis

🔳

Surface

Background component dengan elevation

📱

Card

Container component dengan shadow

Kesimpulan: Implementasi Material Design dalam Woof App menunjukkan cara menggunakan design system yang konsisten dengan Jetpack Compose. Code structure yang baik memungkinkan theming yang fleksibel dan maintenance yang mudah.

Tampilan Aplikasi

Dark Mode

Light Mode

Video Demonstrasi

Source Code Repository

📂 Access Source Code

🔗 View on GitHub

Complete source code untuk Woof App dengan Material Design implementation