Text Recognition Using Firebase ML Kit — Text Recognition in Android

5 min readAug 4, 2020

Hi Guys, welcome to GBAndroidBlogs we have created a Text Recognition app from an image using Firebase ML Kit. Also, in this app, we have used some material design on the main page.

What is Firebase ML Kit?

ML Kit is a mobile SDK that brings Google’s machine learning expertise to Android and iOS apps in a powerful yet easy-to-use package.

ML Kit Capabilities:

Text Recognition
Image Labelling
Barcode and QR Scanning
Face Detection
Landmark Recognition
Custom Modelling

Firebase ML Kit Text Recognition

Okay, let’s start creating this Firebase ML Kit Android Project of Text Recognition. Follow the steps:

Step 1: Create a new Android Studio Project.

For creating the project go to the File > New > New Project and Select Empty Activity. Then hit Next to give a name to the Project. After then hit Finish to start the project.

Step 2: Connect your android project to Firebase Console.

First, you need to sign in with your Google Account in the Android Studio, then go to the Tools > Firebase to open the Firebase Console or you directly search for firebase console in Google and sign in with your Google Account.

Now the steps to create a Firebase Project:

1. Add Your Project

2. Secondly, choose the app to get started. Here we used Android, therefore select Android.

3. After that, Register your app

4. download the google-services.json file and upload it into the app module of your android app.

5. then add the required dependencies of Firebase and google services inside the app build.gradle and project build.gradle files.

Step 3: Add Firebase ML Dependency in Android Studio

First, add the Firebase ML dependency and the Material Design dependency in the app build.gradle file. Here we used the old version of the firebase ml dependency because for the latest versions of the firebase ml dependency we need to add our credit card. So make sure to use the Firebase ml dependency below 15.

Step 4: Design the XML File

Open the activity_main.xml file and add these lines

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:padding="20sp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:id="@+id/image_view"
        android:layout_marginTop="20dp"
        android:background="@drawable/image"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/detect_text_title"
        android:layout_below="@+id/image_view"
        android:text="Text Recognition"
        android:fontFamily="@font/roboto_bold"
        android:textColor="@color/detectText"
        android:textSize="24sp"
        android:layout_marginBottom="20dp"
        android:layout_marginTop="20dp"/>

    <TextView
        android:id="@+id/text_display"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/detect_text_title"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp"
        android:fontFamily="@font/roboto"
        android:gravity="center_horizontal"
        android:maxLines="8"
        android:text="Detected Texts will be seen here!"
        android:textAlignment="textStart"
        android:textColor="@color/textResult"
        android:textSize="17sp"
        tools:ignore="RtlCompat" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp">

        <Button
            android:id="@+id/capture_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/camera_ripple"
            android:fontFamily="@font/roboto_bold"
            android:padding="8dp"
            android:textColor="@color/colorAccent"
            android:text="CAPTURE IMAGE"
            app:icon="@drawable/camera"
            android:layout_marginRight="8dp"
            style="@style/Widget.MaterialComponents.Button.Icon"/>

        <Button
            android:id="@+id/detect_text_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/roboto_bold"
            android:backgroundTint="@color/buttonBack"
            android:padding="8dp"
            app:strokeColor="@color/colorPrimary"
            app:strokeWidth="1dp"
            android:textColor="@color/colorPrimary"
            android:text="Detect"
            android:textAllCaps="true"
            android:layout_marginRight="8dp"
            app:icon="@drawable/check"
            app:iconTint="@color/colorPrimary"
            style="@style/Widget.MaterialComponents.Button.Icon"/>
    </LinearLayout>

</RelativeLayout>

Here, ImageView to display the image captured by the camera
TextView to display the Text read by Firebase ML Kit.
Button 1 (Capture Image) to Open the Camera.
Button 2 (Detect) to read and detect the text from the image using Firebase ML Kit.

Step 5: Java code for Firebase ML Kit text recognition

open the ActivityMain.java file and paste below code:

package com.example.textrecognitionapp;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.provider.MediaStore;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.material.button.MaterialButton;
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 {

    //variables

    private Button captureImageBtn, detectTextBtn;
    private ImageView imageView;
    private TextView textView;
    static final int REQUEST_IMAGE_CAPTURE = 1;
    Bitmap imageBitmap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //initialize the variables

        captureImageBtn = findViewById(R.id.capture_image);
        detectTextBtn = findViewById(R.id.detect_text_btn);
        imageView = findViewById(R.id.image_view);
        textView = findViewById(R.id.text_display);

        //when camera button clicked

        captureImageBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //call dispatchTakePicture function
                dispatchTakePictureIntent();
                textView.setText("");
            }
        });

        //when detect text button clicked

        detectTextBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //call detectTextFromImage function
                detectTextFromImage();
            }
        });
    }

    //take image using camera

    private void dispatchTakePictureIntent() {
        Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        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);
        if (requestCode == REQUEST_IMAGE_CAPTURE && resultCode == RESULT_OK) {
            Bundle extras = data.getExtras();
            imageBitmap = (Bitmap) extras.get("data");
            imageView.setImageBitmap(imageBitmap);
        }
    }

    //detect text from image using Firebase Text Detector tool

    private void detectTextFromImage() {
        FirebaseVisionImage firebaseVisionImage = FirebaseVisionImage.fromBitmap(imageBitmap);
        FirebaseVisionTextDetector firebaseVisionTextDetector = FirebaseVision.getInstance().getVisionTextDetector();
        firebaseVisionTextDetector.detectInImage(firebaseVisionImage).addOnSuccessListener(new OnSuccessListener<FirebaseVisionText>() {
            @Override
            public void onSuccess(FirebaseVisionText firebaseVisionText) {
                displayTextFromImage(firebaseVisionText);
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                Toast.makeText(MainActivity.this, "Error" + e.getMessage(), Toast.LENGTH_SHORT).show();

                Log.d("Error: ",e.getMessage() );
            }
        });
    }

    //display the text from image in our TextView

    private void displayTextFromImage(FirebaseVisionText firebaseVisionText) {
        List<FirebaseVisionText.Block> blockList = firebaseVisionText.getBlocks();
        if (blockList.size() == 0){
            Toast.makeText(this, "No Text Found in this image", Toast.LENGTH_SHORT).show();
        }else {
            for (FirebaseVisionText.Block block : firebaseVisionText.getBlocks()){
                String text = block.getText();
                textView.setText(text);
            }
        }
    }
}

And there is your Firebase ML Kit Android project of Text Recognition from an Image.

Quick Recap:

ML Kit is a mobile SDK that brings Google’s machine learning expertise to Android and iOS apps in a powerful yet easy-to-use package.
ML Kit Capabilities: Text Recognition, Face Detection, Barcode and QR code scanner, Image Labelling, Landmark Recognition, and Custom Modelling.
Add the Firebase ML Kit dependency into your android project and then write your code inside java file and design the layout inside the XML file.

You can also see:

Comment below if you find it helpful.

Happy Coding!