CODEWITHSUNDEEP
androidandroid-layoutkotlinandroid-jetpackandroid-jetpack-compose
Kushal
Kushal

Reputation: 8508

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

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:

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 : enter image description here

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

Upvotes: 0

Views: 2376

Answers (1)

Piyush Agarwal
Piyush Agarwal

Reputation: 25858

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
)

Upvotes: 2

Related Questions