Jetpack Compose: Create a person detail with only a username

Jetpack Compose: Create a Person Detail with Only a Username

In this example, we build a simple Jetpack Compose UI that displays a person's detail using only their username. This approach demonstrates how to create a minimal, reusable composable function that accepts a username string and renders it on the screen with basic styling.

Code

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun PersonDetail(username: String) {
  Column(modifier = Modifier.padding(16.dp)) {
    Text(
      text = "Username:",
      style = MaterialTheme.typography.titleMedium
    )
    Text(
      text = username,
      style = MaterialTheme.typography.bodyLarge
    )
  }
}

// Usage example inside a Surface container
@Composable
fun PersonDetailScreen() {
  Surface {
    PersonDetail(username = "johndoe123")
  }
}

Key Points

• Jetpack Compose makes it easy to create reusable UI components with simple parameters like a username string.
• Use basic layout composables such as Column and padding modifiers to structure and space your UI elements.
• MaterialTheme typography styles provide consistent text appearance across the app.
• Encapsulating UI in composable functions improves readability and reusability.