Jetpack Compose Components

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