What is the equivalent of layer-list in jetpack compose?

user_13468324 0
Viewed 1057

What is the equivalent of layer-list in jetpack compose?

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/lightGray" />
    <item android:drawable="@drawable/transp_01" />
</layer-list>

I want to get an image like the one shown to use as a background for all my screens

enter image description here

android-jetpack-compose kotlin android
1 Answers

You can draw it easily in compose. With Box you can place any amount of images on top of each other same as layer list can do. So generally specking, you could use something like this:

Box {
    // replace any color item from the layer list with box with background:
    Box(
        modifier = Modifier
            .background(Color.LightGray)
            .matchParentSize()
    )
    // replace drawable item with Image:
    Image(
        painter = painterResource(id = R.drawable.my_image),
        contentDescription = "...",
    )
}

But in your case, it looks like you only need one image, and you can set a background color for it. Since you need to reuse it in your application, you can move it to a separate view, for example like this:

@Composable
fun BackgroundView(modifier: Modifier) {
    Image(
        painter = painterResource(id = R.drawable.transp_01),
        contentDescription = "...",
        modifier = modifier.background(Color.LightGray)
    )
}

Then set it as background to any screen like this:

@Composable
fun SomeScreen() {
    Box(Modifier.fillMaxSize()) {
        BackgroundView(Modifier.matchParentSize())
        // screen content
    }
}
user_35857960
Related