Tutorial Membuat Aplikasi Tanda Tangan dengan Android Studio

Aplikasi Tanda Tangan Digital dengan Android Studio

Halo sobat 48😁 kalau kemarin saya membagikan sebuah Tutorial Membuat Aplikasi Scan Barcode dan QR Code dengan Android Studio, kali ini saya akan membahas Tutorial Membuat Aplikasi Tanda Tangan dengan Android Studio. Mungkin dari kalian sudah ada beberapa yang tahu tutorial ini, namun bagi kalian yang belum tahu dan sangat butuh tutorial ini silahkan lanjut dibaca ya artikel ini😄

Jika kalian ingin SOURCE CODE Aplikasi Tanda Tangan ini, silahkan download di Github saya DISINI. Tetapi jika kalian ingin tahu cara mengaplikasikannya, silahkan tonton video tutorial yang sudah saya buatkan :

Oke langsung saja tanpa basa-basi lagi kita langsung ke langkah pertama :

1. Buat project baru di Android Studio dengan cara klik File ⇒ Project Baru. Ketika diminta untuk memilih Default Activity, pilih Empty Activity dan klik next. Untuk minSDK, disini saya set API 15 ya.

2. Buka build.gradle dan ubah menjadi seperti ini :

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.13'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    implementation 'com.google.android.material:material:1.2.1'

    implementation 'com.github.gcacace:signature-pad:1.3.1'

}

3. Buka AndroidManifest.xml dan ubah menjadi seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.azhar.tandatangan">

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
        android:requestLegacyExternalStorage="true"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:targetApi="q">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4. Ubah isi MainActivity.java dan activity_main.xml menjadi seperti ini :

package com.azhar.tandatangan

