How to draw gradient and customize your splash screen in compose?-CodePudding

I am trying to have a splash screen in our application and I got stuck Abit with the jetpack Compose design. So I want to have a background gradient, I am now using the image which does not fit well in the phone and want to center my logo and text in the middle of the screen how can I achieve that. Mostly centering since I have tried the gradient part and I have no success. Here is my code

Here is my background component

@Composable
fun BackgroundComponents(
    @DrawableRes backgroundDrawableRes: Int,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    painter: Painter,
    alignment: Alignment = Alignment.Center,
) {
    Box(
        modifier = modifier
    ) {
        Image(
            painter = painterResource(id = backgroundDrawableRes),
            contentDescription = contentDescription,
            modifier = modifier.matchParentSize()
        )
        Box(
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painter,
                contentDescription = contentDescription,
                alignment = alignment
            )
        }
        Text(
            modifier =
            modifier.padding(top = 36.dp),
            text = "Hello and welcome to our app",
            color = (colorResource(id = R.color.white)),
            fontSize = 16.sp,
        )
    }
}

This is how I am calling it on the Screen

@Composable
fun Splash(modifier: Modifier = Modifier) {
    Column(modifier = modifier.fillMaxSize()) {
        BackgroundComponents(
            backgroundDrawableRes = R.drawable.ic_launcher_foreground,
            contentDescription = "",
            modifier = modifier.fillMaxSize(),
            painter = painterResource(id = coil.base.R.drawable.notification_bg)
        )
    }
}

This is how it looks.

I would like to push the icon and text in the middle and centered, also instead of using an image can I draw that gradient?

CodePudding user response：

You can apply the gradient to the parent Box as background modifier and then just apply the expected alignment to the composable inside the Box.

Something like:

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(
            Brush.horizontalGradient(
                colors = listOf(
                    Color.Blue,
                    Teal200
                )
            )
        ),
    contentAlignment = Alignment.Center
) {

    Column(horizontalAlignment = Alignment.CenterHorizontally) {

        Image(
            painter = painterResource(id = R.drawable.xx),
            contentDescription = "contentDescription",
        )

        Spacer(Modifier.height(36.dp))

        Text(
            text = "Hello and welcome to our app",
            color = White,
            fontSize = 16.sp,
        )
    }
}