DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
¡Actualizado el 29-09-2017!

En esta entrada veremos cómo crear un lector de códigos QR en Android; para hacerte a la idea, actualmente existen varios lectores QR en Android que los puedes encontrar en la Google Play; por nombrar algunos:

Crear un lector QR personalizado (creado por nosotros mismos en Android Studio) es bastante sencillo con Android y solo debemos incluir una librería externa la cual corresponde a los servicios de Google Play: com.google.android.gms:play-services-vision, pero antes de esto veamos qué es, cómo funciona un código QR y cómo podemos emplearlo en nuestras aplicaciones Android y webs:

¿Qué es un código QR?

Un código QR no es más que un sistema que permite almacenar información en una especie de código de barras de última generación.
Un código QR es un tipo de código de barra pero en dos dimensiones en el cual se codifica información en un cuadro como el siguiente:
Código qr

Los códigos QR son realmente útiles para administrar inventarios, compartir datos e información de una manera fácil y muy profesional; los códigos QR son actualmente un elemento fundamental en cualquier aplicación de pequeña o gran envergadura debido a su versatilidad al momento de usarlos.

¿Para qué sirve un Código QR?

Como se comentó anteriormente, los códigos QR son ampliamente empleados debido a su versatilidad y gran utilidad; se emplean en todo tipo de productos como alimentarios hasta llegar a dispositivos, automóviles, revistas y otros tantos de tipos de ámbitos publicidad, marketing, etc...

...o como nuestro caso de interés como parte de un proceso en una aplicación Android...

...en donde podemos procesar medicinas e indicar al cliente si la medicina es de utilidad para su persona teniendo su perfil previamente cargado y sin necesidad de que el cliente suministre información o datos algunos de manera manual.

¿Cómo generar un código QR?

En Internet encontrarás una cantidad inmensa de formas para generar códigos QR; inclusive podemos crear códigos QR con librerías PHP, Java, etc; y existen webs que se encargan de generar códigos QR como la siguiente Genere su codigo QR gratis o alguno personalizado mediante algún lenguaje de programación como vimos anteriormente en: Generando códigos QR con CodeIgniter.

¿Cómo descifrar un código QR?

Con la ayuda de un móvil podemos recuperar esta información tan solo con apuntar la cámara hacia el código QR y esa es la idea y lo que haremos en la siguiente sección de esta entrada en donde nos dedicaremos a detallar a como crear un lector QR con Android.

Desarrollando nuestro propio lector de códigos QR en Android

Finalmente llegamos al área de interés en cuál es crear nuestro lector de códigos QR en Android; primero debemos agregar la dependencia necesaria en nuestro build.gradle.

Agregando la dependencia en el archivo build.gradle en Android Studio

Abrimos nuestro archivo build.gradle y agregamos la siguiente dependencia:

compile 'com.google.android.gms:play-services:11.2.2'

La anterior dependencia nos da acceso no solo a la API de vision si no a toda la plataforma que nos ofrece la Google Play como en nuestro caso de interés es solomenteleer un código QR, podemos emplear la siguiente dependencia en nuestro build.gradle:

compile 'com.google.android.gms:play-services-vision:11.2.2'

Debes tener presente que las versiones cambian de un día a otro; puedes encontrar la última versión en la documentación oficial en el siguiente enlace:

Set Up Google Play Services

Para que el paquete actualice automáticamente podríamos hacer algo así compile 'com.google.android.gms:play-services-vision:11.+'

Configurando el resto de la aplicación

La Archivo manifest

En nuestro manifest colocamos 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

Con nuestra dependencia ya configurada ahora podemos ir a nuestra actividad y/o fragment y crear los objetos, eventos y configuraciones necesarias para tener nuestro propio lector QR; pero primero debemos de configurar el layout del a actividad o fragment:

<?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>

Y en nuestra actividad o fragment debemos crear un objeto de tipo BarcodeDetector esta clase permite reconocer códigos de barra y códigos QR -el cual es nuestro caso de interés- a través de la cámara del dispositivo y devolver un objeto de tipo SparseArray con el dato decodificado del QR analizado:

        // creo el detector qr
        barcodeDetector =
                new BarcodeDetector.Builder(getContext())
                        .setBarcodeFormats(Barcode.QR_CODE)
                        .build();

        // creo la camara fuente
        cameraSource = new CameraSource
                .Builder(getContext(), barcodeDetector)
                .setRequestedPreviewSize(640, 480)
                .build();
El objeto CameraSource permite obtener frames de la cámara del dispositivo y posteriormente analizarlo.

Especificamos el objeto SurfaceView de nuestro layout; este objeto se encarga de espejar o reflejar lo que estamos viendo por la cámara del dispositivo en nuestra superficie de nuestro layout:

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

Ahora especificamos los listener o escuchadores que permiten controlar el ciclo de vida de la cámara:

        // listener de ciclo de vida de la camara
        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {

                // verifico si el usuario dio los permisos para la camara
                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 importante del código anterior es iniciar la cámara una vez que nuestra superficie sea dibujada con cameraSource.start(cameraView.getHolder());.

Por último se prepara el evento que retornará el resultado provisto por la detección y procesamiento del QR; cuando existe una respuesta barcodes.size() nos devolverá un valor mayor a cero:

 // 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
            }

barcodeDetector.release();
        });

Con el barcodes.valueAt(0).displayValue.toString(); obtenemos el dato devuelto por el QR que puede ser un texto, entero o una URL dependiendo cómo configuremos nuestro código QR.