import android.Manifest
import android.content.Intent
import android.content.pm.PackageManager
import android.graphics.Bitmap
import android.graphics.Canvas
import android.graphics.Color
import android.net.Uri
import android.os.Bundle
import android.os.Environment
import android.util.Log
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityCompat
import com.github.gcacace.signaturepad.views.SignaturePad
import kotlinx.android.synthetic.main.activity_main.*
import java.io.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //set permission
        verifyStoragePermissions(this);

        //draw signature
        signaturePad.setOnSignedListener(object : SignaturePad.OnSignedListener {
            override fun onStartSigning() {
                //Toast.makeText(this@MainActivity, "Mulai menulis...", Toast.LENGTH_SHORT).show()
            }

            override fun onSigned() {
                btnSave.setEnabled(true)
                btnClear.setEnabled(true)
            }

            override fun onClear() {
                btnSave.setEnabled(false)
                btnClear.setEnabled(false)
            }
        })

        //clear signature
        btnClear.setOnClickListener {
            signaturePad.clear()
        }

        //save signature
        btnSave.setOnClickListener {
            val signatureBitmap = signaturePad.getSignatureBitmap()
            if (addJpgSignatureToGallery(signatureBitmap)) {
                Toast.makeText(this@MainActivity, "Tanda tangan disimpan ke dalam Galeri",
                        Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this@MainActivity, "Tidak dapat menyimpan Tanda Tangan",
                        Toast.LENGTH_SHORT).show()
            }
            if (addSvgSignatureToGallery(signaturePad.getSignatureSvg())) {
                Toast.makeText(this@MainActivity, "Tanda tangan SVG disimpan ke dalam Galeri",
                        Toast.LENGTH_SHORT).show()
            } else {
                Toast.makeText(this@MainActivity, "Tidak dapat menyimpan Tanda Tangan SVG",
                        Toast.LENGTH_SHORT).show()
            }
        }

    }

    override fun onRequestPermissionsResult(requestCode: Int, permissions: Array, grantResults: IntArray) {
        if (requestCode == REQUEST_EXTERNAL_STORAGE) {
            if (grantResults.size <= 0 || grantResults[0] != PackageManager.PERMISSION_GRANTED) {
                Toast.makeText(this@MainActivity, "Tidak dapat menulis gambar ke Media Penyimpanan",
                        Toast.LENGTH_SHORT).show()
            }
        }
    }

    fun getAlbumStorageDir(albumName: String?): File {
        val file = File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), albumName)
        if (!file.mkdirs()) {
            Log.e("SignaturePad", "Directory not created")
        }
        return file
    }

    //Image Signature
    @Throws(IOException::class)
    fun saveBitmapToJPG(bitmap: Bitmap, photo: File?) {
        val newBitmap = Bitmap.createBitmap(bitmap.width, bitmap.height, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(newBitmap)
        canvas.drawColor(Color.WHITE)
        canvas.drawBitmap(bitmap, 0f, 0f, null)
        val stream: OutputStream = FileOutputStream(photo)
        newBitmap.compress(Bitmap.CompressFormat.JPEG, 80, stream)
        stream.close()
    }

    fun addJpgSignatureToGallery(signature: Bitmap): Boolean {
        var result = false
        try {
            val photo = File(getAlbumStorageDir("SignaturePad"), String.format("Signature_%d.jpg",
                    System.currentTimeMillis()))
            saveBitmapToJPG(signature, photo)
            scanMediaFile(photo)
            result = true
        } catch (e: IOException) {
            e.printStackTrace()
        }
        return result
    }

    private fun scanMediaFile(photo: File) {
        val mediaScanIntent = Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE)
        val contentUri = Uri.fromFile(photo)
        mediaScanIntent.data = contentUri
        this@MainActivity.sendBroadcast(mediaScanIntent)
    }

    //SVG Signature
    fun addSvgSignatureToGallery(signatureSvg: String?): Boolean {
        var result = false
        try {
            val svgFile = File(getAlbumStorageDir("SignaturePad"), String.format("Signature_%d.svg",
                    System.currentTimeMillis()))
            val stream: OutputStream = FileOutputStream(svgFile)
            val writer = OutputStreamWriter(stream)
            writer.write(signatureSvg)
            writer.close()
            stream.flush()
            stream.close()
            scanMediaFile(svgFile)
            result = true
        } catch (e: IOException) {
            e.printStackTrace()
        }
        return result
    }

    companion object {
        private const val REQUEST_EXTERNAL_STORAGE = 1
        private val PERMISSIONS_STORAGE = arrayOf(Manifest.permission.WRITE_EXTERNAL_STORAGE)
        fun verifyStoragePermissions(activity: MainActivity?) {
            val permission = ActivityCompat.checkSelfPermission(activity!!, Manifest.permission.WRITE_EXTERNAL_STORAGE)
            if (permission != PackageManager.PERMISSION_GRANTED) {
                ActivityCompat.requestPermissions(activity, PERMISSIONS_STORAGE, REQUEST_EXTERNAL_STORAGE)
            }
        }
    }

}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Tanda Tangan Digital"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

    </androidx.appcompat.widget.Toolbar>

    <LinearLayout
        android:id="@+id/linearMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="Sentuh dan gerakan jari Anda pada Area dibawah ini untuk membuat Tanda Tangan Digital."
            android:textColor="@android:color/white"
            android:textSize="16sp"
            android:textStyle="italic" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/signatureContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linearButton"
        android:layout_below="@id/linearMessage">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_above="@+id/signatureDescription"
            android:layout_marginBottom="8dp"
            android:background="@color/colorPrimary" />

        <TextView
            android:id="@+id/signatureDescription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="16dp"
            android:text="*Saya Setuju dengan Syarat dan Ketentuan"
            android:textColor="@android:color/black" />

        <com.github.gcacace.signaturepad.views.SignaturePad
            android:id="@+id/signaturePad"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:penColor="@android:color/black" />

    </RelativeLayout>

    <LinearLayout
        android:id="@+id/linearButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnClear"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:drawableStart="@drawable/ic_delete"
            android:enabled="false"
            android:paddingStart="30dp"
            android:paddingEnd="30dp"
            android:text="Clear"
            android:textColor="@android:color/white" />

        <Button
            android:id="@+id/btnSave"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:background="@drawable/button_background"
            android:drawableStart="@drawable/ic_save"
            android:enabled="false"
            android:paddingStart="30dp"
            android:paddingEnd="30dp"
            android:text="Save"
            android:textColor="@android:color/white" />

    </LinearLayout>

</RelativeLayout>

Kalau kalian mengikuti langkah-langkah diatas dengan baik, pasti aplikasi yang kalian buat akan berjalan sebagaimana mestinya. Namun jika mengalami Error, silahkan berikan komentar dan kita diskusikan bersama.

Demikian informasi yang saya bagikan untuk kalian. Jangan lupa bagikan artikel ini ke teman-teman kalian agar ikut membaca Tutorial Membuat Aplikasi Tanda Tangan dengan Android Studio ini. Subscribe juga blog Rivaldi 48 ini agar kalian mendapatkan notifikasi saat Admin update artikel terbaru. Follow Instagram Admin @azhardvls_. Semoga kalian lebih nyaman dan mudah dalam mengakses Blog Rivaldi 48 dimanapun kalian berada. Terima Kasih...