En este momento estás viendo Cómo Crear App De Lector QR En Android Studio

Cómo Crear App De Lector QR En Android Studio

En está oportunidad vamos a crear una App de Lector de QR.

Primeramente, nos dirigimos al archivo strings.xml, añadimos textos para mostrar en pantalla, como código QR, scanner y escanear.

Finalmente nos dirigimos al archivo gradle.build y colocamos las referencias de las librerías de QR.

implementation 'com.google.zxing:core:3.3.0'
implementation('com.journeyapps:zxing-android-embedded:3.6.0') { transitive = false }
<resources>
    <string name="app_name">LectorQR</string>
    <string name="qr_code">Código QR</string>
    <string name="scanner">Scanner</string>
    <string name="escanear">Escanear</string>
</resources>

Ahora nos vamos al archivo colors.xml y añadimos dos colores.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="colorTeban">#FF420042</color>
</resources>

Una vez editado, pasamos al archivo themes.xml en su modo night y hacemos referencia a los colores que agregamos. Procedemos de la misma manera para la versión night.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Curso4LectorQR" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>

        <item name="colorOnSecondary">@color/colorTeban</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorOnSecondary</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Ahora nos dirigimos al archivo activity main.xml, como se puede observar esta limpio y listo para que coloquemos nuestro código.

Colocamos el atributo gravedad y fondo.

Creamos un nuevo LinearLayout, con ancho, altura y orientación.

Dentro del LinearLayout creamos un TextView, de igual manera vamos colocando ancho, alto, margen superior, margen inferior, texto, color del texto, tamaño del texto y estilo del texto.

Luego creamos otro TextView, colocamos ancho, alto, margen, texto, color y tamaño

Cerramos el LinearLayout, creamos un botón con su identificador, ancho, alto, gravedad, margen superior, fondo, espaciado, texto, color, tamaño y estilo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:background="@drawable/ab_gradient"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="80dp"
            android:text="@string/qr_code"
            android:textColor="#ffffff"
            android:textSize="32sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="@string/scanner"
            android:textColor="#FFFFFF"
            android:textSize="24sp" />

    </LinearLayout>

    <Button
        android:id="@+id/scan"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20sp"
        android:background="@color/purple_700"
        android:padding="4dp"
        android:text="@string/escanear"
        android:textColor="#ffffff"
        android:textSize="19sp"
        android:textStyle="bold" />

</LinearLayout>

Ahora nos dirigimos al archivo MainActivity.java.

Colocamos el atributo para controlar el botón, colocamos el método onActivityResult para obtener datos al escanear un código QR.

Dentro del método creamos una alerta para mostrar los datos del qr, dentro del método oncreate, hacemos referencia al botón para escanear.

Colocamos un listener al botón, es decir cuando se haga click se ejecutará una determinada acción.

En este caso, estamos colocando las acciones que indican el sitio web oficial de la librería para escanear qr.

import androidx.annotation.Nullable;
import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;
import android.content.ClipData;
import android.content.ClipboardManager;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import com.google.zxing.integration.android.IntentIntegrator;
import com.google.zxing.integration.android.IntentResult;

public class MainActivity extends AppCompatActivity {
    private Button scan;

    @Override protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data); if (result != null && result.getContents() != null) {
        new AlertDialog.Builder(MainActivity.this).setTitle("Resultados de la lectura") .setMessage(result.getContents()) .setPositiveButton("Copiar", new DialogInterface.OnClickListener() {
            @Override public void onClick(DialogInterface dialog, int which) { ClipboardManager manager = (ClipboardManager) getSystemService(CLIPBOARD_SERVICE); ClipData data = ClipData.newPlainText("resultado", result.getContents()); manager.setPrimaryClip(data); }
        }).setNegativeButton("Cancelar", new DialogInterface.OnClickListener() {
            @Override public void onClick(DialogInterface dialog, int which) { dialog.dismiss(); } }).create().show();
    }
        super.onActivityResult(requestCode, resultCode, data);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        scan = findViewById(R.id.scan);

        scan.setOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                IntentIntegrator intentIntegrator = new IntentIntegrator(MainActivity.this);
                intentIntegrator.setDesiredBarcodeFormats(IntentIntegrator.QR_CODE);
                intentIntegrator.setCameraId(0);
                intentIntegrator.setOrientationLocked(false);
                intentIntegrator.setPrompt("explorando");
                intentIntegrator.setBeepEnabled(true);
                intentIntegrator.setBarcodeImageEnabled(true);
                intentIntegrator.initiateScan();
            }
        });
    }
}

A continuación te dejo un video con la implementación de la App de Lector QR.

Deja una respuesta