rive-app / rive-app/rive-android

Android RiveView capture not working

Open
#333 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Kotlin
Stars
538
Forks
66
PR merge metrics
No merged PRs in 30d

Description

Hello
How do I Capture RiveView in Android?

Here is my code.

[Compose Button]
@Composable
fun MyRoomShareView(
modifier: Modifier = Modifier,
uiState: MyRoomUiState,
onShare: (Uri) -> Unit = {},
) {
val context = LocalContext.current
val coroutineScope = rememberCoroutineScope()
Box(
modifier = modifier
.padding(top = 8.dp, start = 8.dp, end = 8.dp, bottom = 32.dp)
) {
Column(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
) {

        val screenshotableComposable = screenshotableComposable(
            content = {
                MyRoomShareMyProfileView(
                    uiState = uiState
                )
            }
        )

        Box(modifier = Modifier.weight(1f, fill = true))

        MyTextButton(
            modifier = Modifier
                .fillMaxWidth(),
            text = stringResource(id = R.string.str_share_my_room),
            textColor = White,
            contentColor = Blue500,
            onClick = {
                Timber.d("onClick~~")
                    val captureBitmap = screenshotableComposable.invoke()
                    // Image Quality 80% 

                    val bmp = ImageUtils.compressBitmap(captureBitmap, ImageUtils.IMAGE_QUALITY)
                    val folder = FileUtils.getFolderPath(context, FileUtils.MY_FOLDER)
                    val newFile = ImageUtils.saveBitmapToJpg(bmp, folder, "capture_${
                        SystemClock.elapsedRealtime().toString().plus("_").plus(UUID.randomUUID().toString().uppercase(
                            Locale.getDefault()
                        ).replace("-", "_").plus(".jpg"))}", ImageUtils.IMAGE_QUALITY)


                    val selectedMediaUri = FileUtils.file2Uri(context, newFile)

                    Timber.d("newFile :  ${newFile.name}, ${newFile.path}")

                    Timber.d("uri = ${selectedMediaUri}")
                    onShare.invoke(selectedMediaUri)
            }
        )
    }
}

}

@Composable
fun screenshotableComposable(content: @Composable () -> Unit): () -> Bitmap {
val context = LocalContext.current
val composeView = remember { ComposeView(context = context) }
fun captureBitmap(): Bitmap = composeView.drawToBitmap()
AndroidView(
factory = {
composeView.apply {
setContent {
content()
}
}
},
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight() // Make sure to set unbounded true to draw beyond screen area
)
return ::captureBitmap
}

Thank you

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied Compose capture code, including screenshotableComposable and the RiveView-containing content, and observe the resulting Bitmap. Inspect the Android capture behavior around ComposeView.drawToBitmap(); done means identifying why the RiveView is missing or unusable in the captured image and confirming a working capture or a documented limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
kotlin
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.