Hello everyone I was unable to find a solution anywhere to m

Question

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 · Answer

```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 lt Any gt 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 gt 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 · Answer

sdfsdfsdf png

Oleksandr Balan · Answer

Hey wave 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 this drawWithContent drawContent ``` 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 thinking face Anyway I am curious if this could be implemented in another way shrug ``` private fun LazyListScope MyListBox listItems List lt Any gt 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 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 gt 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 == || 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 this drawWithContent drawContent 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 extendSize else bottom = if part == || part == CardPart Middle rect bottom + extendSize else rect bottom val cornerSizePx = with density cornerSize roundToPx toFloat return when part gt Outline Rounded RoundRect rect = extendedRect topLeft = CornerRadius cornerSizePx topRight = CornerRadius cornerSizePx CardPart Middle gt Outline Rectangle extendedRect CardPart Bottom gt Outline Rounded RoundRect rect = extendedRect bottomRight = CornerRadius cornerSizePx bottomLeft = CornerRadius cornerSizePx ```

Laurynas Mykolaitis · Answer

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