Text Recognition Using Firebase ML Kit — Text Recognition in Android

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:

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:

You can also see:

Comment below if you find it helpful.

Happy Coding!

Hi everyone, myself Golap an Android app developer with UI/UX designer.