Membuat aplikasi sederhana scanner dan generator barcode Part 2
8 min readNov 15, 2020
ditahap sebelumnya kita sudah selesai membuat layout dan melakukan desain pada layout yang ada, tahap selanjutnya atau part 2 ini kita fokus untuk membuat tampilan dari aplikasi scannerku, sekarang kita akan membuat logicnya agar aplikasinya dapat terpakai.
Pertama masuk ke build.gradle level app kemudian tambahkan dependency dari zxing, saat saya membuat dokumen ini versi zxing 4.1.0 dan corenya di versi 3.3.0
implementation('com.journeyapps:zxing-android-embedded:4.1.0') { transitive = false }
implementation 'com.google.zxing:core:3.3.0'
Jika sudah lakukan sinkronasi dengan cara mengklik pop-up line Sync Now pada pojok kanan atas editor dan tunggu sampai sinkronasi selesai
Kemudian masuk ke manifest dan tambahkan :
Masih di AndroidManifest.xml tambahklan juga permission untuk akses kamera karena scanner barcode yang kita buat butuh kamera untuk menangkap gambar barcode, tidak lupa fitur lainnya seperti berikut :
<uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
<uses-permission android:name="android.permission.CAMERA"/>
<uses-feature android:name="android.hardware.camera2"/>
Selanjutnya kita ke MainActivity.java untuk mengatur bottom navigation yang kita buat, untuk keseluruhan codenya seperti ini :
public class MainActivity extends AppCompatActivity {
private Boolean isBackPress;
BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
isBackPress = false;
bottomNavigationView = (BottomNavigationView)findViewById(R.id.bottomNavigationView);
bottomNavigationView.setOnNavigationItemSelectedListener(navListener);
getSupportFragmentManager().beginTransaction()
.replace(R.id.framelayout, new DashboardFragment()).commit();
}
private BottomNavigationView.OnNavigationItemSelectedListener navListener = new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
Fragment selected = null;
switch (item.getItemId()){
case R.id.dashboard:
selected = new DashboardFragment();
break;
case R.id.listScan:
selected = new ListScanned();
break;
case R.id.createBarcode:
selected = new CreateBarcodeorQR();
break;
}
getSupportFragmentManager().beginTransaction().replace(R.id.framelayout,
selected).commit();
return true;
}
};}
Bisa diperhatikan jika langsung di copy maka beberapa Class saat melakukan seleksi switch akan merah atau error, ini karena kita belum membuat class tersebut, buat saja ketiga class tersebut sesuai switch case yang ada :
a. DashboardFragment.java
b. ListScanned.java
c. CreateBarcodeQR.java
Jika sudah seharusnya class MainActivity.java tidak ada yang error. Tahap selanjutnya kita buat direktori database yang berisi DatabaseHelper.java dan DatabaseModel.java
DatabaseHelper.java ini berisikan eksekusi perintah untuk menyimpan data ke dalam database, membuat database table dan query yang diperlukan lainnya, sedangkan DatabaseModel merupakan model dari database yang kita buat, terdiri dari kolom kolom dalam table,
Untuk DatabaseHelper.java bisa copy code berikut :
public class DatabaseHelper extends SQLiteOpenHelper {
Context mContex;
//versi database
private static final int DATABASE_VERSION = 1;
//nama database
private static final String DATABASE_NAME = "dbbarcode";
public DatabaseHelper(@Nullable Context context) {
super(context, DATABASE_NAME, null, DATABASE_VERSION);
this.mContex = context;
}
//buat tabel database
@Override
public void onCreate(SQLiteDatabase sqLiteDatabase) {
sqLiteDatabase.execSQL(DatabaseModel.CREATE_TABLE);
}
//update database
@Override
public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) {
//jika dilakukan perubahan pada table lakukan drop table lama dulu baru tambahkan tabel baru
sqLiteDatabase.execSQL("DROP TABLE IF EXISTS " + DatabaseModel.TABLE_NAME);
//tambah tabel lagi setelah dilakukan perubahan(misal perubahan kolom dan lain lain)
onCreate(sqLiteDatabase);
}
//tambah data ke database
public void add(DatabaseModel databaseModel) {
SQLiteDatabase insert_database = getWritableDatabase();
insert_database.beginTransaction();
try {
ContentValues values = new ContentValues();
values.put(DatabaseModel.COLUMN_BARCODE, databaseModel.getBarcode());
values.put(DatabaseModel.COLUMN_TIMESTAMP, databaseModel.getTimestamp());
insert_database.insertOrThrow(DatabaseModel.TABLE_NAME, null, values);
insert_database.setTransactionSuccessful(); //perbedaanya dengan close
} catch (Exception e) {
e.printStackTrace();
} finally {
insert_database.endTransaction();
}
}
//get semua data
public List<DatabaseModel> getAllBarcode(){
List<DatabaseModel> databaseModels = new ArrayList<>();
String query = "SELECT * FROM " + DatabaseModel.TABLE_NAME;
SQLiteDatabase db = this.getWritableDatabase();
Cursor cursorread = db.rawQuery(query, null);
//looping ke tiap baris lalu masukkan ke dalam arraylist
if (cursorread.moveToFirst()){
do {
DatabaseModel databaseModel = new DatabaseModel();
databaseModel.setId_barcode(cursorread.getInt(cursorread.getColumnIndex(DatabaseModel.COLUMN_ID)));
databaseModel.setBarcode(cursorread.getString(cursorread.getColumnIndex(DatabaseModel.COLUMN_BARCODE)));
databaseModel.setTimestamp(cursorread.getString(cursorread.getColumnIndex(DatabaseModel.COLUMN_TIMESTAMP)));
databaseModels.add(databaseModel);
} while (cursorread.moveToNext());
}
//tutup koneksi
db.close();
return databaseModels;
}
//hapus data
public void delete (int id){
SQLiteDatabase db = this.getWritableDatabase();
db.delete(DatabaseModel.TABLE_NAME,
DatabaseModel.COLUMN_ID
+ " = " + "'" + id + "'", null);
db.close();
}
}untuk DatabaseModel.java bisa copy kode berikut :
public class DatabaseModel {
public static final String TABLE_NAME = "barcode";
public static final String COLUMN_ID = "id_barcode";
public static final String COLUMN_BARCODE = "barcode";
public static final String COLUMN_TIMESTAMP = "timestamp";
private int id_barcode;
private String barcode;
private String timestamp;
//Query untuk membuat tabel SQL
public static final String CREATE_TABLE = "CREATE TABLE " + TABLE_NAME
+ "("
+ COLUMN_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, "
+ COLUMN_BARCODE + " TEXT, "
+ COLUMN_TIMESTAMP + " DATETIME DEFAULT CURRENT_TIMESTAMP"
+ ")";
public DatabaseModel() {
}
public DatabaseModel(int id_barcode, String barcode, String timestamp) {
this.id_barcode = id_barcode;
this.barcode = barcode;
this.timestamp = timestamp;
}
public int getId_barcode() {
return id_barcode;
}
public void setId_barcode(int id_barcode) {
this.id_barcode = id_barcode;
}
public String getBarcode() {
return barcode;
}
public void setBarcode(String barcode) {
this.barcode = barcode;
}
public String getTimestamp() {
return timestamp;
}
public void setTimestamp(String timestamp) {
this.timestamp = timestamp;
}
}jika database sudah kita bisa mulai untuk merambah ke pembuatan scanner dengan memanfaatkan dependency zxing yang telah kita tambahkan sebelumnya, buka DashboardFragment.java dan tambahkan kode berikut :
public class DashboardFragment extends Fragment {
TextView outputScanQR;
Button btnScanQR;
ImageButton btnCopytoClipBoard;
LinearLayout outputLayout;
private String ScanValue;
public DashboardFragment() {
}
public DashboardFragment(String scanValue) {
ScanValue = scanValue;
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
outputScanQR = (TextView)view.findViewById(R.id.textViewOutputScanQR);
btnScanQR = (Button)view.findViewById(R.id.btnScanQR);
btnCopytoClipBoard = (ImageButton)view.findViewById(R.id.btnCopytoClipBoard);
outputLayout = (LinearLayout)view.findViewById(R.id.linearLayoutOutput);
btnScanQR.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
runQRScanner();
}
});
btnCopytoClipBoard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getActivity(), "Hasil Scan di Copy", Toast.LENGTH_SHORT).show();
copyToClipBoard();
}
});
}
@Override
public void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
IntentResult result = IntentIntegrator.parseActivityResult(requestCode, resultCode, data);
if (result != null){
if (result.getContents() == null){
Toast.makeText(getActivity(), "Scan dibatalkan", Toast.LENGTH_SHORT).show();
} else {
Date date = Calendar.getInstance().getTime();
SimpleDateFormat dateFormat = new SimpleDateFormat("dd-MM-yyyy", Locale.getDefault());
String currentTime = dateFormat.format(date);
outputLayout.setVisibility(View.VISIBLE);
outputScanQR.setText("Hasil Scan : " + result.getContents());
ScanValue = result.getContents();
Log.d("Date Time ", currentTime);
DatabaseHelper databaseHelper = new DatabaseHelper(getContext());
DatabaseModel databaseModel = new DatabaseModel();
databaseModel.setBarcode(ScanValue);
databaseModel.setTimestamp(currentTime);
databaseHelper.add(databaseModel);
}
} else {
Toast.makeText(getActivity(), "Terjadi Kesalahan saat melakukan Scanning", Toast.LENGTH_SHORT).show();
super.onActivityResult(requestCode, resultCode, data);
}
}
private void runQRScanner() {
// IntentIntegrator integrator = new IntentIntegrator(getActivity());
IntentIntegrator integrator = IntentIntegrator.forSupportFragment(DashboardFragment.this);
integrator.setPrompt("Scan QR Code or Barcode");
integrator.setCameraId(0);
integrator.setBeepEnabled(false);
integrator.setOrientationLocked(true);
integrator.setCaptureActivity(ScannerCapturePortraitActivity.class);
integrator.initiateScan();
}
private void copyToClipBoard() {
ClipboardManager clipboardManager = (ClipboardManager) getActivity().getSystemService(Context.CLIPBOARD_SERVICE);
ClipData clipData = ClipData.newPlainText("Hasil Scan di copy", ScanValue);
clipboardManager.setPrimaryClip(clipData);
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.dashboard, container, false);
}
}method yang penting adalah method runQRScanner() yang digunakan untuk melakukan scanning pada barcode, kemudian terdapat override method onActivityResult yang bertugas untuk mengcapture hasil scan tadi sehingga kita bisa mendapatkan datanya.
kemudian kita bisa lanjutkan dengan membuat direktori bernama adapter yang didalamnya berisi class RecyclerAdapter.java class RecyclerAdapter ini merupakan adapter dari list item yang nantinya akan berada didalam container ListScanned. Untuk class RecyclerAdapter bisa copy kode berikut ini :
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
ArrayList<DatabaseModel> dataBarcode;
Context mContext;
public RecyclerAdapter(ArrayList<DatabaseModel> dataBarcode, Context mContext) {
this.dataBarcode = dataBarcode;
this.mContext = mContext;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.adapter_list_barcode_scanned, parent, false);
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
DatabaseModel databaseModel = dataBarcode.get(position);
holder.textViewKodeBarcode.setText(databaseModel.getBarcode());
holder.textViewTimeStamp.setText(databaseModel.getTimestamp());
holder.imgBtnCopyToClipBoard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String code = databaseModel.getBarcode();
copyToClipBoard(code);
}
});
holder.imgBtndeleteBarcode.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int id = dataBarcode.get(position).getId_barcode();
popUpDelete(id);
}
});
}
private void popUpDelete(int id) {
Context context = new ContextThemeWrapper(mContext, R.style.AppTheme);
MaterialAlertDialogBuilder materialAlertDialogBuilder = new MaterialAlertDialogBuilder(context);
materialAlertDialogBuilder.setTitle("Hapus Barcode")
.setMessage("Apa anda yakin ingin menghapus barcode ini?")
.setNegativeButton("Batalkan", null)
.setPositiveButton("Ya!", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) {
deleteBarang(id);
}
})
.show();
}
private void deleteBarang(int id) {
DatabaseHelper databaseHelper = new DatabaseHelper(mContext);
databaseHelper.delete(id);
notifyDataSetChanged();
}
private void copyToClipBoard(String code) {
ClipboardManager clipboardManager = (ClipboardManager)mContext.getSystemService(Context.CLIPBOARD_SERVICE);
ClipData clipData = ClipData.newPlainText("Hasil Scan di copy", code);
clipboardManager.setPrimaryClip(clipData);
Toast.makeText(mContext, "Hasil Scan di copy", Toast.LENGTH_SHORT).show();
}
@Override
public int getItemCount() {
return dataBarcode.size();
}
public void countBarcode(ArrayList<DatabaseModel> countbarcodeData){
dataBarcode.clear();
dataBarcode.addAll(countbarcodeData);
notifyDataSetChanged();
}
public class ViewHolder extends RecyclerView.ViewHolder{
TextView textViewTimeStamp, textViewKodeBarcode;
ConstraintLayout itemLayout;
ImageButton imgBtnCopyToClipBoard, imgBtndeleteBarcode;
public ViewHolder(@NonNull View itemView) {
super(itemView);
textViewTimeStamp = (TextView)itemView.findViewById(R.id.textViewTimeStamp);
textViewKodeBarcode = (TextView)itemView.findViewById(R.id.textViewKodeBarcode);
itemLayout = (ConstraintLayout)itemView.findViewById(R.id.layoutItem);
imgBtndeleteBarcode = (ImageButton)itemView.findViewById(R.id.imgBtndeleteBarcode);
imgBtnCopyToClipBoard = (ImageButton)itemView.findViewById(R.id.imgBtnCopyToClipBoard);
}
}
}jika adapternya telah terbuat kita bisa lanjut untuk membuat containernya, masuk ke class ListScanned, disini kita akan menampilkan data kedalam adapter kemudian adapter ini akan ditampilkan dalam bentuk list. Untuk code program ListScanned.java bisa copy kode berikut :
public class ListScanned extends Fragment {
RecyclerAdapter recyclerAdapter;
RecyclerView recyclerView;
ArrayList<DatabaseModel> dataBarcode = new ArrayList<>();
TextView textviewDataEmpty;
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
recyclerView = (RecyclerView)view.findViewById(R.id.recyclerView);
textviewDataEmpty = (TextView)view.findViewById(R.id.textviewDataEmpty);
loadBarcode();
}
private void loadBarcode() {
DatabaseHelper databaseHelper = new DatabaseHelper(getContext());
dataBarcode.addAll(databaseHelper.getAllBarcode());
if (null == dataBarcode || dataBarcode.isEmpty()){
textviewDataEmpty.setVisibility(View.VISIBLE);
recyclerView.setVisibility(View.GONE);
} else {
textviewDataEmpty.setVisibility(View.GONE);
recyclerAdapter = new RecyclerAdapter(dataBarcode, getContext());
recyclerView.setAdapter(recyclerAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
}
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.activity_list_scanned, container, false);
}
}dan class terakhir merupakan class yang akan kita gunakan untuk membuat barcode ataupun QR code, sama sama kita akan memanfaatkan dependency dari zxing yang telah kita tambahkan, berikut kode dari class CreateBarcodeQR.java :
EditText getTexttoGenerate;
Button btnGenerate;
ImageView showGeneratedBarcode;
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
getTexttoGenerate = (EditText)view.findViewById(R.id.textViewGenerateCode);
btnGenerate = (Button)view.findViewById(R.id.btnGenerateCode);
showGeneratedBarcode = (ImageView)view.findViewById(R.id.imgViewBarcode);
btnGenerate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
generateBarcode();
}
});
}
private void generateBarcode() {
String getTextFromTexttoGenerate = getTexttoGenerate.getText().toString();
MultiFormatWriter multiFormatWriter = new MultiFormatWriter();
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
builder.setTitle("Pilih tipe barcode")
.setItems(R.array.barcode_menu, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
if (which == 0){
try {
BitMatrix bitMatrix = multiFormatWriter.encode(getTextFromTexttoGenerate, BarcodeFormat.CODE_128,300, 80);
BarcodeEncoder barcodeEncoder = new BarcodeEncoder();
Bitmap bitmap = barcodeEncoder.createBitmap(bitMatrix);
Toast.makeText(getActivity(), "Barcode berhasil digenerate", Toast.LENGTH_SHORT).show();
showGeneratedBarcode.setImageBitmap(bitmap);
} catch (WriterException e){
e.printStackTrace();
}
} else if (which == 1){
try {
BitMatrix bitMatrix = multiFormatWriter.encode(getTextFromTexttoGenerate, BarcodeFormat.QR_CODE,200, 200);
BarcodeEncoder barcodeEncoder = new BarcodeEncoder();
Bitmap bitmap = barcodeEncoder.createBitmap(bitMatrix);
Toast.makeText(getActivity(), "QR Code berhasil digenerate", Toast.LENGTH_SHORT).show();
showGeneratedBarcode.setImageBitmap(bitmap);
} catch (WriterException e){
e.printStackTrace();
}
}
}
});
AlertDialog dialog = builder.create();
dialog.show();
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.activity_create_code, container, false);
}
}yang perlu kita perhatikan adalah method generateBarcode, disana saya membuat pilihan saat degenerate nanti akan dibuat menjadi barcode atau QR code, pada kode setItems() kalian bisa isikan array, atau dalam kasus saya, saya membuat file array tersebut dengan nama barcode_menu yang saya simpan di direktori res -> item_barcode.xml dengan isi seperti berikut :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="barcode_menu">
<item>Codabar</item>
<item>QR Code</item>
</string-array>
</resources>Selanjutnya aka nada seleksi, nilai dari which ini merupakan index dari array, 0 merupakan Codabar dan 1 merupakan QR Code seperti yang ada pada item_barcode.xml.
berikut hasil dari aplikasi ScannerKu :
Sekian untuk membuat aplikasi sederhana Scanner barcode dan QR code. Terima kasih 😊
