jetpack-compose

Jetpack Compose Best Practices

Jetpack Compose is the future of Android UI. Adhering to these guidelines ensures your composables are readable, maintainable, performant, and scalable. This is your definitive guide for building high-quality Compose applications.

1. Code Organization & Naming

1.1 Name Composables in PascalCase

Composable functions that emit UI must start with an uppercase letter (PascalCase). This clearly distinguishes them from regular Kotlin functions.

❌ BAD

@Composable
fun myButton(text: String) { /* ... */ }

✅ GOOD

@Composable
fun MyButton(text: String) { /* ... */ }

1.2 Standardize Parameter Order

Always order parameters consistently. This improves readability and makes composable APIs predictable.

1. modifier: Modifier = Modifier
2. Required data parameters
3. Optional UI-related styling parameters (e.g., color, shape, style)
4. Callback lambdas (onClick, onValueChange)
5. Trailing @Composable content lambdas

❌ BAD

@Composable
fun UserProfile(
    onClick: () -> Unit,
    user: User,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface
) { /* ... */ }

✅ GOOD

@Composable
fun UserProfile(
    user: User,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.surface,
    onClick: () -> Unit
) { /* ... */ }

1.3 Single Responsibility: Emit UI or Return a Value

A composable function must either emit UI content into the composition or return a value, but never both. If a composable needs to expose control surfaces, provide them as parameters.

❌ BAD

@Composable
fun MyTextWithId(text: String): String {
    Text(text)
    return "text_id_123" // Emits UI AND returns a value
}

✅ GOOD

@Composable
fun MyText(text: String) {
    Text(text)
}

fun generateTextId(text: String): String {
    return "text_id_${text.hashCode()}" // Pure function, no UI emission
}