Open In App

Text Detector in Android using Firebase ML Kit

Improve
Improve
Like Article
Like
Save
Share
Report

Nowadays many apps using Machine Learning inside their apps to make most of the tasks easier. We have seen many apps that detect text from any image. This image may include number plates, images, and many more. In this article, we will take a look at the implementation of Text Detector in Android using Firebase ML Kit

What we are going to build in this article? 

We will be building a simple application in which we will be capturing an image of any text inside our app and we will then extract the text from that particular image and display that text inside a text field. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Connect your app to Firebase

After creating a new project in Android Studio connect your app to Firebase. For connecting your app to firebase. Navigate to Tools on the top bar. After that click on Firebase. A new window will open on the right side. Inside that window click on Firebase ML and then click on Use Firebase ML to recognize text in the image. You can see the option below screenshot. 

 After clicking on this option you will get to see the below screen. On this screen click on Connect to Firebase option to connect your app to Firebase. You will get to see the below screen. 

Click on Connect option to connect your app to Firebase and add the below dependency to your build.gradle file. 

Step 3: Adding dependency to build.gradle file 

Navigate to the app > Gradle Scripts > build.gradle file and add the below code to it. Comments are added in the code to get to know in more detail. 

Note: Use the following version(15.0.0) for the firebase ML kit if you are getting some error in the MainActivity.java file.

// dependency for firebase ml kit  

implementation ‘com.google.firebase:firebase-ml-vision:15.0.0’

// dependency for firebase core.

implementation’com.google.firebase:firebase-core:15.0.2′

Step 4: Adding Camera permissions to access Camera in your Android App

Navigate to the app > AndroidManifest.xml file and add the below code to it. Comments are added in the code to get to know in more detail. 

XML




<!--below line is use to add camera feature in our app-->
<uses-feature android:name="android.hardware.camera" android:required="true"/>
  
<!--permission for internet-->
<uses-permission android:name="android.permission.INTERNET"/>


  

Step 5: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--image view to display our image-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="29dp"
        android:scaleType="centerCrop" />
  
    <!--text view to display our extracted text-->
    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@+id/image"
        android:layout_marginTop="10dp"
        android:textSize="15sp"
        android:textStyle="bold" />
  
    <!--button to capture our image-->
    <Button
        android:id="@+id/snapbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="53dp"
        android:layout_marginLeft="53dp"
        android:layout_marginBottom="100dp"
        android:text="Snap"
        android:textAllCaps="false"
        android:textSize="25sp"
        android:textStyle="bold" />
  
    <!--button to detect text from our image-->
    <Button
        android:id="@+id/detectbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/snapbtn"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="39dp"
        android:layout_marginRight="39dp"
        android:text="Detect"
        android:textAllCaps="false"
        android:textSize="25sp"
        android:textStyle="bold" />
      
</RelativeLayout>


Step 6: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.ml.vision.FirebaseVision;
import com.google.firebase.ml.vision.common.FirebaseVisionImage;
import com.google.firebase.ml.vision.text.FirebaseVisionText;
import com.google.firebase.ml.vision.text.FirebaseVisionTextDetector;
  
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our 
    // image view, text view and two buttons.
    private ImageView img;
    private TextView textview;
    private Button snapBtn;
    private Button detectBtn;
      
    // variable for our image bitmap.
    private Bitmap imageBitmap;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // on below line we are initializing our variables.
        img = (ImageView) findViewById(R.id.image);
        textview = (TextView) findViewById(R.id.text);
        snapBtn = (Button) findViewById(R.id.snapbtn);
        detectBtn = (Button) findViewById(R.id.detectbtn);
          
        // adding on click listener for detect button.
        detectBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling a method to 
                // detect a text .
                detectTxt();
            }
        });
        snapBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // calling a method to capture our image.
                dispatchTakePictureIntent();
            }
        });
    }
  
    static final int REQUEST_IMAGE_CAPTURE = 1;
  
    private void dispatchTakePictureIntent() {
        // in the method we are displaying an intent to capture our image.
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
          
        // on below line we are calling a start activity 
        // for result method to get the image captured.
        if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
            startActivityForResult(takePictureIntent, REQUEST_IMAGE_CAPTURE);
        }
    }
  
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // calling on activity result method.
        if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {
            // on below line we are getting
            // data from our bundles. .
            Bundle extras = data.getExtras();
            imageBitmap = (Bitmap) extras.get("data");
             
            // below line is to set the
            // image bitmap to our image.
            img.setImageBitmap(imageBitmap);
        }
    }
  
    private void detectTxt() {
        // this is a method to detect a text from image.
        // below line is to create variable for firebase 
        // vision image and we are getting image bitmap.
        FirebaseVisionImage image = FirebaseVisionImage.fromBitmap(imageBitmap);
          
        // below line is to create a variable for detector and we 
        // are getting vision text detector from our firebase vision.
        FirebaseVisionTextDetector detector = FirebaseVision.getInstance().getVisionTextDetector();
          
        // adding on success listener method to detect the text from image.
        detector.detectInImage(image).addOnSuccessListener(new OnSuccessListener<FirebaseVisionText>() {
            @Override
            public void onSuccess(FirebaseVisionText firebaseVisionText) {
                // calling a method to process 
                // our text after extracting.
                processTxt(firebaseVisionText);
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // handling an error listener.
                Toast.makeText(MainActivity.this, "Fail to detect the text from image..", Toast.LENGTH_SHORT).show();
            }
        });
    }
  
    private void processTxt(FirebaseVisionText text) {
        // below line is to create a list of vision blocks which
        // we will get from our firebase vision text.
        List<FirebaseVisionText.Block> blocks = text.getBlocks();
         
        // checking if the size of the 
        // block is not equal to zero.
        if (blocks.size() == 0) {
            // if the size of blocks is zero then we are displaying
            // a toast message as no text detected.
            Toast.makeText(MainActivity.this, "No Text ", Toast.LENGTH_LONG).show();
            return;
        }
        // extracting data from each block using a for loop.
        for (FirebaseVisionText.Block block : text.getBlocks()) {
            // below line is to get text
            // from each block.
            String txt = block.getText();
              
            // below line is to set our
            // string to our text view.
            textview.setText(txt);
        }
    }
}


Now run your app and see the output of the app.

Output:



Last Updated : 23 Nov, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads