Android QR Code Generator y Scanner con Kotlin y Jetpack Compose — Guía Paso a Paso

Enfoque Legacy con XML (para referencia histórica)

En esta sección veremos cómo implementar un lector QR usando el enfoque clásico basado en XML y Activities. Aunque ya no es el método recomendado para nuevos proyectos, es útil para entender la evolución del desarrollo Android o para dar mantenimiento a apps con código legacy.

Desarrollando un lector QR con la librería de Play Services

Google pone a disposición de los desarrolladores una amplia cantidad de APIs a través de sus librerías de Play Services. Para tareas comunes como leer un código QR, no es necesario recurrir a librerías de terceros: la propia librería de Google hace todo el trabajo pesado por nosotros.

Nota de actualización: La librería com.google.android.gms:play-services-vision ha sido deprecada. Para nuevas implementaciones, Google recomienda utilizar ML Kit Barcode Scanning (com.google.mlkit:barcode-scanning o com.google.android.gms:play-services-mlkit-barcode-scanning) en combinación con CameraX para la integración de la cámara.

Crear un lector QR personalizado en Android Studio es bastante sencillo: solo debemos incluir la librería externa correspondiente a los servicios de Google Play y configurar algunos componentes.

Escáner QR: ¿cómo descifrar un código QR?

Con la ayuda del móvil podemos recuperar la información almacenada en un QR con solo apuntar la cámara hacia él. Esa es exactamente la idea de lo que implementaremos en esta sección.

Desarrollando nuestro propio lector de códigos QR en Android

Primero debemos agregar la dependencia necesaria en nuestro archivo build.gradle.

Agregando la dependencia en el archivo build.gradle

Abrimos el archivo build.gradle a nivel de módulo y agregamos la siguiente dependencia:

implementation 'com.google.android.gms:play-services:15.0.2'

Nota de actualización: La dependencia play-services es demasiado amplia e incluye APIs que probablemente no necesites. Es mejor usar solo los módulos requeridos. Además, play-services-vision está deprecada. La opción moderna recomendada es ML Kit Barcode Scanning con CameraX.

Si solo nos interesa la API de vision para leer QRs, podemos usar la dependencia más específica en nuestro build.gradle:

implementation 'com.google.android.gms:play-services-vision:15.0.2'

Las versiones se actualizan con frecuencia. Siempre puedes consultar la última disponible en la documentación oficial:

Set Up Google Play Services

Nota de actualización: Usar rangos de versión como 15.+ no es una práctica recomendada en producción, ya que puede introducir incompatibilidades inesperadas. Siempre especifica una versión exacta.

Si quisieras que la dependencia se actualice automáticamente a sub-versiones de la 15.x: implementation 'com.google.android.gms:play-services-vision:15.+'

Configurando el resto de la aplicación para el lector QR

El archivo manifest para manejar los permisos

En nuestro AndroidManifest.xml declaramos el uso de la cámara:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="net.desarrollolibre.qr.qr">
    <uses-permission android:name="android.permission.CAMERA" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

La vista de nuestro lector de códigos QR

Con la dependencia ya configurada, podemos ir a nuestra Activity o Fragment a crear los objetos y configuraciones necesarios. Pero primero, definamos el layout con la vista de la cámara:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_horizontal"
        android:padding="8dp">
        <SurfaceView
            android:id="@+id/camera_view"
            android:layout_width="640px"
            android:layout_height="480px"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" />
    </LinearLayout>
</LinearLayout>

Configurando el detector y la cámara en nuestra Activity

En nuestra Activity o Fragment creamos un objeto de tipo BarcodeDetector. Esta clase permite reconocer códigos de barras y QR a través de la cámara, devolviendo un SparseArray con el dato decodificado. A continuación también creamos el CameraSource:

        // Creo el detector QR
        barcodeDetector =
                new BarcodeDetector.Builder(getContext())
                        .setBarcodeFormats(Barcode.QR_CODE)
                        .build();
        // Creo la fuente de cámara
        cameraSource = new CameraSource
                .Builder(getContext(), barcodeDetector)
                .setRequestedPreviewSize(640, 480)
                .build();

