Firebase Text Recognition with Android

Udara Abeythilake
5 min readOct 29, 2019

--

What is Firebase Text Recognition?

Firebase has a service call 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. Whether you’re new or experienced in machine learning, you can implement the functionality you need in just a few lines of code. There’s no need to have deep knowledge of neural networks or model optimization to get started. On the other hand, if you are an experienced ML developer, ML Kit provides convenient APIs that help you use your custom TensorFlow Lite models in your mobile apps.

In this kit one feature is Text recognition. Other than that, the below features are also available.

This is the first tutorial that I’m going to present using the Firebase ML kit. Text Recognition can automate tedious data entry for credit cards, receipts, and business cards. With the Cloud-based API, you can also extract text from pictures of documents, which you can use to increase accessibility or translate documents. Apps can even keep track of real-world objects, such as by reading the numbers on trains.

In this tutorial, I’m going to create a small android app to recognize the text written on the images. From this demo, a user can select any image containing letters and upload to firebase and get the text to a string value so the user can use that text in another field.

Let’s get started

Step 1

First, you need to create a new project in the Firebase console. Create an empty Android project. Then go to the Firebase console. From the console Add and give the project name as shown below and press continue.

Then you will be redirected to the dashboard of the Firebase. On the dashboard select an android icon to configure Firebase with your project.

You must add the Android Package name for this. You can easily find the package name from the project you created from the android studio. Open your created project. Then open the Android Manifest file. Then you can find your package name. copy and paste the name to the Firebase. There are other two entries that are optional to register the app in Firebase. If you wish you can add them.

The next step is downloading the configured JSON file.

After you downloaded this file from the Firebase you must add it to the android project app folder as shown in this figure.

Then, you must add some code stuff for two files. That is adding dependencies to your gradle file. Change your app level build.gradle file and project level build.gradle file. Do not confuse those two files.

Project-Level build gradle. Inside the dependencies

App-level build gradle

Now you have done configuring Firebase.

Step 2

In this app, we are going to access the files of the mobile phone. So, we need to get permission to access the file. So, go to the AndroidManifest.xml file and add the following permission. In addition to that, you need to add the meta-data of the firebase to this file.

Step 3

Now we are going to design the layout to display the selected image and render the text after the text recognition is completed. In the activity_main.xml add the following layout

Step 4

Next, we need to create the functions to handle images inside the app. We face some problems when we are working with images. Because image to image resolution and quality is different. Therefore, we need to convert them so our app can easily render the image. To do that I’m going to create a separate class called CommonUtils.java as below.

below are the functions of the CommonUtils.java file and their usage.

  • getPath(Context context, Uri uri)

return the file path as a string value. For this, we are using the cursor to get the file location.

  • createTempFile(File file)

creating a temporal file

  • resizePhoto(File imageFile, Context context, Uri uri, ImageView view)

resizing the photo by using the decoded stream. Finally, compress the photo.

Step 5

Finally, we are going to implement the MainActivity.

In this file, we are using FirebaseVisionImage and FirebaseVisionTextDetector to send the image to Firebase and analyses the text. Then after on success it processes the return text and sets it to a text view.

Conclusion

In this tutorial, we learn how to get a text from the image by using firebase text recognition. If you face any problem while developing please refer the source code

--

--