alexzhirkevich / custom-qr-generator

Android library for creating QR codes with logo, custom shapes, colors, background image. Powered by ZXing
MIT License
173 stars 18 forks source link

add jetpack compose support to the library #44

Closed akardas16 closed 10 months ago

akardas16 commented 1 year ago

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)

}
alexzhirkevich commented 1 year ago

Read usage step 3 in readme

akardas16 commented 1 year ago

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.

alexzhirkevich commented 1 year ago

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

XRayAdamo commented 12 months ago

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

alexzhirkevich commented 10 months ago

Compose Multiplatform support has been added in separate library