Issue centering a QR square

Issue

I am writing an Android test app to see how to handle QR codes. This is the code for the main activity (MainActivity.kt) and a question is following.

package me.software.myTestApp

import android.graphics.Bitmap
import android.graphics.Color
import android.graphics.drawable.BitmapDrawable
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.view.View
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet
import com.google.zxing.BarcodeFormat
import com.google.zxing.EncodeHintType
import com.google.zxing.qrcode.QRCodeWriter


class MainActivity : AppCompatActivity() {
    private var constraintLayout: ConstraintLayout? = null
    private var deviceFrameID:Int = 0
    var squareImg: ImageView? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        constraintLayout = findViewById(R.id.main)
        deviceFrameID = resources.getIdentifier("main","id",packageName)

        squareImg = ImageView(this)
        squareImg?.id = View.generateViewId()

        val constrSet = ConstraintSet()

        constraintLayout?.addView(squareImg)

        val bm = getQrCodeBitmap(
            "HELLI-HELLO",
            "JIko98TEST"
        )

        val mDrawable: Drawable = BitmapDrawable(resources, bm)
        squareImg?.background = mDrawable
        val params = squareImg?.layoutParams
        params?.width = 512
        params?.height = 512
        squareImg?.layoutParams = params

        constrSet.connect(squareImg!!.id, ConstraintSet.LEFT, deviceFrameID, ConstraintSet.LEFT)
        constrSet.connect(squareImg!!.id, ConstraintSet.RIGHT, deviceFrameID, ConstraintSet.RIGHT)
        constrSet.connect(squareImg!!.id, ConstraintSet.TOP, deviceFrameID, ConstraintSet.TOP)
        constrSet.connect(squareImg!!.id, ConstraintSet.BOTTOM, deviceFrameID, ConstraintSet.BOTTOM)

        constrSet.applyTo(constraintLayout)
    }

    fun getQrCodeBitmap(ssid: String, password: String): Bitmap {/*From the net*/
        val size = 512 //pixels
        val qrCodeContent = "WIFI:S:$ssid;T:WPA;P:$password;;"
        val hints = hashMapOf<EncodeHintType, Int>().also { it[EncodeHintType.MARGIN] = 1 } // Make the     QR code buffer border narrower
        val bits = QRCodeWriter().encode(qrCodeContent, BarcodeFormat.QR_CODE, size, size)
        return Bitmap.createBitmap(size, size, Bitmap.Config.RGB_565).also {
            for (x in 0 until size) {
                for (y in 0 until size) {
                    it.setPixel(x, y, if (bits[x, y]) Color.BLACK else Color.WHITE)
                }
            }
        }
    }
}

By using this code I was expecting to see a perfectly square QR code centered both horizontally and vertically. But what I see is a rather well centered QR code, but rather than square, it is streched as the shape of the display. What do I need to modify to have a perfect square?

Solution

The ConstraintSet doesn't know about the QR code view, so any attempts to constrain it will fail since it is unknown to the ConstraintSet. The ConstraintSet is populated with a call to ConstraintSet#clone(ConstraintLayout)

Change the code to the following:

constraintLayout?.addView(squareImg)

// The ConstraintLayout now contains all views, so the ConstraintSet
// can get a handle to those views for later connections.
val constrSet = ConstraintSet()
constrSet.clone(constraintLayout)

...

Answered By - Cheticamp