El objeto CameraSource para obtener frames de la cámara

Referenciamos el SurfaceView de nuestro layout; este componente refleja en pantalla lo que está captando la cámara del dispositivo:

cameraView = (SurfaceView) v.findViewById(R.id.camera_view);

A continuación, registramos el listener del ciclo de vida del SurfaceHolder para iniciar y detener la cámara en el momento correcto:

        // Listener de ciclo de vida de la cámara
        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                if (ContextCompat.checkSelfPermission(getContext(), android.Manifest.permission.CAMERA) == PackageManager.PERMISSION_GRANTED) {
                    try {
                        cameraSource.start(cameraView.getHolder());
                    } catch (IOException ie) {
                        Log.e("CAMERA SOURCE", ie.getMessage());
                    }
                } else {
                    Toast.makeText(getContext(), getResources().getString(R.string.error_camara), Toast.LENGTH_SHORT).show();
                }
            }
            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            }
            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {
                cameraSource.stop();
            }
        });

Un punto clave: la cámara debe iniciarse con cameraSource.start(cameraView.getHolder()) dentro del callback surfaceCreated, es decir, una vez que la superficie ya ha sido dibujada. Intentar arrancarla antes provocará un error.

Por último, preparamos el evento que retornará el resultado del QR detectado. Cuando barcodes.size() sea mayor a cero, significa que se ha leído al menos un código:

        // Preparo el detector de QR
        barcodeDetector.setProcessor(new Detector.Processor<Barcode>() {
            @Override
            public void release() {
            }
            @Override
            public void receiveDetections(Detector.Detections<Barcode> detections) {
                final SparseArray<Barcode> barcodes = detections.getDetectedItems();
                if (barcodes.size() != 0) {
                    barcodes.valueAt(0).displayValue.toString();
                    // hacer algo con el valor obtenido
                }
                barcodeDetector.release();
            }
        });

Con barcodes.valueAt(0).displayValue.toString() obtenemos el dato devuelto por el QR: puede ser texto plano, un número o una URL, dependiendo de cómo haya sido generado el código.

Los permisos en Android 6 y superior

Nota de actualización: Las clases ActivityCompat y AppCompatActivity del código original pertenecen a las bibliotecas de soporte legadas (android.support.*). En proyectos modernos han sido reemplazadas por AndroidX (androidx.core.app.ActivityCompat y androidx.appcompat.app.AppCompatActivity). El manejo de permisos sigue un patrón similar, pero siempre conviene consultar la documentación más reciente de AndroidX.

A partir de Android 6 (API 23), Google introdujo un nuevo esquema de permisos en tiempo de ejecución: los permisos sensibles —como el acceso a la cámara— deben solicitarse explícitamente al usuario, no solo declararse en el AndroidManifest.

Por lo tanto, además de la declaración en el manifest, debemos solicitar el permiso desde el código de nuestra Activity. Añadimos esta lógica al construir el SurfaceHolder:

// Listener de ciclo de vida de la cámara
cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
   @Override
   public void surfaceCreated(SurfaceHolder holder) {
       if (ActivityCompat.checkSelfPermission(QRActiviy.this, Manifest.permission.CAMERA)
               != PackageManager.PERMISSION_GRANTED) {
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
               if (shouldShowRequestPermissionRationale(
                       Manifest.permission.CAMERA)) ;
               requestPermissions(new String[]{Manifest.permission.CAMERA},
                       MY_PERMISSIONS_REQUEST_CAMERA);
           }
           return;
       } else {
           try {
               cameraSource.start(cameraView.getHolder());
           } catch (IOException ie) {
               Log.e("CAMERA SOURCE", ie.getMessage());
           }
       }
   }
   @Override
   public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
   }
   @Override
   public void surfaceDestroyed(SurfaceHolder holder) {
       cameraSource.stop();
   }
});

Verificamos si el permiso ya fue concedido con checkSelfPermission y, en caso negativo, mostramos el diálogo nativo con shouldShowRequestPermissionRationale seguido de requestPermissions.