Los permisos en Android 6 y superior

A partir de Android 6 Google creó un nuevo esquemas de permisos los cuales son solicitados al usuarios al momento de requerir emplear alguna función de dicho(s) permiso(s)...

...por lo tanto no basta con solo incluir la dependencia en nuestro AndroidManifest, también debemos solicitar el permiso propiamente dicho desde el código java de nuestra aplicación Android.

Entonces, al momento de construir nuestra superficie colocamos el siguiente código:

// listener de ciclo de vida de la camara
cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
   @Override
   public void surfaceCreated(SurfaceHolder holder) {

       // verifico si el usuario dio los permisos para la camara
       if (ActivityCompat.checkSelfPermission(QRActiviy.this, Manifest.permission.CAMERA)
               != PackageManager.PERMISSION_GRANTED) {

           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
               // verificamos la version de Android que sea al menos la M para mostrar
               // el dialog de la solicitud de la camara
               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();
   }
});

El código es relativamente sencillo, verificamos si el permiso fue concedido con checkSelfPermission y con shouldShowRequestPermissionRationale mostramos el dialog para solicitar el permiso.

Finalmente el código queda de la siguiente manera:


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() {

        // creo el detector qr
        BarcodeDetector barcodeDetector =
                new BarcodeDetector.Builder(this)
                        .setBarcodeFormats(Barcode.ALL_FORMATS)
                        .build();

        // creo la camara
        cameraSource = new CameraSource
                .Builder(this, barcodeDetector)
                .setRequestedPreviewSize(1600, 1024)
                .setAutoFocusEnabled(true) //you should add this feature
                .build();

        // listener de ciclo de vida de la camara
        cameraView.getHolder().addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {

                // verifico si el usuario dio los permisos para la camara
                if (ActivityCompat.checkSelfPermission(MainActivity.this, Manifest.permission.CAMERA)
                        != PackageManager.PERMISSION_GRANTED) {

                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                        // verificamos la version de ANdroid que sea al menos la M para mostrar
                        // el dialog de la solicitud de la camara
                        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();
            }
        });

        // 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) {

                    // obtenemos el token
                    token = barcodes.valueAt(0).displayValue.toString();

                    // verificamos que el token anterior no se igual al actual
                    // esto es util para evitar multiples llamadas empleando el mismo token
                    if (!token.equals(tokenanterior)) {

                        // guardamos el ultimo token proceado
                        tokenanterior = token;
                        Log.i("token", token);

                        if (URLUtil.isValidUrl(token)) {
                            // si es una URL valida abre el navegador
                            Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(token));
                            startActivity(browserIntent);
                        } else {
                            // comparte en otras apps
                            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);
                                        // limpiamos el token
                                        tokenanterior = "";
                                    }
                                } catch (InterruptedException e) {
                                    // TODO Auto-generated catch block
                                    Log.e("Error", "Waiting didnt work!!");
                                    e.printStackTrace();
                                }
                            }
                        }).start();

                    }
                }
            }
        });

    }

}

En el código anterior puede notar que al momento de detectar una lectura del código QR por el móvil se realiza una serie de pasos que va desde la obtención del mismo mediante barcodes.valueAt(0).displayValue.toString();, la validación (y liberación con el Thread) para evitar leer el mismo QR de forma consecutiva (el lector QR siempre sigue ejecutándose independientemente de si ha procesado un QR o no) y luego mediante URLUtil.isValidUrl(token) verificamos si es una URL el token obtenido, y en ese caso habre en navegador predefinido de nuestro teléfono, en caso contrario simplemente mostramos el dialog para compartir contenido por las distintas aplicaciones que tengamos en nuestro teléfono.

Al correr la aplicación, obtendremos una pantalla como la siguiente:

app corriendo con lector qr

Cabe recordar que una vez que obtenemos el código podemos hacer lo que queramos, generalmente si estamos creando una aplicación personalizada (Ve como crear códigos QR en CodeIgniter), es probable que queramos enviarlo a nuestra aplicación para validarlo o simplemente mostrarlo al usuario mediante un dialog o abrir un navegador como especificamos anteriormente.

Puedes emplear el siguiente QR que devuelve la URL de este Blog:

desarrollolibre qr

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Telegram messenger para Android

Telegram messenger para Android

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Creando increibles Drawer en Android con MaterialDrawer

Creando increibles Drawer en Android con MaterialDrawer

Algunos artículos que te pueden interesar

Primeros pasos con Wikitude en Android (parte 1)

Primeros pasos con Wikitude en Android (parte 1)

Se explica como dar los primeros pasos con Wikitude con la cual podemos crear aplicaciones con realidad aumentada con Android Studio, IOS, PhoneGap; se explica como descargar e instalar la SDK de Wikitude en Android Studio.

Andrés Cruz 25-05-2017

Cómo realizar una actividad de presentación animada en Android con ViewPager

Cómo realizar una actividad de presentación animada en Android con ViewPager

Se explica cómo crear una vista de presentación en Android empleando los ViewPager mediante un sencillo carrusel y unas animaciones o transiciones entre unas imágenes.

Andrés Cruz 08-06-2017

Los bottom sheets en Android

Los bottom sheets en Android

Se explica a través de un sencillo ejemplo cómo emplear los bottom sheets en Android incluyendo su definición y estatus.

Andrés Cruz 16-01-2017