How to implement document scanning functionality in Android?

Introduction

In many android applications we can get to see that document scanner functionality is present in it in which the application takes the photo of the document and crops the image of that document from all sides based on the requirement and displays that document in the form of image. We can also add filters to that image such as black and white and others. In this article we will take a look on How to implement document scanning functionality in Android ?

Implementation

We will be creating a simple application in which we will be displaying a text view in which we will be displaying the heading of our application. After that we will be creating an image view in which we will be displaying the image view which is being cropped after we have scanned a document. We will be displaying a document scanner on the app launch. This scanner will scan the document and will be able to crop it and display the cropped image of that document within our image view. Now let's move towards android studio for creating a new project in Android Studio.

Step 1 : Creating a new project in Android Studio

Navigate to Android studio as shown in below screen. In the below screen click on New Project to create a new Android Studio Project.

After clicking on New Project you will get to see the below screen.

Inside this screen we have to simply select Empty Activity and click on Next. After clicking on next you will get to see the screen below.

Inside this screen we have to simply specify the project name. Then the package name will be generated automatically.

Note − Make sure to select the Language as Kotlin.

After specifying all the details click on Finish to create a new Android studio project.

Once our project has been created we will get to see 2 files which are open i.e activity_main.xml and MainActivity.kt file.

Step 2 : Adding dependency for document scanner in build.gradle file.

Navigate to app>build.gradle file(project level) and add below dependency in the dependencies section.

implementation 'com.websitebeaver:documentscanner:1.0.0'

After adding the above dependency simply click on sync now option to install it.

Step 3 : Working with activity_main.xml

Navigate to activity_main.xml. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>activity_main.xml to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

<?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:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">
   <!-- creating a text view for displaying the heading of the application -->
   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_above="@id/idIVImage"
       android:layout_centerHorizontal="true"
       android:layout_margin="10dp"
       android:padding="4dp"
       android:text="Document Scanner Application"
       android:textAlignment="center"
       android:textColor="@color/black"
       android:textSize="20sp"
       android:textStyle="bold" />
   <!-- creating an image view for displaying the scanned document -->
   <ImageView
       android:id="@+id/idIVImage"
       android:layout_width="match_parent"
       android:layout_height="400dp"
       android:layout_centerInParent="true"
       android:layout_margin="10dp"
       android:padding="4dp" />
</RelativeLayout>

Explanation : In the above code we are creating a root layout as a Relative Layout. Inside this layout we are creating a text view which is used to display the heading of our application. After that we are creating an image view in which we will be displaying the image of a document which we will be able to see once we have completed the scanning of the document.

Step 4 : Working with MainActivity.kt file

Navigate to MainActivity.kt. If this file is not visible. To open this file. In the left pane navigate to app>res>layout>MainActivity.kt to open this file. After opening this file. Add the below code to it. Comments are added in the code to get to know in detail.

package com.example.kotlintestapplication
import android.graphics.BitmapFactory
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.animation.AnimationUtils
import android.widget.ImageView
import android.widget.Toast
import com.websitebeaver.documentscanner.DocumentScanner
class MainActivity : AppCompatActivity() {
   // on below line creating a variable for image view.
   private lateinit var docImageView: ImageView
   // on below line creating a variable for document scanner and initializing it.
   private val documentScanner = DocumentScanner(
       this,
       // on below line calling a method to display the cropped image results.
       { croppedImageResults ->
           // on below line getting the cropped image and displaying that image in our image view.
           // on below line setting image bitmap for our image view.
           docImageView.setImageBitmap(
               // on below line calling decode file to decode the file from cropped image results and display it in image view.
               BitmapFactory.decodeFile(croppedImageResults.first())
           )
       },
       {
           // on below line displaying an error message.
               errorMessage ->
           // displaying a toast message for error.
           Toast.makeText(this,"Fail to get document : "+ errorMessage,Toast.LENGTH_SHORT).show()
       },
       {
           // below method is called when the user cancelled the document scan.
           Toast.makeText(this,"Document Scanning has been cancelled by the user. ",Toast.LENGTH_SHORT).show()
       }
   )
   // on below line calling the default on create method to initialize our variables.
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
       // on below line initializing the variable for image view.
       docImageView = findViewById(R.id.idIVImage)
       // on below line calling start scan method to start the document scan.
       documentScanner.startScan()
   }
}

Explanation : In the above code firstly we are creating variables for our image view. After that we are creating a variable for the document scanner and initializing it. Inside this Document Scanner variable we are calling three different methods.

The first method will be called when we get some results from the document scanner. Inside this method we will be setting the results obtained from the document scanner inside our image view which we have created.

The second method will be called when we get some error from the document scanner. In this method we are simply displaying a toast message to display the error message.

The third method will be called when the user cancels the document scanning. In that case also we are displaying the toast message as scanning canceled by the user.

Now we will get to see the onCreate method. This is the default method of every android application. This method is called when the application view is created. Inside this method we are setting the content view i.e the layout file named activity_main.xml to set the UI from that file. Inside the onCreate method we are initializing the image view variable with the id which we have given in our activity_main.xml file. After that we are calling the start scan method to start our document scanner so that we can scan the document.

After adding the above code now we have to simply click on the green icon in the top bar to run our application on a mobile device.

Note − Make sure you are connected to your real device or emulator.

Output

Conclusion

In the above article we have taken a look on How to implement a document scanning functionality in an android application.