Compose-Screenshot icon indicating copy to clipboard operation
Compose-Screenshot copied to clipboard

ScreenshotBox was screenshoted the whole screen instead the Composeable which is wrapped inside the ScreenshotBox

Open biondiBagasta opened this issue 1 year ago β€’ 5 comments

My Code :

@Composable
fun SignaturePadExampleScreen(
    rootNavHostController: NavHostController
) {
    val signaturePadAdapter: SignaturePadAdapter? = null
    val screenshotState = rememberScreenshotState()
    val imageResult: ImageResult = screenshotState.imageState.value
    val context = LocalContext.current

    LaunchedEffect(key1 = imageResult) {
        if(imageResult is ImageResult.Success) {
            saveBitmapToGallery(context, screenshotState.imageBitmap!!.asAndroidBitmap(), "Screenshots")
        }
    }

    Scaffold(
        topBar = {
            CustomBackTopAppBar(title = "Signaturepad Example") {
                rootNavHostController.popBackStack()
            }
        }
    ) {
        ScreenshotContainer(
            modifier = Modifier.padding(it),
            screenshotState = screenshotState,
            signaturePadAdapter = signaturePadAdapter
        )
    }
}

@Composable
private fun ScreenshotContainer(
    signaturePadAdapter: SignaturePadAdapter?,
    screenshotState: ScreenshotState,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        ScreenshotBox(
            screenshotState = screenshotState,
            modifier = Modifier.fillMaxSize()
        ) {
            Column(
                modifier = modifier
                    .fillMaxSize()
                    .padding(20.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(0.6f)
                        .background(
                            color = Color.Blue
                        )
                ) {
                    SignaturePadView(
                        onReady = {

                        },
                        penColor = Color.White,

                        onStartSigning = {
                            Log.d("SignedListener", "OnStartSigning")
                        },
                        onSigning = {
                            Log.d("SignedListener", "onSigning")
                        },
                        onSigned = {
                            Log.d("SignedListener", "onSigned")
                        },
                        onClear = {
                            Log.d(
                                "ComposeActivity",
                                "onClear isEmpty:" + signaturePadAdapter?.isEmpty
                            )
                        },
                    )
                }
                Spacer(modifier = Modifier.height(30.dp))
                ElevatedButton(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp),
                    onClick = {
                        screenshotState.capture()
                    },
                    shape = RoundedCornerShape(8.dp),
                    colors = ButtonDefaults.elevatedButtonColors(
                        Color(0xff6c5ce7)
                    )
                ) {
                    Text("Take Screeenshot", color = Color.White)
                }
            }
        }
    }
}```

The result :

![screenshot](https://user-images.githubusercontent.com/75413828/235405576-8fb085bc-920a-4445-9a23-da2da39944aa.png)

biondiBagasta avatar May 01 '23 04:05 biondiBagasta

I have same issue

 val screenshotState = rememberScreenshotState()
 Box(
        Modifier
            .fillMaxSize()
            .padding(paddingValues)) {

        ScreenshotBox(
            Modifier.fillMaxSize(),
            screenshotState = screenshotState
        ) {
            Image(
                modifier = Modifier.fillMaxSize(),
                bitmap = bitmapBackground,
                contentDescription = null
            )
            Image(
                bitmap = bitmapCard,
                contentScale = ContentScale.Inside,
                contentDescription = null
            )
        }

        var showDialog by remember {
            mutableStateOf(false)
        }
        val scope = rememberCoroutineScope()
        FloatingActionButton(
            modifier = Modifier.align(Alignment.BottomEnd),
            onClick = {
                scope.launch {
                    screenshotState.capture()
                    showDialog = true
                }
            }) {
            Text("πŸ’ŽDone")
        }


        if (showDialog)
            screenshotState.imageBitmap?.let {
                Dialog(onDismissRequest = { showDialog = false }) {
                    Image(bitmap = it, contentDescription = null)
                }
            }
    }

The FloatingActionButton is outside ScreenshotBox, but it is overlay on ScreenshotBox, and the result is contain the FloatingActionButton

fan123199 avatar May 13 '23 03:05 fan123199

I have the same issue, Have someone found a workaround?

Thanks

alfdev avatar Jul 05 '23 13:07 alfdev

same issue I want to create long pictures

ldlywt avatar Dec 25 '23 07:12 ldlywt

same issue on my end

Eyt-Lev avatar Dec 26 '23 20:12 Eyt-Lev

same issue, pls help

willbe058 avatar Dec 28 '23 12:12 willbe058