Hello everyone, I was unable to find a solution an...

# compose

[Laurynas Mykolaitis]

Hello everyone, I was unable to find a solution anywhere to my problem. My design has a number of screen where there are multiple lists (fully displayed, not scrollable lists) that are embedded within some kind of shared background, for example, a rounded box with a shadow. I am unable to use scrollable column, because it will throw an error due to unknown list sizes as they are dynamic. The only option I see is to use whole screen as a LazyColumn and wrap everything within item/items. The main problem is that I cannot put a custom designed background as "surface" and then use "items" keywoard to create a list inside. I had an idea to create background myself piece by piece, but I could not solve the shadow/elevation problem between each item. I attach code and screenshot. Any help is appreciated. Thanks!

[Laurynas Mykolaitis]

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
private fun TestScreen() {
    MaterialTheme {
        val scrollState = rememberLazyListState()
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            state = scrollState,
            contentPadding = WindowInsets.navigationBars.asPaddingValues()
        ) {
            item {
                Text(
                    text = "This is header",
                    style = MaterialTheme.typography.h3
                )
            }
            MyListBox(listOf(1,2))
            item { Spacer(modifier = Modifier.height(8.dp)) }
            MyListBox(listOf(5,6,7))
            item { Spacer(modifier = Modifier.height(8.dp)) }
            MyListBox(listOf(1,2,8,9,10))
        }
    }
}

private fun LazyListScope.MyListBox(listItems: List<Any>) {
    item { Spacer(modifier = Modifier.height(8.dp)) }
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .padding(horizontal = 24.dp)
                .shadow(
                    elevation = 15.dp,
                    shape = RoundedCornerShape(
                        topStart = CornerSize(20.dp),
                        topEnd = CornerSize(20.dp),
                        bottomStart = CornerSize(0.dp),
                        bottomEnd = CornerSize(0.dp)
                    )
                )
                .background(
                    color = Color.White,
                    shape = RoundedCornerShape(
                        topStart = CornerSize(20.dp),
                        topEnd = CornerSize(20.dp),
                        bottomStart = CornerSize(0.dp),
                        bottomEnd = CornerSize(0.dp)
                    )
                )
        )
    }
    item {
        Text(
            "This is a title ", style = MaterialTheme.typography.h4,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 24.dp)
                .shadow(
                    elevation = 15.dp,
                    shape = RectangleShape
                )
                .background(color = Color.White)
                .padding(horizontal = 20.dp)
                .padding(bottom = 20.dp)
        )
    }
    items(listItems,) { item ->
        Text(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 24.dp)
                .shadow(
                    elevation = 15.dp,
                    shape = RectangleShape
                )
                .background(color = Color.White)
                .padding(20.dp),
            text = "This is test $item"
        )
    }
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .padding(horizontal = 24.dp)
                .shadow(
                    elevation = 15.dp,
                    shape = RoundedCornerShape(
                        topStart = CornerSize(0.dp),
                        topEnd = CornerSize(0.dp),
                        bottomStart = CornerSize(20.dp),
                        bottomEnd = CornerSize(20.dp)
                    )
                )
                .background(
                    color = Color.White,
                    shape = RoundedCornerShape(
                        topStart = CornerSize(0.dp),
                        topEnd = CornerSize(0.dp),
                        bottomStart = CornerSize(20.dp),
                        bottomEnd = CornerSize(20.dp)
                    )
                )
        )
    }
}

@Preview
@Composable
private fun TestPreview() {
    TestScreen()
}

[Laurynas Mykolaitis]

sdfsdfsdf.png

[Oleksandr Balan]

Hey 👋
We had a similar requirement and colleague of mine come with a handy trick by “clipping vertical shadows”. See clipSides modifier, which draws a content, but clips it to the rectangle based on the given arguments.

fun Modifier.clipSides(
    left: Boolean = false,
    top: Boolean = false,
    right: Boolean = false,
    bottom: Boolean = false,
): Modifier = drawWithContent {
    clipRect(
        left = if (left) 0f else -Float.MAX_VALUE,
        top = if (top) 0f else -Float.MAX_VALUE,
        right = if (right) size.width else Float.MAX_VALUE,
        bottom = if (bottom) size.height else Float.MAX_VALUE,
    ) {
        [e-mail]()
    }
}

