[FIXED] Android Jetpack - Fit Image as Custom Style in Card

Issue

I have a screen that includes only a LazyRow horizontal list includes 2 Cards, so you can slide cards. You can see my code below:

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.jetpackdeneme.R

@Composable
fun TestScreen1() {
    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = PaddingValues(20.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            item {
                LazyRow(
                    Modifier.height(160.dp),
                    contentPadding = PaddingValues(horizontal = 16.dp),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    item {
                        PromotionItem1(
                            imagePainter = painterResource(id = R.drawable.statue_of_liberty),
                            title = "AMERICA",
                            header = "USA",
                            backgroundColor = Color.White
                        )
                    }
                    item {
                        PromotionItem1(
                            imagePainter = painterResource(id = R.drawable.statue_of_liberty),
                            title = "AMERICA",
                            header = "USA",
                            backgroundColor = Color.White
                        )
                    }
                }
            }
        }
    }
}

@Composable
fun PromotionItem1(
    title: String = "",
    header: String = "",
    backgroundColor: Color = Color.Transparent,
    imagePainter: Painter
) {
    Card(
        Modifier.width(300.dp),
        shape = RoundedCornerShape(8.dp),
        backgroundColor = backgroundColor,
        elevation = 0.dp
    ) {
        Row {
            Image(
                painter = imagePainter, contentDescription = "",
                modifier = Modifier
                    .fillMaxHeight()
                    .weight(1f),
                alignment = Alignment.CenterEnd,
                contentScale = ContentScale.Crop
            )
            Column(
                Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = title, fontSize = 14.sp, color = Color.Black, fontWeight = FontWeight.Bold)
                Text(text = header, fontSize = 14.sp, color = Color.Black)
            }
        }
    }
}

The output is like this (it is not fitting, and I want a custom style):

I wanted to set the image's bottom edge to bottom of card, and overflow the top a little bit like that output:

You can get the image here

How can I do that? Can you help me please?

Solution

First, replace Card with Box which doesn't clip layout that prevents overflow.

Second, set a graphicsLayer to increase scale of Image but by default tranform origin is center since we want to push image upwards we need to set bottom left as transform origin which is TransformOrigin(0f,1f).

Third, increase scale as you wish and have expected output.

@Composable
fun PromotionItem1(
    title: String = "",
    header: String = "",
    backgroundColor: Color = Color.Transparent,
    imagePainter: Painter
) {
    Box(
        Modifier
            .width(300.dp)
            .background(backgroundColor, RoundedCornerShape(8.dp)),

    ) {
        Row {

            Image(
                painter = imagePainter,
                contentDescription = "",
                modifier = Modifier
                    .graphicsLayer {
                        scaleY = 1.2f
                        scaleX = 1.2f
                        this.transformOrigin = TransformOrigin(0f, 1f)
                    }
                    .fillMaxHeight(),
                contentScale = ContentScale.Fit
            )

            Spacer(modifier = Modifier.weight(1f))
            Column(
                Modifier
                    .padding(horizontal = 16.dp)
                    .fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = title,
                    fontSize = 14.sp,
                    color = Color.Black,
                    fontWeight = FontWeight.Bold
                )
                Text(text = header, fontSize = 14.sp, color = Color.Black)
            }
        }
    }
}

Also i increased LazyRow height to Modifier.height(200.dp)

Result

Answered By - Thracian
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)