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 Capabilities:

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

Firebase ML Kit Text Recognition

Step 1: Create a new Android Studio Project.

Step 2: Connect your android project to Firebase Console.

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

Step 4: Design the XML File

<?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

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 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!

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