Jetpack Compose Components
Jetpack Compose is Google's modern toolkit for building native Android UIs, offering a more intuitive and efficient way to create user interfaces compared to the traditional XML-based approach.
Basic Components
Text: Displays text:
Text(text = "Hello, Jetpack Compose!")
Button: A clickable button:
Button(onClick = { /* Do something */ }) {
Text("Click me")
}
Image: Displays an image:
Image(painter = painterResource(id = R.drawable.example),
contentDescription = "Example Image")
Icon: Displays an icon:
Icon(Icons.Default.Favorite,
contentDescription = "Favorite Icon")
Layout Components
Column: Arranges children vertically:
Column {
Text("First item")
Text("Second item")
}
Row: Arranges children horizontally:
Row {
Text("First item")
Text("Second item")
}
Box: Allows stacking children on top of each other:
Box {
Text("Bottom item")
Text("Top item")
}
Spacer: Creates an empty space:
Spacer(modifier = Modifier.height(16.dp))
Interactive Components
TextField: Input field for text:
var text by remember { mutableStateOf("") }
TextField(value = text, onValueChange = { text = it })
Checkbox: A checkbox:
var checked by remember { mutableStateOf(false) }
Checkbox(checked = checked,
onCheckedChange = { checked = it })
RadioButton: A radio button:
var selected by remember { mutableStateOf(false) }
RadioButton(selected = selected,
onClick = { selected = !selected })
Switch: A toggle switch:
var checked by remember { mutableStateOf(false) }
Switch(checked = checked,
onCheckedChange = { checked = it })
Advanced Components
Card: A container with a shadow and rounded corners.
Card(
shape = RoundedCornerShape(8.dp),
elevation = 4.dp
) {
Text("This is a card")
}
Scaffold: Provides a structure with top bar, bottom bar, floating action button, and content.
Scaffold(
topBar = {
TopAppBar(title = { Text("Title") })
},
floatingActionButton = {
FloatingActionButton(onClick = { /* Do something */ }) {
Icon(Icons.Default.Add, contentDescription = "Add")
}
}
) {
// Content
}
LazyColumn: A vertically scrolling list:
LazyColumn {
items(itemsList) { item ->
Text(item)
}
}
LazyRow: A horizontally scrolling list:
LazyRow {
items(itemsList) { item ->
Text(item)
}
}
Animations
AnimatedVisibility: Shows or hides content with an animation:
var visible by remember { mutableStateOf(true) }
AnimatedVisibility(visible = visible) {
Text("This text is visible")
}
animateFloatAsState: Animates a float value:
val animatedProgress by animateFloatAsState(targetValue = progress)
Modifiers
Modifiers allow you to modify the appearance and behavior of composables. Some common examples include:
padding: Adds padding:
Text("Padded text", modifier = Modifier.padding(16.dp))
background: Adds a background color.
Text("Text with background", modifier = Modifier.background(Color.Red))
size: Sets width and height:
Text("Sized text", modifier = Modifier.size(100.dp))
Gestures:
Handle gestures like clicks, swipes, and drags with ease using composable functions.
Box(modifier = Modifier
.size(100.dp)
.background(Color.Blue)
.clickable { /* Handle click */ })
For more about Jetpack Compose
![Sandeep Gupta](http://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2MuJw6Nf2-H9oGwPbg9a1QMtCY8PfIaaqNzq0234pnt65zt6Hary1M9RhmPv54pxWQarfRKzCfvrLFMXcH-tToe0LJHW8VCbi28zIjF4w-LifXw7BdSzNCII5QyqNyFAF2fjPn-VJej9q6e0xG1_rbeireNQegXwm21kLDDvaKqy8A/w130/author%20(1).png)