Compose Playground

AppBar

Displays information and actions relating to the current screen.

Properties
Preview

My App

Item #1
Item #2
Item #3
Item #4
Item #5
Item #6
Item #7
Item #8
Item #9
Item #10
Item #11
Item #12
Item #13
Item #14
Item #15
Item #16
Item #17
Item #18
Item #19
Item #20
Item #21
Item #22
Item #23
Item #24
Item #25
Item #26
Item #27
Item #28
Item #29
Item #30
Item #31
Item #32
Item #33
Item #34
Item #35
Item #36
Item #37
Item #38
Item #39
Item #40
Item #41
Item #42
Item #43
Item #44
Item #45
Item #46
Item #47
Item #48
Item #49
Item #50
Generated Code
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.style.TextOverflow

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyAppBar() {
    Scaffold(
        modifier = Modifier,
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        "My App",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
            navigationIcon = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Menu,
                        contentDescription = "Localized description"
                    )
                }
            },
            actions = {
                IconButton(onClick = { /* doSomething() */ }) {
                    Icon(
                        imageVector = Icons.Filled.Favorite,
                        contentDescription = "Localized description"
                    )
                }
            },
            )
        }
    ) { innerPadding ->
        LazyColumn(
            contentPadding = innerPadding,
            modifier = Modifier.fillMaxSize()
        ) {
            items(50) {
                Text(
                    text = "Item #$it",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}