El código completo de la Activity quedaría así:

import android.Manifest;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.net.Uri;
import android.os.Build;
import android.support.v4.app.ActivityCompat; // Usar androidx.core.app.ActivityCompat
import android.support.v7.app.AppCompatActivity; // Usar androidx.appcompat.app.AppCompatActivity
import android.os.Bundle;
import android.util.Log;
import android.util.SparseArray;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.webkit.URLUtil;
import com.google.android.gms.vision.CameraSource; // Deprecado, usar ML Kit Barcode Scanning
import com.google.android.gms.vision.Detector; // Deprecado, usar ML Kit Barcode Scanning
import com.google.android.gms.vision.barcode.Barcode; // Deprecado, usar ML Kit Barcode Scanning
import com.google.android.gms.vision.barcode.BarcodeDetector; // Deprecado, usar ML Kit Barcode Scanning
import java.io.IOException;
public class MainActivity extends AppCompatActivity {
    private CameraSource cameraSource;
    private SurfaceView cameraView;
    private final int MY_PERMISSIONS_REQUEST_CAMERA = 1;
    private String token = "";
    private String tokenanterior = "";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        cameraView = (SurfaceView) findViewById(R.id.camera_view);
        initQR();
    }
    public void initQR() {
        BarcodeDetector barcodeDetector =
                new BarcodeDetector.Builder(this)
                        .setBarcodeFormats(Barcode.ALL_FORMATS)
                        .build();
        cameraSource = new CameraSource
                .Builder(this, barcodeDetector)
                .setRequestedPreviewSize(1600, 1024)
                .setAutoFocusEnabled(true) // Recomendado para un escaneo más preciso
                .build();
        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                if (ActivityCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA)
                        != PackageManager.PERMISSION_GRANTED) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        if (shouldShowRequestPermissionRationale(
                                Manifest.permission.CAMERA)) ;
                        requestPermissions(new String[]{Manifest.permission.CAMERA},
                                MY_PERMISSIONS_REQUEST_CAMERA);
                    }
                    return;
                } else {
                    try {
                        cameraSource.start(cameraView.getHolder());
                    } catch (IOException ie) {
                        Log.e("CAMERA SOURCE", ie.getMessage());
                    }
                }
            }
            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            }
            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {
                cameraSource.stop();
            }
        });
        barcodeDetector.setProcessor(new Detector.Processor<Barcode>() {
            @Override
            public void release() {
            }
            @Override
            public void receiveDetections(Detector.Detections<Barcode> detections) {
                final SparseArray<Barcode> barcodes = detections.getDetectedItems();
                if (barcodes.size() > 0) {
                    token = barcodes.valueAt(0).displayValue.toString();
                    if (!token.equals(tokenanterior)) {
                        tokenanterior = token;
                        Log.i("token", token);
                        if (URLUtil.isValidUrl(token)) {
                            Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(token));
                            startActivity(browserIntent);
                        } else {
                            Intent shareIntent = new Intent();
                            shareIntent.setAction(Intent.ACTION_SEND);
                            shareIntent.putExtra(Intent.EXTRA_TEXT, token);
                            shareIntent.setType("text/plain");
                            startActivity(shareIntent);
                        }
                        new Thread(new Runnable() {
                            public void run() {
                                try {
                                    synchronized (this) {
                                        wait(5000);
                                        tokenanterior = "";
                                    }
                                } catch (InterruptedException e) {
                                    Log.e("Error", "Waiting didn't work!!");
                                    e.printStackTrace();
                                }
                            }
                        }).start();
                    }
                }
            }
        });
    }
}

Lector de códigos QR en Kotlin (versión legacy)

