qrcode-kotlin icon indicating copy to clipboard operation
qrcode-kotlin copied to clipboard

[Android] Blank QR code squares with compose

Open LossyDragon opened this issue 1 year ago • 12 comments

Describe the bug 4.0.2-3

I'm updating a hobby project from v3.3.0 to 4.0.+ and it seems I am unable to render a QR code through Jetpack compose.

I am using landscapist as my image loading library and QR codes were working fine throughout v3, but now they are just blank solid colored squares moving to v4

I have tried using render(), render("bmp"), and renderToGraphics().nativeImage() to no avail. nativeImage() was my working way last major version.

render() seems to actually produce an inner square ~~but, and rounded only shows rounded corners along the right side.~~

Correction: Top left corner is square while the other corners show a rounded corner

To Reproduce Steps to reproduce the behavior. For example:

  1. Create a android sample project with compose
  2. Implement landscapist and qrcode-kotlin
  3. Create a sample screen with some test cases
  4. See error

Expected behavior Rendered QR codes using Jetpack compose. Maybe a quick sample showing it off would help newcomers too!

Screenshots or other QRCodes rendered with other tools

qr1 qr2

Additional context

Quick sample code

                  LazyColumn(
                        modifier = Modifier.fillMaxSize(),
                        verticalArrangement = Arrangement.Top,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        item {
                            Text(text = "QR Examples!")
                            val qr1 = QRCode.ofSquares()
                                .withColor(Color.BLUE)
                                .withBackgroundColor(Color.RED)
                                .build("Hello QR 1!")
                            CoilImage(imageModel = { qr1.render() })
                            Spacer(modifier = Modifier.height(6.dp))
                        }

                        item {
                            val qr2 = QRCode.ofCircles()
                                .withColor(Color.BLUE)
                                .withBackgroundColor(Color.RED)
                                .build("Hello QR 2!")
                            CoilImage(imageModel = { qr2.render("bmp") })
                            Spacer(modifier = Modifier.height(6.dp))
                        }

                        item {
                            val qr3 = QRCode.ofCircles()
                                .withColor(Color.BLUE)
                                .withBackgroundColor(Color.RED)
                                .build("Hello QR 3!")
                            CoilImage(imageModel = { qr3.renderToGraphics().nativeImage() })
                            Spacer(modifier = Modifier.height(6.dp))
                        }
                    }

LossyDragon avatar Nov 07 '23 18:11 LossyDragon