Filter by Kategori
Game
Movie
TV
Komik
TeknoTutorial Tekno

Cara Membuat Aplikasi Android QR Code Scanner Sederhana, Developer Pemula Wajib Coba!

Dunia startup fintech (financial technology) sedang bertumbuh pesat. Fintech menawarkan metode pembayaran non-tunai yang mudah, salah satunya adalah QR Code Scanner.

9 Langkah Membuat Aplikasi Android QR Code Scanner

view rawMainActivity.java hosted with ❤ by GitHub

Kali ini Dafunda Tekno akan berbagi cara untuk membuat aplikasi Android QR Code Scanner. Semoga bisa membantu developer pemula yang ingin membuat suatu aplikasi android melalui Android Studio.

1. Buka Project Baru di Android Studio

Cara Membuat Aplikasi Android Qr Code Scanner
Cara Membuat Aplikasi Android Qr Code Scanner

Langkah pertama adalah buka project baru di Android Studio.
Aplication Name : Isi nama aplikasi kamu (Tulis saja QRCodeScanner)
Company Domain : Isi terserah (untuk latihan tidak perlu dipikirkan)
Project Location : Lokasi file project di komputer kamu

Jika kamu belum punya Android Studio, silakan download dulu melalui link atau tautan berikut ini.

2. Tambahkan Library Zxing di Gradle

Setelah itu, untuk membaca QRCode kalian perlu menambahkan Library Zxing di build.gradle project kamu. Setelah itu, klik sync now.

Berikut kodenya (Tambahkan di build.gradle):

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.1.1'
    testCompile 'junit:junit:4.12'

    // tambahkan baris kode berikut 
    compile 'com.journeyapps:zxing-android-embedded:3.4.0'
}

3. Buat UI (User Interface) Sederhana

Nah, setelah itu kamu membuat UI sederhana. Kali ini, kita buat UI sederhana saja. Yaitu hanya berisi Text untuk menampilkan Nama dan Tinggi serta button untuk mengarahkan menuju QR Code.

Cara Membuat Ui Qr Di Android Studio
Cara Membuat Ui QR Code Di Android Studio | medium.com

Berikut kodenya (Copas code ini di activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name" />

        <TextView
            android:id="@+id/textViewNama"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="nama disini"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tinggi" />

        <TextView
            android:id="@+id/textViewTinggi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="tinggi disini"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Large" />


    </LinearLayout>

    <Button
        android:id="@+id/buttonScan"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Scan QR Code" />

</RelativeLayout>

4. Definisikan View Object

Setelah itu, kalian harus mendefinisikan object yang sudah dibuat.

Berikut kodenya (copas di Java):

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
  // View Object
    private Button buttonScan;
    private TextView textViewNama, textViewTinggi;


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

        // initialize object
        buttonScan = (Button) findViewById(R.id.buttonScan);
        textViewNama = (TextView) findViewById(R.id.textViewNama);
        textViewTinggi = (TextView) findViewById(R.id.textViewTinggi);

    }

5. Tambahkan OnClickListener

Tambahkan OnClickListener dengan mengimplemntasikan View.OnClickListener.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
   
  // View Object
    private Button buttonScan;
    private TextView textViewNama, textViewTinggi;


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

        // initialize object
        buttonScan = (Button) findViewById(R.id.buttonScan);
        textViewNama = (TextView) findViewById(R.id.textViewNama);
        textViewTinggi = (TextView) findViewById(R.id.textViewTinggi);

        // attaching onclickListener
        buttonScan.setOnClickListener(this);
    }
   
   @Override
    public void onClick(View v) {
        // inisialisasi IntentIntegrator(scanQR)
        intentIntegrator = new IntentIntegrator(this);
        intentIntegrator.initiateScan();
    }

6. Tambahkan kode berikut

 public class MainActivity extends AppCompatActivity implements View.OnClickListener {     // View Object     private Button buttonScan;     private TextView textViewNama, textViewTinggi;     //qr code scanner object     private IntentIntegrator intentIntegrator;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         // initialize object         buttonScan = (Button) findViewById(R.id.buttonScan);         textViewNama = (TextView) findViewById(R.id.textViewNama);         textViewTinggi = (TextView) findViewById(R.id.textViewTinggi);         // attaching onclickListener         buttonScan.setOnClickListener(this);     }     // Mendapatkan hasil scan     @Override     protected void onActivityResult(int requestCode, int resultCode, Intent data) {         IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);         if (result != null){             if (result.getContents() == null){                 Toast.makeText(this, "Hasil tidak ditemukan", Toast.LENGTH_SHORT).show();             }else{                 // jika qrcode berisi data                 try{                     // converting the data json                     JSONObject object = new JSONObject(result.getContents());                     // atur nilai ke textviews                     textViewNama.setText(object.getString("nama"));                     textViewTinggi.setText(object.getString("tinggi"));                 }catch (JSONException e){                     e.printStackTrace();                     // jika format encoded tidak sesuai maka hasil                     // ditampilkan ke toast                     Toast.makeText(this, result.getContents(), Toast.LENGTH_SHORT).show();                 }             }         }else{             super.onActivityResult(requestCode, resultCode, data);         }     }     @Override     public void onClick(View v) {         // inisialisasi IntentIntegrator(scanQR)         intentIntegrator = new IntentIntegrator(this);         intentIntegrator.initiateScan();     } }

7. Buka Situs Generate Code

Untuk mengecek QRCode kamu berhasil apa tidak. Coba buka situs ini goqr.me. 

8. Run Aplikasi Kamu di Device (Smartphone Kamu)

Run aplikasi buatanmu di device kamu setalah itu scan QRCode tersebut.

Cara Membuat Qr Code Di Android Studio
Cara Membuat Qr Code Di Android Studio

9. Aplikasi Akan Menampilkan Hasilnya

Hasil Dari Tutorial Di Atas
Hasil Dari Tutorial Di Atas

Jika kamu berhasil, aplikasi kamu akan menampilkan hasil seperti ini.

Related Posts

1 of 129
Enable Notifications OK No thanks