Compose Elements Reference

This reference covers the most commonly used Compose elements and modifiers. For complete documentation, refer to the official Android Compose documentation.

Layout Elements

Box

A container that stacks its children on top of each other

Box(
    modifier = Modifier
    .size(100.dp)
    .background( 
        Color(0xFF673AB7), 
        shape = androidx.compose.foundation.shape.RoundedCornerShape(24.dp)
    )
) {
    Text("Overlay text")
}
        

Row

Arranges children horizontally in a row

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    Text("Left")
    Text("Center")
    Text("Right")
}
        

LazyRow

Scrollable horizontal list that only composes visible items

LazyRow {
    items(items) { item ->
        Card(
            modifier = Modifier.padding(8.dp)
        ) {
            Text(item.name)
        }
    }
}
        

Column

Arranges children vertically in a column

Column(
    modifier = Modifier.fillMaxHeight(),
    verticalArrangement = Arrangement.Center
) {
    Text("Top")
    Text("Middle")
    Text("Bottom")
}
        

LazyColumn

Scrollable vertical list that only composes visible items

LazyColumn {
    items(items) { item ->
        ListItem(
            headlineContent = { Text(item.title) },
            supportingContent = { Text(item.description) }
        )
    }
}
        

Spacer

Creates empty space between elements

Column {
    Text("Top text")
    Spacer(modifier = Modifier.height(16.dp))
    Text("Bottom text")
}
        

UI Elements

Text

Displays text with various styling options

Text(
    text = "Hello World",
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue
)
        

Button

Clickable button with customizable content

Button(
    onClick = { /* handle click */ },
    modifier = Modifier.padding(8.dp)
) {
    Text("Click Me")
}
        

TextField

Single-line text input field

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Enter text") },
    modifier = Modifier.fillMaxWidth()
)
        

OutlinedTextField

Text field with an outlined border

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Username") },
    leadingIcon = { Icon(Icons.Default.Person, "Person") }
)
        

Image

Displays an image from resources or network

Image(
    painter = painterResource(id = R.drawable.my_image),
    contentDescription = "My image",
    modifier = Modifier.size(100.dp),
    contentScale = ContentScale.Crop
)
        

Alternative with background color:

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
)
        

Card

Material Design card with elevation and rounded corners

Card(
    modifier = Modifier.padding(8.dp),
    elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
) {
    Column(modifier = Modifier.padding(16.dp)) {
        Text("Card Title", fontWeight = FontWeight.Bold)
        Text("Card content goes here")
    }
}
        

Icon

Displays a vector icon

Icon(
    imageVector = Icons.Default.Favorite,
    contentDescription = "Favorite",
    tint = Color.Red,
    modifier = Modifier.size(24.dp)
)
        

Switch

Toggle switch for boolean values

var checked by remember { mutableStateOf(false) }
Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    modifier = Modifier.padding(8.dp)
)
        

Checkbox

Checkbox for boolean selection

var checked by remember { mutableStateOf(false) }
Checkbox(
    checked = checked,
    onCheckedChange = { checked = it }
)
        

RadioButton

Radio button for single selection from a group

var selectedOption by remember { mutableStateOf("") }
Column {
    RadioButton(
        selected = selectedOption == "option1",
        onClick = { selectedOption = "option1" }
    )
    Text("Option 1")
}
        

Common Modifiers

fillMaxSize()

Fills the maximum available space

Box(
    modifier = Modifier.fillMaxSize()
) {
    // Content
}
        

fillMaxWidth()

Fills the maximum available width

Text(
    text = "Full width text",
    modifier = Modifier.fillMaxWidth()
)
        

fillMaxHeight()

Fills the maximum available height

Column(
    modifier = Modifier.fillMaxHeight()
) {
    // Content
}
        

size(width, height)

Sets specific width and height

Box(
    modifier = Modifier.size(100.dp, 50.dp)
) {
    // Content
}
        

padding(all)

Adds padding on all sides

Text(
    text = "Padded text",
    modifier = Modifier.padding(16.dp)
)
        

padding(horizontal, vertical)

Adds padding with different horizontal and vertical values

Button(
    onClick = { },
    modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
) {
    Text("Button")
}
        

background(color)

Sets background color

Box(
    modifier = Modifier
        .size(100.dp)
        .background(Color.Blue)
) {
    Text("Blue background", color = Color.White)
}
        

border(width, color)

Adds a border around the element

Box(
    modifier = Modifier
        .size(100.dp)
        .border(2.dp, Color.Black)
) {
    // Content
}
        

clickable { }

Makes the element clickable

Text(
    text = "Clickable text",
    modifier = Modifier.clickable {
        // Handle click
    }
)
        

weight(factor)

Distributes space proportionally in Row/Column

Row {
    Text(
        text = "Takes 1/3",
        modifier = Modifier.weight(1f)
    )
    Text(
        text = "Takes 2/3",
        modifier = Modifier.weight(2f)
    )
}
        

offset(x, y)

Moves the element by specified offset

Box(
    modifier = Modifier.offset(x = 10.dp, y = 5.dp)
) {
    Text("Offset text")
}
        

alpha(value)

Sets transparency (0.0 = transparent, 1.0 = opaque)

Text(
    text = "Semi-transparent",
    modifier = Modifier.alpha(0.5f)
)
        

scale(scaleX, scaleY)

Scales the element by specified factors

Text(
    text = "Scaled text",
    modifier = Modifier.scale(scaleX = 1.5f, scaleY = 1.5f)
)
        

rotate(degrees)

Rotates the element by specified degrees

Text(
    text = "Rotated text",
    modifier = Modifier.rotate(45f)
)
        

Arrangement Options

Arrangement.Start

Aligns items to the start

Row(
    horizontalArrangement = Arrangement.Start
) {
    Text("Item 1")
    Text("Item 2")
}
        

Arrangement.Center

Centers items

Row(
    horizontalArrangement = Arrangement.Center
) {
    Text("Item 1")
    Text("Item 2")
}
        

Arrangement.End

Aligns items to the end

Row(
    horizontalArrangement = Arrangement.End
) {
    Text("Item 1")
    Text("Item 2")
}
        

Arrangement.SpaceEvenly

Distributes space evenly between items

Row(
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
        

Arrangement.SpaceBetween

Puts space between items, none at edges

Row(
    horizontalArrangement = Arrangement.SpaceBetween
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
        

Arrangement.SpaceAround

Puts space around items

Row(
    horizontalArrangement = Arrangement.SpaceAround
) {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}
        

Alignment Options

Alignment.TopStart

Aligns to top-left corner

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.TopStart
) {
    Text("Top-left aligned")
}
        

Alignment.TopCenter

Aligns to top-center

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.TopCenter
) {
    Text("Top-center aligned")
}
        

Alignment.TopEnd

Aligns to top-right corner

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.TopEnd
) {
    Text("Top-right aligned")
}
        

Alignment.Center

Centers the content

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Text("Centered")
}
        

Alignment.BottomStart

Aligns to bottom-left corner

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.BottomStart
) {
    Text("Bottom-left aligned")
}
        

Alignment.BottomCenter

Aligns to bottom-center

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.BottomCenter
) {
    Text("Bottom-center aligned")
}
        

Alignment.BottomEnd

Aligns to bottom-right corner

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.BottomEnd
) {
    Text("Bottom-right aligned")
}