Android Jetpack Compose. Using Stack layout

Question

Does anyone know how to work with the composable Stack layout? I understand, that it has to work similar to the RelativeLayout we all know. However, I am not getting the result I need. Instead of one view being drawn over the other, the first one completely covers the second (or the second does not get drawn at all). I am trying to place a Text in the center of the Toolbar and a Button aligning the right side of the screen.

TopAppBar(
            title = {
                Stack(modifier = Modifier.None) {
                    Align(alignment = Alignment.Center) {
                        Text(
                            text = "MyApp",
                            style = (+themeTextStyle { h6 }).withOpacity(0.7f)
                        )
                    }
                    Align(alignment = Alignment.CenterRight) {
                        CircleImageButton(
                            resource = Res.drawable.ic_action_reload,
                            onCLick = onRefreshClick
                        )
                    }
                }
            },
            color = Color.White
        )

Gabriele Mariotti Gabriele Mariotti · Accepted Answer · 2019-11-22T23:09:59

With 1.0.0-alpha03 the Stack is a composable that positions its children relative to its edges.

Just an example with a rectangle of 300x300 in the Center, and 2 rectangles of 150x150 in the TopStart/BottomEnd angles using the Use StackScope.gravity

Stack {

    Box(
        backgroundColor = Color.Blue,
        modifier = Modifier
            .align(Alignment.Center)
            .width(300.dp)
            .height(300.dp))

    Box(
        backgroundColor = Color.Green,
        modifier = Modifier
            .align(Alignment.TopStart)
            .width(150.dp)
            .height(150.dp))

    Box(
        backgroundColor = Color.Red,
        modifier = Modifier
            .align(Alignment.BottomEnd)
            .width(150.dp)
            .height(150.dp))
}

About the TopAppBar you can use something like:

TopAppBar(
    title = {
        Text(text = "TopAppBar")
    },
    navigationIcon = {
        IconButton(onClick = { }) {
            Icon(Icons.Filled.Menu)
        }
    },
    actions = {
        // RowScope here, so these icons will be placed horizontally
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite)
        }
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite)
        }
    }
)

Android Jetpack Compose. Using Stack layout

1 Answers