Mismatch in catches of comparables

[jeluchu]

Hello again!

I've been doing some tests, and I've seen a couple of things that I don't know if this is really the case or if they are errors. I'll tell you about them so that you can clarify them for me.

First case: Composable capture in LazyColumn

I have a LazyColumn that has several items both above and below Capturable. I have in one of them a button with which I perform the controller.capture() action and at that moment I generate the bitmap to share/save it. The problem is that it does not really capture the composable that you have indicated, it obtains the size of the real composable, but if you have made scroll and that composable is between the TopAppBar for example the generated image is not really the one previously indicated.

Capture of the image generated after the scroll has taken place
Capture generated when the compostable is fully displayed on the screen

LazyColumn {

 { ... }

            item {
                Capturable(
                    controller = controller,
                    onCaptured = { bitmap, _ ->
                        if (bitmap != null)
                            with(context) {
                                saveBitmap(bitmap.asAndroidBitmap())?.let { bitmapUri ->
                                    share(
                                        message = "",
                                        uri = bitmapUri
                                    )
                                }
                            }
                    }
                ) {
                    LetterImage(
                        addressee = addressee.value.text,
                        message = message.value.text,
                        sender = sender.value.text,
                        textColor = textColor.value,
                        bgColor = bgColor.value,
                        letterImage = letterImage
                    )
                }
            }

  { ... }

}

Second case: Background colour of the capture

Even if no background colour has been specified in the composable to be captured, the background colour that is inside the view is obtained, i.e. there is no option to capture the composable with a transparent background if I want it to capture it. As you can see in the images above, the background colour I have on the screen is red, but when I capture the image of the card, it adds a red background colour even though I want it to be transparent.

Thank you in advance! And thank you for your work! 😄

[jeluchu]

I include a small video that I have made from the app so you can see how the Capturable area looks like, the Capturable area would be the following: Capture generated when the compostable is fully displayed on the screen

Video of the process inside LazyColumn and Capturable

[jeluchu]

Any news or solutions to this problem @PatilShreyas? 🤔

[PatilShreyas]

Thanks for the image and videos @jeluchu. Will look into it

[PatilShreyas]

This issue has been fixed and released in v1.0.3. Thanks!

[jeluchu]

@PatilShreyas I have updated the library to version 1.0.3, but the error that I indicated in this incident still occurs, as soon as the content is no longer in view the generated image is not correct or expected, here you can see the test I have done https://ibb.co/svtkDJ9, it is hiding because there is a Toolbar above, as below is the button that calls the function to generate the biome, if not down in the view is complete: https://ibb.co/WcTKXD1 but to generate the bitmap is cut as you indicated in the first picture

[PatilShreyas]

Are you also including toolbar inside Capturable composable's content?

[jeluchu]

@PatilShreyas No, in principle this is inside a Scaffold, which then inside has a LazyColumn and inside is the Capturale

    Scaffold(
        topBar = {
            SimpleToolbar(
                backgroundColor = bgLetters,
                leftIcon = R.drawable.ic_arrow_left,
                style = TypographyNook.h3,
                navigateAction = navigate.goBack
            )
        },
        backgroundColor = bgLetters
    ) {

        LazyColumn(
            Modifier
                .fillMaxSize()
        ) {

            item {
                Capturable(
                    controller = controller,
                    onCaptured = { bitmap, _ ->
                        if (bitmap != null)
                            with(context) {
                                saveBitmap(bitmap.asAndroidBitmap())?.let { bitmapUri ->
                                    share(
                                        message = "",
                                        uri = bitmapUri
                                    )
                                }
                            }
                    }
                ) {
                    LetterImage(
                        addressee = addressee.value.text,
                        message = message.value.text,
                        sender = sender.value.text,
                        textColor = textColor.value,
                        bgColor = bgColor.value,
                        letterImage = letterImage
                    )
                }
            }

         ... // More items in the LazyColumn

      }

        GeneralButton(
              modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp),
              bgColor = Color.White.copy(.4f),
              contentColor = bgFabSearchHHP
        ) { controller.capture() }  // And this is the button at the bottom of the view that performs the capture function

}

[PatilShreyas]

If this LetterImage is a network image then disable hardware bitmap in builder configuration.

[jeluchu]

LetterImage is a Box() that contains a network image and 3 Text(), I'm looking at the documentation of the builder but I don't know where I have to indicate/disable what you tell me, since I understand that it will be in the Capturable builder configuration, right?

[PatilShreyas]

No, whatever network image you're using, every network image builder has an option for that. For e.g. coil also has it. Just say allowHardware(false) in builder.

[jeluchu]

Yes, I use Coil, I have just tried what you have indicated and it seems to be working correctly, thank you very much @PatilShreyas!