I've the following code: ```LazyColumn { ite...

# compose-android

[Alexandru Gheorghe]

I've the following code:

LazyColumn {
    items(1) {
        Column(
            modifier = modifier
                .fillMaxWidth(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            UploadImageBox(
                modifier = Modifier,
                imageViewModel = imageViewModel,
                onImageSelected = {}
            )
        }

        // other 3 Column() composables
    }
}

where UploadImageBox is:

@Composable
fun UploadImageBox(
    modifier: Modifier = Modifier,
    imageViewModel: ImageViewModel,
    onImageSelected: (Uri) -> Unit
) {
    val context = LocalContext.current
    val launcher = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.GetContent(),
        onResult = { uri ->
            if (uri != null) {
                imageViewModel.updateImageUri(uri)
                onImageSelected(uri)
            }
        }
    )

    Box(
        modifier = Modifier
            .clickable { launcher.launch("image/*") }
    ) {
         Column(
             modifier = modifier
                 .padding(
                     dimensionResource(
                         R.dimen.padding
                     )
                 ),
             verticalArrangement = Arrangement.Center,
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
            if (imageViewModel.imageUri.value != null) {
                /** Show selected image */
                Image(
                    painter = rememberAsyncImagePainter(
                        model = ImageRequest.Builder(context)
                            .data(imageViewModel.imageUri.value)
                            .crossfade(true)
                            .build()
                    ),
                    contentDescription = stringResource(
                        R.string.selected_image_description
                    ),
                    modifier = Modifier
                        .clip(RoundedCornerShape(
                            dimensionResource(R.dimen.corner_size)
                        ))
                )
            } else {
                /** Show placeholder icon */
                Icon(
                    Icons.Filled.Add,
                    contentDescription = stringResource(
                        R.string.select_image_description
                    ),
                    modifier = Modifier
                        .size(dimensionResource(icon_size))
                )
            }
        }
    }
}

the viewmodel is simple:

private val _imageUri = mutableStateOf<Uri?>(null)
val imageUri = _imageUri

fun updateImageUri(imageUri: Uri) {
        _imageUri.value = imageUri
}

however, when I select the add icon to add an image, the image disappears from the screen on the android phone after being selected (the plus sign is no longer available either which means the image was read but not displayed) -- screenshots in thread. What am I doing wrong?

[Alexandru Gheorghe]

Before clicking + sign

[Alexandru Gheorghe]

After clicking + sign and selecting an image

[Alexandru Gheorghe]

How it should look like

[Alexandru Gheorghe]

If I use Column instead of LazyColumn then it works. Though, I want the user to be able to scroll the screen.

[Alexandru Gheorghe]

Found the solution: had to specify height on the modifier for image for coil to render

[Colton Idle]

Try not to post large code snippets in the main thread. And instead post code inside the thread directly. That's what 🧵 means. 😄