UI Design Skill

Quick Start

ConstraintLayout

xml
1<androidx.constraintlayout.widget.ConstraintLayout>
2    <Button
3        android:id="@+id/btn"
4        android:layout_width="wrap_content"
5        android:layout_height="wrap_content"
6        app:layout_constraintStart_toStartOf="parent"
7        app:layout_constraintEnd_toEndOf="parent"
8        app:layout_constraintTop_toTopOf="parent" />
9</androidx.constraintlayout.widget.ConstraintLayout>

Jetpack Compose

kotlin
1Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
2    Text("Hello Compose", fontSize = 20.sp)
3    Button(onClick = { }) { Text("Click Me") }
4}

Material Design 3

kotlin
1Scaffold(
2    topBar = { TopAppBar(title = { Text("MyApp") }) }
3) { padding ->
4    // Content
5}

Key Concepts

Constraint Types

• Start/End, Top/Bottom
• Chains (spread, packed)
• Guidelines
• Barriers
• Bias

Compose State

kotlin
1var count by remember { mutableStateOf(0) }
2Button(onClick = { count++ }) { Text("Count: $count") }

Material Components

• Buttons (filled, outlined, text)
• Cards, FABs, Dialogs
• Navigation patterns
• Theme system

Best Practices

✅ Use ConstraintLayout for efficiency ✅ Implement Material Design ✅ Test on multiple screen sizes ✅ Optimize rendering performance ✅ Support accessibility

Resources

• ConstraintLayout Guide
• Compose Documentation
• Material Design 3