alexzhirkevich/custom-qr-generator

add jetpack compose support to the library

Closed this issue · 5 comments

Basic usage in Jetpack compose

var text by remember {
        mutableStateOf("")
    }

QRCode(text = text, modifier = Modifier.size(200.dp))

Please add jetpack compose support and below compose function so, it can be easy to use in compose

@Composable
fun QRCode(
    modifier: Modifier = Modifier,
    text: String = "This is QR text", enableLastEye: Boolean = true,
    color: Color = Color(0xFFBD22E7), enableGradient: Boolean = true,
    gradientColors: List<Color> = listOf(Color.Red, Color.Blue),
    gradientColorDirection: QrVectorColor.LinearGradient.Orientation = QrVectorColor.LinearGradient
        .Orientation.LeftDiagonal,
    enableLogo: Boolean = false,
    logo: Int? = null, logoShape: QrVectorLogoShape = QrVectorLogoShape.Circle,
) {

    val context = LocalContext.current
    AndroidView(factory = { ctx ->

        ImageView(ctx).apply {
            val options = createQrVectorOptions {

                padding = .01f

                fourthEyeEnabled = enableLastEye


                if (enableLogo) {
                    logo {
                        drawable = logo?.let { ContextCompat.getDrawable(ctx.findActivity(), it) }
                        size = .25f
                        padding = QrVectorLogoPadding.Natural(.2f)
                        shape = logoShape
                    }
                }

                colors {
                    dark = if (enableGradient) {
                        QrVectorColor.LinearGradient(
                            colors = listOf(
                                0f to gradientColors.first().toArgb(),
                                1f to gradientColors.last().toArgb(),
                            ),
                            orientation = gradientColorDirection
                        )
                    } else {
                        QrVectorColor
                            .Solid(color.toArgb())
                    }

                }
                shapes {
                    darkPixel = QrVectorPixelShape
                        .RoundCorners(.5f)
                    ball = QrVectorBallShape
                        .RoundCorners(.25f)
                    frame = QrVectorFrameShape
                        .RoundCorners(.25f)
                }
            }

            this.setImageBitmap(
                QrCodeDrawable({ text }, options = options)
                    .toBitmap(1024, 1024)
            )
        }
    }, update = {
        it.apply {
            val options = createQrVectorOptions {

                padding = .01f

                fourthEyeEnabled = enableLastEye


                if (enableLogo) {
                    logo {
                        drawable =
                            logo?.let { ContextCompat.getDrawable(context.findActivity(), it) }
                        size = .25f
                        padding = QrVectorLogoPadding.Natural(.2f)
                        shape = logoShape
                    }
                }

                colors {
                    dark = if (enableGradient) {
                        QrVectorColor.LinearGradient(
                            colors = listOf(
                                0f to gradientColors.first().toArgb(),
                                1f to gradientColors.last().toArgb(),
                            ),
                            orientation = gradientColorDirection
                        )
                    } else {
                        QrVectorColor
                            .Solid(color.toArgb())
                    }

                }
                shapes {
                    darkPixel = QrVectorPixelShape
                        .RoundCorners(.5f)
                    ball = QrVectorBallShape
                        .RoundCorners(.25f)
                    frame = QrVectorFrameShape
                        .RoundCorners(.25f)
                }
            }

            this.setImageBitmap(
                QrCodeDrawable({ text }, options = options)
                    .toBitmap(1024, 1024)
            )
        }
    }, modifier = modifier)

}

Read usage step 3 in readme

Read usage step 3 in readme

as you wrote, it will require accompanist library and also I think it is not a recommended usage in compose logic.

Library produces android drawable. Not much I can do with it. You can use this drawable with compose using any known method.

If you mean large code to generate options, you can do it outside of compose scope

Nothing is wrong using accompanist library even in production code, if it works, it works.

But you can use
Drawable.toBitmap()
and then
Bitmap.asImageBitmap()
to display QR code in Compose's Image

Compose Multiplatform support has been added in separate library