Image width is not showing properly in Card of Android Jetpack Compose

Question

I am trying to make layout using Jetpack Compose.

I want to show an Image and a Text in each Card, stacked vertically using Column widget

I could successfully wrote the code using Composable function but I am getting issues in last Card like below mentioned:

The Image width is not FULL
The TextView is not showing below Image

Code :

    @Composable
fun Dashboard(name1: String, name2: String, name3: String) {
    Column(
        modifier =
        Modifier.background(color = Color(0, 255, 0, 255))
    ) {
        Card() {
            Column(modifier = Modifier.padding(10.dp)) {
                Image(painter = painterResource(id = R.drawable.img1),
                    contentDescription = "Image 1")
                Text(text = name1)
            }
        }
        Card() {
            Column(modifier = Modifier.padding(10.dp)) {
                Image(painter = painterResource(id = R.drawable.img2),
                    contentDescription = "Image 2")
                Text(text = name2)
            }
        }
        Card() {
            Column(modifier = Modifier.padding(10.dp)) {
                Image(painter = painterResource(id = R.drawable.img2),
                    contentDescription = "Image 3")
                Text(text = name3)
            }
        }
    }

}

Output :

The Last Card's image (img2) is same as middle Card's image but is giving issue at last index only

Can anyone help what is wrong in my Composable Function?

Reference:

I am following tutorials of The Hyper Coder community this one

The code should work. Which version of compose are you using? — Gabriele Mariotti

pyus13 pyus13 · Accepted Answer · 2021-03-30T20:39:25

This answer is based on Jetpack Compose Beta 3. By default Column { } is not scroll able, It lays out the contents in the available space on the screen.

So whats happening with your last image is, its shirking its height which resulted in shirking its width to maintain the aspect ratio. This resulted in the green background to show up. So making your top Column { } scrollable should fix this.

Column(
    modifier =  Modifier
    .background(color = Color(0, 255, 0, 255))
    .verticalScroll(state = rememberScrollState(0))
) {
    Card { ... }
    Card { ... }
    Card { ... }
  }

UPDATE: Better solution to handle such scenarios is by using LazyColum which is much better in performance to handle such a specific use case

@Composable
fun Dashboard(images: List<ImageData>) {
  LazyColumn(
    modifier = Modifier.background(color = Color(0, 255, 0, 255))
  ) {
    images.forEach {
      item { ImageCard(image = it) }
    }
  }
}

@Composable
fun ImageCard(image: ImageData) {
  Card {
    Column(modifier = Modifier.padding(10.dp)) {
      Image(
        painter = painterResource(id = image.drawable),
        contentDescription = image.text
      )
      Text(text = image.text)
    }
  }
}

val images = listOf(
  ImageData("Image 1", R.drawable.img1),
  ImageData("Image 2", R.drawable.img2),
  ImageData("Image 3", R.drawable.img2)
)

data class ImageData(
  val text: String,
  @DrawableRes val drawable: Int
)

Image width is not showing properly in Card of Android Jetpack Compose

1 Answers