Halo semuanya, pada postingan ini saya akan membagikan tutorial sederhana untuk kalian yang baru belajar membuat aplikasi android menggunakan android studio.
Tutorial kali ini kita akan membuat aplikasi QR Code Generator dengan menggunakan library QRGen.
Project QrCodeGenerator
- Hal pertama yang harus kita lakukan tentu membuat project baru di android studio. Pada tutorial ini saya memberikan nama projeknya “QrCodeGenerator”.
Menambahkan permission di Manifest
- Tambahkan permission di AndroidManifest.xml agar aplikasi kita bisa mengakses penyimpanan. Permission ini digunakan untuk menyimpan gambar QR Code ketika akan di bagikan.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> |
by Menambahkan dependencies di Gradle
- Implementasi library QRGen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // qr code generator | |
| implementation 'com.github.kenglxn.QRGen:android:2.6.0' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| allprojects { | |
| repositories { | |
| google() | |
| mavenCentral() | |
| maven { url "https://jitpack.io" } | |
| } | |
| } |
Desain user interface
- Buka activity_main.xml, lalu ubah kodenya seperti berikut.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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" | |
| tools:context=".MainActivity"> | |
| <TextView | |
| android:id="@+id/tv_text" | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| android:layout_margin="16dp" | |
| android:text="Enter Text" | |
| android:textSize="24sp" | |
| android:textStyle="bold" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toTopOf="parent" | |
| app:layout_constraintVertical_bias="0.3" /> | |
| <EditText | |
| android:id="@+id/et_text" | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| android:layout_margin="16dp" | |
| android:hint="Text" | |
| android:inputType="textMultiLine" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toBottomOf="@+id/tv_text" | |
| app:layout_constraintVertical_bias="0.0" /> | |
| <Button | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| android:layout_margin="16dp" | |
| android:text="Generate" | |
| app:layout_constraintBottom_toBottomOf="parent" | |
| app:layout_constraintEnd_toEndOf="parent" | |
| app:layout_constraintStart_toStartOf="parent" | |
| app:layout_constraintTop_toBottomOf="@+id/et_text" | |
| app:layout_constraintVertical_bias="0.24000001" | |
| android:onClick="clickGenerate"/> | |
| </androidx.constraintlayout.widget.ConstraintLayout> |
- Buat dialog_qrcode.xml untuk menampilkan QR Code dalam bentuk dialog.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8"?> | |
| <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| android:layout_gravity="center" | |
| android:gravity="center"> | |
| <RelativeLayout | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| android:layout_margin="16dp"> | |
| <RelativeLayout | |
| android:id="@+id/rl_qrcode" | |
| android:layout_width="200dp" | |
| android:layout_height="200dp" | |
| android:layout_gravity="top"> | |
| <ImageView | |
| android:id="@+id/iv_qrcode" | |
| android:visibility="gone" | |
| android:layout_width="match_parent" | |
| android:layout_height="match_parent" | |
| android:src="@mipmap/ic_launcher" /> | |
| <ProgressBar | |
| android:id="@+id/pb_qrcode" | |
| android:layout_centerInParent="true" | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content"/> | |
| </RelativeLayout> | |
| </RelativeLayout> | |
| </LinearLayout> |
Cek permission
- Cek apakah user sudah mengizinkan permission
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private fun checkPermission(){ | |
| if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { | |
| if (checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE) == PackageManager.PERMISSION_DENIED) { | |
| requestPermissions( | |
| arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE), | |
| WRITE_EXTERNAL_STORAGE_PERMISSION_CODE | |
| ) | |
| } | |
| } | |
| } | |
| override fun onRequestPermissionsResult( | |
| requestCode: Int, | |
| permissions: Array<out String>, | |
| grantResults: IntArray | |
| ) { | |
| super.onRequestPermissionsResult(requestCode, permissions, grantResults) | |
| when (requestCode) { | |
| WRITE_EXTERNAL_STORAGE_PERMISSION_CODE -> if (grantResults.isNotEmpty()) { | |
| if (grantResults[0] == PackageManager.PERMISSION_DENIED) { | |
| Toast.makeText(this, "Anda perlu memberikan semua izin untuk menggunakan aplikasi ini.", Toast.LENGTH_SHORT).show() | |
| finish() | |
| } | |
| } | |
| } | |
| } |
Generate QR Code
- Kode untuk generate QR Code menggunakan library QRGen
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| fun clickGenerate(view: View) { | |
| val myText = etText.text.toString().trim() | |
| if (myText.isEmpty() || myText == ""){ | |
| etText.error = "Bidang ini tidak boleh kosong" | |
| etText.requestFocus() | |
| } else { | |
| buildQrCode(myText) | |
| } | |
| } | |
| private fun buildQrCode(content: String){ | |
| var bm: Bitmap? = null | |
| val builder = AlertDialog.Builder(this) | |
| val factory = LayoutInflater.from(this) | |
| val myView = factory.inflate(R.layout.dialog_qr_code, null) | |
| val ivQrcode = myView.findViewById<ImageView>(R.id.iv_qrcode) | |
| val pbQrcode = myView.findViewById<ProgressBar>(R.id.pb_qrcode) | |
| builder.setView(myView) | |
| builder.setIcon(R.drawable.ic_qr_code) | |
| builder.setTitle("QR Code") | |
| builder.setNegativeButton("Close"){ dialog, _ -> | |
| dialog.dismiss() | |
| } | |
| builder.setPositiveButton("Share"){ _, _ -> | |
| if (bm != null){ | |
| share(bm!!, "QR Code") | |
| } | |
| } | |
| builder.show().withCenteredButtons() | |
| try { | |
| bm = QRCode.from(content).bitmap() | |
| if (bm != null) { | |
| ivQrcode.visibility = View.VISIBLE | |
| pbQrcode.visibility = View.GONE | |
| ivQrcode.setImageBitmap(bm) | |
| } | |
| } | |
| catch (e: WriterException) {} | |
| } | |
| private fun AlertDialog.withCenteredButtons() { | |
| val positive = getButton(AlertDialog.BUTTON_POSITIVE) | |
| val negative = getButton(AlertDialog.BUTTON_NEGATIVE) | |
| //Disable the material spacer view in case there is one | |
| val parent = positive.parent as? LinearLayout | |
| parent?.gravity = Gravity.CENTER_HORIZONTAL | |
| val leftSpacer = parent?.getChildAt(1) | |
| leftSpacer?.visibility = View.GONE | |
| //Force the default buttons to center | |
| val layoutParams = LinearLayout.LayoutParams( | |
| LinearLayout.LayoutParams.MATCH_PARENT, | |
| LinearLayout.LayoutParams.WRAP_CONTENT | |
| ) | |
| layoutParams.weight = 1f | |
| layoutParams.gravity = Gravity.CENTER | |
| positive.layoutParams = layoutParams | |
| negative.layoutParams = layoutParams | |
| } |
Bagikan QR Code
- Kode untuk membagikan QR Code melalui beberapa aplikasi seperti whatsapp, bluetooth, dsb.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private fun share(source: Bitmap, title: String){ | |
| val bitmapPath = MediaStore.Images.Media.insertImage(contentResolver, source, title, null) | |
| Log.e("BITMAP PATH", bitmapPath) | |
| val bitmapUri: Uri = Uri.parse(bitmapPath) | |
| val intent = Intent(Intent.ACTION_SEND) | |
| intent.type = "image/png" | |
| intent.putExtra(Intent.EXTRA_STREAM, bitmapUri) | |
| startActivity(Intent.createChooser(intent, "Bagikan QR Code melalui")) | |
| } |
Kode lengkap MainActivity.kt
- Berikut kode lengkap MainActivity.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.tubianto.qrcodegenerator | |
| import android.Manifest | |
| import android.app.AlertDialog | |
| import android.content.Intent | |
| import android.content.pm.PackageManager | |
| import android.graphics.Bitmap | |
| import android.net.Uri | |
| import android.os.Build | |
| import android.os.Bundle | |
| import android.provider.MediaStore | |
| import android.util.Log | |
| import android.view.Gravity | |
| import android.view.LayoutInflater | |
| import android.view.View | |
| import android.widget.* | |
| import androidx.appcompat.app.AppCompatActivity | |
| import com.google.zxing.WriterException | |
| import net.glxn.qrgen.android.QRCode | |
| /** | |
| * Created by Tubianto on 15/06/2021. | |
| */ | |
| class MainActivity : AppCompatActivity() { | |
| private var WRITE_EXTERNAL_STORAGE_PERMISSION_CODE: Int = 1 | |
| private lateinit var etText: EditText | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContentView(R.layout.activity_main) | |
| init() | |
| checkPermission() | |
| } | |
| private fun init(){ | |
| etText = findViewById(R.id.et_text) | |
| } | |
| private fun checkPermission(){ | |
| if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { | |
| if (checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE) == PackageManager.PERMISSION_DENIED) { | |
| requestPermissions( | |
| arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE), | |
| WRITE_EXTERNAL_STORAGE_PERMISSION_CODE | |
| ) | |
| } | |
| } | |
| } | |
| override fun onRequestPermissionsResult( | |
| requestCode: Int, | |
| permissions: Array<out String>, | |
| grantResults: IntArray | |
| ) { | |
| super.onRequestPermissionsResult(requestCode, permissions, grantResults) | |
| when (requestCode) { | |
| WRITE_EXTERNAL_STORAGE_PERMISSION_CODE -> if (grantResults.isNotEmpty()) { | |
| if (grantResults[0] == PackageManager.PERMISSION_DENIED) { | |
| Toast.makeText(this, "Anda perlu memberikan semua izin untuk menggunakan aplikasi ini.", Toast.LENGTH_SHORT).show() | |
| finish() | |
| } | |
| } | |
| } | |
| } | |
| fun clickGenerate(view: View) { | |
| val myText = etText.text.toString().trim() | |
| if (myText.isEmpty() || myText == ""){ | |
| etText.error = "Bidang ini tidak boleh kosong" | |
| etText.requestFocus() | |
| } else { | |
| buildQrCode(myText) | |
| } | |
| } | |
| private fun buildQrCode(content: String){ | |
| var bm: Bitmap? = null | |
| val builder = AlertDialog.Builder(this) | |
| val factory = LayoutInflater.from(this) | |
| val myView = factory.inflate(R.layout.dialog_qr_code, null) | |
| val ivQrcode = myView.findViewById<ImageView>(R.id.iv_qrcode) | |
| val pbQrcode = myView.findViewById<ProgressBar>(R.id.pb_qrcode) | |
| builder.setView(myView) | |
| builder.setIcon(R.drawable.ic_qr_code) | |
| builder.setTitle("QR Code") | |
| builder.setNegativeButton("Close"){ dialog, _ -> | |
| dialog.dismiss() | |
| } | |
| builder.setPositiveButton("Share"){ _, _ -> | |
| if (bm != null){ | |
| share(bm!!, "QR Code") | |
| } | |
| } | |
| builder.show().withCenteredButtons() | |
| try { | |
| bm = QRCode.from(content).bitmap() | |
| if (bm != null) { | |
| ivQrcode.visibility = View.VISIBLE | |
| pbQrcode.visibility = View.GONE | |
| ivQrcode.setImageBitmap(bm) | |
| } | |
| } | |
| catch (e: WriterException) {} | |
| } | |
| private fun AlertDialog.withCenteredButtons() { | |
| val positive = getButton(AlertDialog.BUTTON_POSITIVE) | |
| val negative = getButton(AlertDialog.BUTTON_NEGATIVE) | |
| //Disable the material spacer view in case there is one | |
| val parent = positive.parent as? LinearLayout | |
| parent?.gravity = Gravity.CENTER_HORIZONTAL | |
| val leftSpacer = parent?.getChildAt(1) | |
| leftSpacer?.visibility = View.GONE | |
| //Force the default buttons to center | |
| val layoutParams = LinearLayout.LayoutParams( | |
| LinearLayout.LayoutParams.MATCH_PARENT, | |
| LinearLayout.LayoutParams.WRAP_CONTENT | |
| ) | |
| layoutParams.weight = 1f | |
| layoutParams.gravity = Gravity.CENTER | |
| positive.layoutParams = layoutParams | |
| negative.layoutParams = layoutParams | |
| } | |
| private fun share(source: Bitmap, title: String){ | |
| val bitmapPath = MediaStore.Images.Media.insertImage(contentResolver, source, title, null) | |
| Log.e("BITMAP PATH", bitmapPath) | |
| val bitmapUri: Uri = Uri.parse(bitmapPath) | |
| val intent = Intent(Intent.ACTION_SEND) | |
| intent.type = "image/png" | |
| intent.putExtra(Intent.EXTRA_STREAM, bitmapUri) | |
| startActivity(Intent.createChooser(intent, "Bagikan QR Code melalui")) | |
| } | |
| } |
Screenshot
Download kode lengkapnya disini
Terima kasih
