I'm implementing coil image loading in a `Box` composable with a TopAppBar on top of it. For some re...

# compose-android

[Alexandru Gheorghe]

I'm implementing coil image loading in a Box composable with a TopAppBar on top of it. For some reason, there's a space between the image displayed and the top edge of the screen (just below status bar) and as well at the bottom edge just before other composables start. Anyone ran into this issue? Screenshot in 🧵

[Alexandru Gheorghe]

See ↑ red arrows.

[Chrimaeon]

set an appropriate contentScale

[Chrimaeon]

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]n/Image.kt;l=153?q=androidx%2Fcompose%2Ffoundation%2FImage.kt

[Alexandru Gheorghe]

I tried multiple contentScale , but all of them (Crop, Fit, FitHeight) failed to close the gaps.

[Alexandru Gheorghe]

My code looks like the following:

Box(
        modifier = modifier
            .height(300.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.Center),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            if (photoUri != null && !deleteImage) {
                Box(
                    contentAlignment = Alignment.Center
                ) {
                    /** Show selected image */
                    Image(
                        painter = rememberAsyncImagePainter(
                            model = ImageRequest.Builder(context)
                                .data(photoUri)
                                .crossfade(true)
                                .build()
                        ),
                        contentDescription = null,
                        contentScale = ContentScale.Crop
                    )

[Alexandru Gheorghe]

And TopAppBar:

Box {
        if (uiState == ProfileUiState.Success) {
            ProfilePhoto(
                modifier = modifier,
                context = context,
                onPhotoSelected = onPhotoSelected,
                ...
            )
        }

        TopAppBar(
            title = { },
            modifier = modifier,
            colors = TopAppBarDefaults.mediumTopAppBarColors(
                containerColor = Color.Transparent
            ),
...

[Alexandru Gheorghe]

In a Scaffold

[Alexandru Gheorghe]

Doing contentScale
On both Image composable AND rememberAsyncImagePainter fixed the issue