Membuat aplikasi sederhana scanner dan generator barcode Part 1
Pembuatan aplikasi sederhana barcode scanner dan generator ini dibagi menjadi 2 tahap, tahap pertama adalah pembuatan desain dan layout dari aplikasi bernama ScannerKu ini dengan tujuan untuk memperindah tampilan karena aplikasi ini cukup sederhana, jika kalian ingin membuat tampilan yang sederhana silahkan hehe 😊, dan tahap kedua dikhususkan untuk kode program yang berhubungan dalam melakukan Scanning maupun generate barcode.
Pertama kita buat project android seperti biasa, saya mulai dengan membuat projek baru di android studio, kemudian pilih empty activity dan klik Next seperti gambar dibawah :
Masukkan name pada kalom name, name ini digunakan sebagai nama project, jika sudah klik Finish.
Kita akan membuat aplikasi ScannerKu ini dengan 3 halaman, halaman pertama adalah halaman scanner, yang berisikan tombol Scan
Halaman kedua merupakan daftar barcode yang kita scan, nantinya data ini akan kita simpan dalam Sqlite
Halaman ketiga merupakan halaman untuk melakukan generate QR Code maupun barcode
Ketiga halaman ini kita akan buat diatas Bottom Navigation,
Hal pertama yang akan kita lakukan adalah menambahkan dependency android material, karena jika kita tidak menambahkannya kita tidak akan mendapat Bottom Navigation. Untuk menambahkannya kita bisa masuk ke build.gradle level app kemudian tambahkan kode berikut :
implementation 'com.google.android.material:material:1.3.0-alpha02'pada saya membuat tulisan ini saya menggunakan versi 1.3.0-alpha02, pastikan kalian menggunakan versi terbarunya.
Masih di build gradle tambahkan kode berikut :
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}jika sudah kita bisa mulai mendesain tampilannya terlebih dahulu. 1. Buat direktori baru pada direktori res dengan nama menu dan tambahkan menu resource file dengan nama bottom_nav atau terserah kalian hehe 😊. seperti berikut :
Didalam file bottom_nav.xml tambahkan item menu seperti berikut :
<item
android:id="@+id/dashboard"
android:icon="@drawable/ic_baseline_dashboard_24"
android:title="Dashboard"></item>
<item
android:id="@+id/listScan"
android:title="Recent Scan"
android:icon="@drawable/ic_baseline_format_list_bulleted_24"></item>
<item
android:id="@+id/createBarcode"
android:title="Create Barcode"
android:icon="@drawable/ic_baseline_post_add_24"></item>Item menu itu nantinya akan mewakili menu menu yang ada di bottom navigation. Jika sudah kita bisa masuk ke activity_main.xml dan tambahkan kode berikut :
<FrameLayout
android:id="@+id/framelayout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorWhite"
app:menu="@menu/bottom_nav"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />File activity_main.xml terdiri dari Frame Layout yang berfungsi sebagai container dari layer yang akan kita taruh diatasnya, dan Bottom Navigation yang digunakan sebagai menu untuk berpindah antara halaman. Untuk hasil sementaranya akan terlihat seperti berikut :
Lalu kita bisa buat 4 layout baru. 3 sebagai container dari setiap menu dan 1 layout ini kita gunakan sebagai adapter untuk list dari barcode yang akan kita scan. Keeampat layout itu saya beri nama :
a. Activity_create_code -> nantinya layout ini untuk layout halaman generate barcode
b. Activity_list_scanned -> layout ini container untuk recycler view dari daftar barcode yang kita scan
c. Adapter_list_barcode_scanned -> merupakan bagian body atau isi dari layout recycler view nantinya
d. Dashboard -> layout utama tempat kita melakukan scanning barcode
Kita mulai dari membuat halaman dashboard :
a. Kita membutuhkan gambar barcode kalian bis acari digoogle, kegunaannya untuk mempercantik tampilan saja sih, bukan untuk fungsional jadi ini opsional
b. Kemudian kita buat background agar tampilan lebih kekinian, expand direktori res kemudian klik kanan pada drawable dan pilih new -> Layout Resource File. Saya membuat dengan nama default_background_card, isi dari default_background_card.xml seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorBackgroundDark"></solid>
<corners android:radius="20dp"></corners>
</shape>
</item>
</layer-list>Dan previewnya seperti pada kotak merah dibawah ini :
Kemudian kita buat satu lagi resource file untuk tombol biar tidak default, dengan cara yang sama dan copykan kode dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@color/colorBackgroundSplashScreen"></solid>
<corners android:radius="50dp"></corners>
<stroke android:width="2dp" android:color="@color/colorWhite"></stroke>
</shape>
</item>
</layer-list>Dan previewnya seperti gambar dibawah ini :
Jika resource atau bahan untuk membuat layout halaman dashboard sudah siap, kita bisa langsung mulai, copy saja code di bawah ini untuk halaman dashboard :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/colorBackgroundSplashScreen"
>
<TextView
android:id="@+id/textViewTitleBarcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QR Code and Barcode Scanner"
android:textColor="@color/colorWhite"
android:textSize="20dp"
android:layout_marginTop="32dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/default_background_card"
android:gravity="center"
android:layout_marginTop="50dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/textViewTitleBarcode"
>
<TextView
android:id="@+id/textViewTitleQR"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tekan Tombol Scan dan Arahkan Kamera ke Barcode ataupun QR Code"
android:textAllCaps="false"
android:layout_marginRight="18dp"
android:layout_marginLeft="18dp"
android:textSize="18dp"
android:textColor="@color/colorBlack"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:gravity="center_horizontal"/>
<LinearLayout
android:visibility="gone"
android:id="@+id/linearLayoutOutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="12dp"
android:orientation="horizontal"
android:layout_below="@+id/textViewTitleQR">
<TextView
android:id="@+id/textViewOutputScanQR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="12dp"
android:text="Berikut Kode QR"
android:textColor="@color/colorGrey"
android:textSize="18dp"/>
<ImageButton
android:id="@+id/btnCopytoClipBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="@android:color/transparent"
android:src="@drawable/ic_baseline_file_copy_24" />
</LinearLayout>
<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/qrcode"
android:layout_marginBottom="20dp"
android:layout_below="@+id/linearLayoutOutput"/>
</RelativeLayout>
<Button
android:id="@+id/btnScanQR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/default_background_button2"
android:text="Scan"
android:textSize="20dp"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:textColor="@color/colorWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="50dp"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Jika terjadi error atau merah pada bagian warna kalian bisa tambahkan kode berikut untuk warna biru yang saya gunakan : #5683f6
Layout halaman dashboard sudah selesai seperti gambar dibawah ini :
Selanjutnya kita bisa lanjut ke layout activity list scanned, kita hanya menambahkan recycler view saja yang nantinya sebagai container dari list list yang ada, berikut kode dari activity_list_scanned.xml :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textviewDataEmpty"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Belum ada data"
android:textColor="@color/colorPrimaryDark"
android:textSize="22dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Berikut previewnya :
Jika layout activity_list_scanned sudah kita bisa membuat desain tiap list yang nantinya akan ditampung oleh recycler view diatas. Buka adapter_list_barcode_scanned.xml dan tambahkan kode berikut :
1. <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layoutItem"
>
<androidx.cardview.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_margin="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="@+id/judul_kode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:textSize="18dp"
android:text="Nomor barcode : "
android:textColor="@color/colorPrimaryDark"
app:layout_constraintStart_toStartOf="@+id/cardView"
app:layout_constraintTop_toTopOf="@+id/cardView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="34dp"
android:layout_marginLeft="8dp"
android:text="Barcode :"
android:textSize="16dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="58dp"
android:layout_marginLeft="8dp"
android:text="Tanggal Scan :"
android:textSize="16dp" />
<TextView
android:id="@+id/textViewTimeStamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="58dp"
android:layout_marginLeft="128dp"
android:text="00000000"
android:textSize="16dp" />
<TextView
android:id="@+id/textViewKodeBarcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="34dp"
android:layout_marginLeft="128dp"
android:text="0000000000"
android:textSize="16dp" />
<TextView
android:id="@+id/textViewKodeBarang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="150dp"
android:text="0001"
android:textColor="@color/colorPrimary"
android:textSize="18dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageButton
android:id="@+id/imgBtnCopyToClipBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_baseline_file_copy_24"
android:background="@null"
android:adjustViewBounds="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="16dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="12dp"/>
<ImageButton
android:id="@+id/imgBtndeleteBarcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imgBtnCopyToClipBoard"
android:layout_alignParentRight="true"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:adjustViewBounds="true"
android:background="@null"
android:src="@drawable/ic_baseline_delete_outline_24" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>Perlu diperhatikan terdapat icon copy dan icon delete di dalam list yang kita buat, kita bisa menambahkan dengan cara klik kanan pada drawable -> new -> Vector Asset dan cari vector gambar copy dan delete. Preview hasil listnya seperti berikut :
Dan layout atau halaman terakhir yaitu halaman untuk membuat QR Code atau barcode, masuk ke activity_create_code.xml, dan copy kode dibawah ini :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:background="@color/colorBackgroundSplashScreen"
>
<TextView
android:id="@+id/textViewTitleBarcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QR Code Maker"
android:textColor="@color/colorWhite"
android:textSize="20dp"
android:layout_marginTop="32dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@drawable/default_background_card_white"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="100dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="0dp"
android:layout_marginTop="22dp"
android:layout_marginEnd="0dp"
android:gravity="center"
android:layout_centerHorizontal="true"
android:text="Generate QR Code"
android:textColor="#000"
android:textSize="20dp" />
<EditText
android:id="@+id/textViewGenerateCode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="12dp"
android:layout_marginLeft="12dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="12dp"
android:background="@drawable/default_background_button"
android:hint="Masukkan Text disini"
android:padding="12dp"
android:textSize="18dp" />
<ImageView
android:id="@+id/imgViewBarcode"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="@drawable/qrcode"
android:layout_marginBottom="20dp"
android:layout_below="@+id/linearLayoutOutput"/>
</RelativeLayout>
<Button
android:id="@+id/btnGenerateCode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/default_background_button2"
android:text="Generate"
android:textAllCaps="false"
android:textColor="@color/colorWhite"
android:textSize="20dp"
android:padding="12dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginBottom="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Create QR CODE"
android:textSize="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Kode diatas kurang lebih mirip dengan kode yang ada pada halaman dashboard.xml, namun perlu diingat Kembali untuk mengecak jika ada code yang merah atau tidak memilki resource. Preview dari halaman yang kita buat seperti ini :
Selanjutnya kita bisa Kembali ke tahap coding untuk membuat scanner QR Codenya. sampai disini dulu untuk tahap 1. Terima kasih 😊