La misma implementación pero en Kotlin. Nota los cambios idiomáticos: el uso de val y var, la sintaxis object : para implementaciones anónimas, la llamada segura con !! en nulables y la ausencia de punto y coma:

    private var cameraSource: CameraSource? = null
    private var cameraView: SurfaceView? = null
    private val MY_PERMISSIONS_REQUEST_CAMERA = 1
    private var token = ""
    private var tokenanterior = ""
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        cameraView = findViewById<View>(R.id.camera_view)
        initQR()
    }
    fun initQR() {
        val barcodeDetector = BarcodeDetector.Builder(this)
                .setBarcodeFormats(Barcode.ALL_FORMATS)
                .build()
        cameraSource = CameraSource.Builder(this, barcodeDetector)
                .setRequestedPreviewSize(1600, 1024)
                .setAutoFocusEnabled(true)
                .build()
        cameraView!!.holder.addCallback(object : SurfaceHolder.Callback {
            override fun surfaceCreated(holder: SurfaceHolder) {
                if (ActivityCompat.checkSelfPermission(this@MainActivity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        if (shouldShowRequestPermissionRationale(Manifest.permission.CAMERA))
                        ;
                        requestPermissions(arrayOf(Manifest.permission.CAMERA), MY_PERMISSIONS_REQUEST_CAMERA)
                    }
                    return
                } else {
                    try {
                        cameraSource!!.start(cameraView!!.holder)
                    } catch (ie: IOException) {
                        Log.e("CAMERA SOURCE", ie.message)
                    }
                }
            }
            override fun surfaceChanged(holder: SurfaceHolder, format: Int, width: Int, height: Int) {}
            override fun surfaceDestroyed(holder: SurfaceHolder) {
                cameraSource!!.stop()
            }
        })
        barcodeDetector.setProcessor(object : Detector.Processor<Barcode> {
            override fun release() {}
            override fun receiveDetections(detections: Detector.Detections<Barcode>) {
                val barcodes = detections.getDetectedItems()
                if (barcodes.size() > 0) {
                    token = barcodes.valueAt(0).displayValue.toString()
                    if (token != tokenanterior) {
                        tokenanterior = token
                        Log.i("token", token)
                        if (URLUtil.isValidUrl(token)) {
                            val browserIntent = Intent(Intent.ACTION_VIEW, Uri.parse(token))
                            startActivity(browserIntent)
                        } else {
                            val shareIntent = Intent()
                            shareIntent.action = Intent.ACTION_SEND
                            shareIntent.putExtra(Intent.EXTRA_TEXT, token)
                            shareIntent.type = "text/plain"
                            startActivity(shareIntent)
                        }
                        Thread(object : Runnable {
                            override fun run() {
                                try {
                                    synchronized(this) {
                                        wait(5000)
                                        tokenanterior = ""
                                    }
                                } catch (e: InterruptedException) {
                                    Log.e("Error", "Waiting didn't work!!")
                                    e.printStackTrace()
                                }
                            }
                        }).start()
                    }
                }
            }
        })
    }

En el código anterior puedes ver el flujo completo de detección: obtenemos el valor del QR con barcodes.valueAt(0).displayValue.toString(), lo validamos para evitar procesar el mismo código consecutivamente (gracias al mecanismo de tokenanterior y el Thread con wait(5000)), y finalmente con URLUtil.isValidUrl(token) determinamos si el contenido es una URL —en cuyo caso abrimos el navegador— o texto plano, que compartimos con otras apps mediante un Intent.ACTION_SEND.

Al ejecutar la aplicación obtendremos una pantalla como la siguiente:

Recuerda que una vez que obtienes el código puedes hacer lo que necesites con él: enviarlo a tu backend para validarlo, mostrarlo en un dialog o abrir el navegador. Si te interesa generar QRs desde el servidor, puedes revisar el artículo sobre cómo crear códigos QR en CodeIgniter.

Puedes usar el siguiente QR para probar tu escáner; apunta la cámara y debería devolverte la URL de este blog:

Un detalle importante: este mismo código sirve para leer códigos de barras (barcodes) además de QRs. El core del lector es idéntico; simplemente ajustando el parámetro en setBarcodeFormats() puedes soportar EAN-13, UPC-A, Code 128 y muchos más formatos. Con eso, puedes construir una app bastante potente que funcione como lector universal de códigos.

Siguiente paso: aprende a usar Room Database (SQLite) en Android Studio con Kotlin.