How to show image in 'ScrollableTabRow'

Question

I need to build a ScrollableTabRow that include text and image. : (this screen shot was taken on compose 1.0.0-alpha09)

but after I upgrade compose to 1.0.0, the image didn't show. the image tab item is empty:

the ScrollableTabRow demo code:

@Composable
fun ScrollableRowWithImage(){
    ScrollableTabRow(
        backgroundColor = Color.Transparent,
        selectedTabIndex = 0,
        edgePadding = 24.dp,
        modifier = Modifier.wrapContentSize(align = Alignment.CenterStart)
    ) {
        (1..4).forEach{ _ ->
            Tab(
                selected = false,
                onClick = { },
            ) {
                Image(
                    painter = rememberImagePainter(
                        data = "http://mstphoto.cmvideo.cn:8080/clt/20210607/09/1F7I2L5NT7HQ.png",
                    ),
                    contentDescription = null,
                )
            }
        }
    }
}

The image can display normally in ohter place:

@Composable
fun ScrollableRowWithImage(){
    Column(modifier = Modifier.fillMaxSize()) {
        ScrollableTabRow(
            backgroundColor = Color.Transparent,
            selectedTabIndex = 0,
            edgePadding = 24.dp,
            modifier = Modifier.height(80.dp)){
            (1..4).forEach{ _ ->
                Tab(
                    selected = false,
                    onClick = { },
                ) {
                    SampleImage()
                }
            }
        }
        Divider()
        SampleImage()
    }

}

@Composable
fun SampleImage(){
    Image(
        painter = rememberImagePainter(
            data = "http://mstphoto.cmvideo.cn:8080/clt/20210607/09/1F7I2L5NT7HQ.png",
        ),
        contentDescription = null,
    )
}

Phil Dukhov · Accepted Answer · 2021-08-17T08:12:10.980

0

You can check out state of your request to see if there's an error using state value:

val painter = rememberImagePainter("http://mstphoto.cmvideo.cn:8080/clt/20210607/09/1F7I2L5NT7HQ.png")
println("${painter.state}")
Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier.size(128.dp)
)

In your case it's:

CLEARTEXT communication to mstphoto.cmvideo.cn not permitted by network security policy

Which is because you're using http instead of https, check out how to solve this in this answer

An other problem is with Image inside ScrollableTabRow. Looks like a coil bug, I've reported. Image doesn't start loading without size modifier. Adding .size(40.dp) or even .weight(40.dp) solves the problem

edited Aug 17 '21 at 08:12

answered Aug 17 '21 at 07:43

Phil Dukhov

67,741
15
184
220

thanks for reply，I've fixed the CLEARTEXT problem,and this image can display normally on ohter place. but can not display in `ScrollableTabRow` – TangSir Aug 17 '21 at 07:46
@TangSir and created a compose issue: https://github.com/coil-kt/coil/issues/862 – Phil Dukhov Aug 17 '21 at 08:11

score 0 · Answer 2 · answered Aug 17 '21 at 07:57

0

Check it with a drawable resource, see if the problem is with the fetching of the data from the web. Replace the painter = rememberImagePainter( data = "http://mstphoto.cmvideo.cn:8080/clt/20210607/09/1F7I2L5NT7HQ.png", )

with painter = painterResource(R.drawable.ic_launcher_foreground) // OR any other resource, if this is not available

Check if this resource renders and if it does not, I'll modify the answer.

answered Aug 17 '21 at 07:57

Richard Onslow Roper

5,477
2
11
42

Thanks for replay. after Replace the `painter = rememberImagePainter( data = "http://mstphoto.cmvideo.cn:8080/clt/20210607/09/1F7I2L5NT7HQ.png", )` with `painter = painterResource(R.drawable.ic_launcher_foreground)` . The resource display normally. – TangSir Aug 17 '21 at 08:06

How to show image in 'ScrollableTabRow'

2 Answers2