Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Does Android Jetpack Compose support Toolbar widget?

I'd like to use Toolbar with Jetpack Compose. Does it have such a Composable component?

like image 635
Commander Tvis Avatar asked Jan 24 '20 14:01

Commander Tvis


People also ask

What is Androidx Appcompat widget toolbar?

androidx.appcompat.widget.Toolbar. A standard toolbar for use within application content. A Toolbar is a generalization of action bars for use within application layouts.

Is Android jetpack compose production ready?

Jetpack Compose is stable, ready for production, and continues to add the features you've been asking us for. We've been thrilled to see tens of thousands of apps start using Jetpack Compose in production already and we can't wait to see what you'll build!

Is jetpack compose the future of Android development?

Jetpack Compose comes with all the functionality needed to build a rich and responsive application UI and features full interoperability with current Android views, making it easy for developers to implement in existing projects.


Video Answer


2 Answers

You can use the TopAppBar.

The best way is to use it with the Scaffold. Something like:

Scaffold(
    topBar = {
        TopAppBar(
            title = {
                Text(text = "TopAppBar")
            },
            navigationIcon = {
                IconButton(onClick = { }) {
                    Icon(Icons.Filled.Menu,"")
                }
            },
            backgroundColor = Color.Blue,
            contentColor = Color.White,
            elevation = 12.dp
        )
    }, content = {
        
    })

enter image description here

like image 67
Gabriele Mariotti Avatar answered Oct 19 '22 19:10

Gabriele Mariotti


Using

compose_version = '1.0.0-beta01'

TopAppBar(
        title = {
            Text(text = "Pets Show")
        },
        navigationIcon = {
            IconButton(onClick = { }) {
                Icon(imageVector = Icons.Filled.Menu, contentDescription = "Menu Btn")
            }
        },
        backgroundColor = Color.Transparent,
        contentColor = Color.Gray,
        elevation = 2.dp
    )
like image 35
Ali Azaz Alam Avatar answered Oct 19 '22 20:10

Ali Azaz Alam