However you are using a larger elevation value, and that causes a visible defect where two items are placed together. See 1st image, where left has a small elevation (looks relatively ok) and right has a big elevation (defect is more visible).

So I was thinking how this could be improved and came up with an idea of “extending” a shape for the shadow modifier.

However there is a still an issue at the bottom of the screen, see 2nd image which I am now unable to resolve 🤔

Anyway I am curious if this could be implemented in another way 🤷

private fun LazyListScope.MyListBox(
    listItems: List<Any>,
    elevation: Dp = 15.dp,
    cornerSize: Dp = 20.dp,
    color: Color = Color.White,
) {
    item { Spacer(modifier = Modifier.height(8.dp)) }
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .padding(horizontal = 24.dp)
                .cardPart(<http://CardPart.Top|CardPart.Top>, elevation, cornerSize, color)
        )
    }
    item {
        Text(
            "This is a title ",
            style = MaterialTheme.typography.h4,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 24.dp)
                .cardPart(CardPart.Middle, elevation, cornerSize, color)
                .padding(horizontal = 20.dp)
                .padding(bottom = 20.dp)
        )
    }
    items(listItems) { item ->
        Text(
            text = "This is test $item",
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 24.dp)
                .cardPart(CardPart.Middle, elevation, cornerSize, color)
                .padding(20.dp),
        )
    }
    item {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .padding(horizontal = 24.dp)
                .cardPart(CardPart.Bottom, elevation, cornerSize, color)
        )
    }
}

private enum class CardPart { Top, Middle, Bottom }

private fun Modifier.cardPart(
    part: CardPart,
    elevation: Dp,
    cornerSize: Dp,
    color: Color
): Modifier =
    this
        .clipSides(
            top = part == CardPart.Bottom || part == CardPart.Middle,
            bottom = part == <http://CardPart.Top|CardPart.Top> || part == CardPart.Middle,
        )
        .shadow(
            elevation = elevation,
            shape = CardPartShape(part, cornerSize),
        )
        .background(color)

private fun Modifier.clipSides(
    left: Boolean = false,
    top: Boolean = false,
    right: Boolean = false,
    bottom: Boolean = false,
): Modifier = drawWithContent {
    clipRect(
        left = if (left) 0f else -Float.MAX_VALUE,
        top = if (top) 0f else -Float.MAX_VALUE,
        right = if (right) size.width else Float.MAX_VALUE,
        bottom = if (bottom) size.height else Float.MAX_VALUE,
    ) {
        [e-mail]()
    }
}

private class CardPartShape(
    private val part: CardPart,
    private val cornerSize: Dp,
) : Shape {

    override fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline {
        val rect = size.toRect()
        val extendSize = rect.height * 10f
        val extendedRect = rect
            .copy(
                top = if (part == CardPart.Bottom || part == CardPart.Middle) <http://rect.top|rect.top> - extendSize else <http://rect.top|rect.top>,
                bottom = if (part == <http://CardPart.Top|CardPart.Top> || part == CardPart.Middle) rect.bottom + extendSize else rect.bottom,
            )

        val cornerSizePx = with(density) { cornerSize.roundToPx().toFloat() }

        return when (part) {
            <http://CardPart.Top|CardPart.Top> -> Outline.Rounded(
                RoundRect(
                    rect = extendedRect,
                    topLeft = CornerRadius(cornerSizePx),
                    topRight = CornerRadius(cornerSizePx),
                )
            )

            CardPart.Middle -> Outline.Rectangle(extendedRect)

            CardPart.Bottom -> Outline.Rounded(
                RoundRect(
                    rect = extendedRect,
                    bottomRight = CornerRadius(cornerSizePx),
                    bottomLeft = CornerRadius(cornerSizePx),
                )
            )
        }
    }
}

[Laurynas Mykolaitis]

That looks like a progress, going to investigate and see how it goes. Thanks for help

[kecaroh]

@Oleksandr Balan man thank you so much for the clipSides modifier, it solved a similar issue for me pepe clap thank you color