Gradiant 1 pixel lign misscolor Jetpack Compose


Using gradiant, I have a one pixel lign that breaks the natural transition to the rest of the card. The line is present at the end of the gradiant.

![[Gradient line issue]](https://i.sstatic.net/jtx8tiVF.png "Gradient line issue")

Here is the Minimum code reproduction, I will give my "fix", but it looks like a bad patching over the issue rather than fixing this one pixel lign

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun PocGradientCard() {
    val cardColor = Color(0xFF64748B)//MaterialTheme.colorScheme.surface

    Card(
        shape = RoundedCornerShape(32.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        modifier = Modifier
            .fillMaxWidth(),
    ) {
        Row(modifier = Modifier
            .fillMaxWidth()
            .background(cardColor)) {
            Box(
                modifier = Modifier
                    .size(100.dp)
                    .background(cardColor)
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(Color(0xFFFF6666))
                )

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(
                            Brush.horizontalGradient(
                                colors = listOf(
                                    Color.Transparent,
                                    cardColor,
                                ),

                            )
                        )
                )

                /* Put patch here */
            }

            Column(
                modifier = Modifier
                    .weight(1f)
                    .padding(24.dp),
                verticalArrangement = Arrangement.Center,
            ) {
                Text(
                    text = "Name",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.SemiBold,
                    color = Color(0xFF1E293B),
                    modifier = Modifier.padding(bottom = 4.dp)
                )
            }
        }
    }
}


@Preview(showBackground = true)
@Composable
fun PreviewPoc() {
    XTheme {
        PocGradientCard()
    }
}
0
Mar 5 at 4:30 PM
User AvatarAdrienM
#android#android-jetpack-compose

Accepted Answer

Here is a solution I found, again, it is mostly patching over the problem than fixing it.

Where I wrote Put patch here past this :
It will put a one pixel line over the problematic pixel line

Row(modifier = Modifier.fillMaxWidth()){
                    Spacer(modifier = Modifier.weight(1f))
                    Box(
                        modifier = Modifier
                            .fillMaxHeight()
                            .width(1.dp)
                            .background(cardColor)
                    )
                }
User AvatarAdrienM
Mar 5 at 4:32 PM
0