OCR: Read Text from Image in Android App

Table of Contents:

1. Introduction
2. Setting up the Project
3. Implementing the Google Vision Library
4. Granting Permissions
5. Creating the Layout
6. Creating Variables and Views in the Java Code
7. Implementing the Button Click Functionality
8. Reading Image Text Using Google Vision
9. Displaying the Image and Extracted Text
10. Testing and Conclusion

Introduction

In this article, we will learn how to Read text from an image using the Google Vision library. We will Create a simple OCR (Optical Character Recognition) app that can extract text from images. This app will be developed for Android 12, API level 31.

Setting up the Project

To begin, we need to set up a new Android project. We will name it "Image to Text App" (You can choose any name you prefer). Once the project is created, we can proceed with the implementation.

Implementing the Google Vision Library

To use the Google Vision library, we need to add it to our project's Gradle file. Open the Gradle file at the app level and add the following implementation:

implementation 'com.google.android.gms:play-services-vision:20.1.3'

Make sure to sync the project after adding the library.

Granting Permissions

To access and read images from the external storage, we need to grant the necessary permissions. Add the following lines in the AndroidManifest.xml file:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Remember to request the necessary permission from the user during runtime.

Creating the Layout

In the layout XML file, we will include a TextureView to display the image output, an EditText for the file name input, and an ImageView to Show the image being read. Additionally, we will have a TextView to print the extracted text. Here's an example layout:

<LinearLayout>
    <TextureView
        android:id="@+id/textureView"
        ... />

    <EditText
        android:id="@+id/fileNameEditText"
        ... />

    <ImageView
        android:id="@+id/imageView"
        ... />

    <TextView
        android:id="@+id/outputTextView"
        ... />
</LinearLayout>

Creating Variables and Views in the Java Code

In the Java code, we need to create variables for the TextView, EditText, and ImageView. Additionally, we will implement a button click function. Here's an example of the variable and view initialization:

private TextView textView;
private EditText editText;
private ImageView imageView;

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

    textView = findViewById(R.id.outputTextView);
    editText = findViewById(R.id.fileNameEditText);
    imageView = findViewById(R.id.imageView);

    // Implement button click functionality
    Button button = findViewById(R.id.button);
    button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            readImageText();
        }
    });
}

Implementing the Button Click Functionality

When the button is clicked, we will execute the readImageText() function to extract text from the image. This function will contain the main logic for using the Google Vision library. Here's an example of the function implementation:

private void readImageText() {
    try {
        Bitmap bitmap = BitmapFactory.decodeFile(getFilePath());
        imageView.setImageBitmap(bitmap);

        TextRecognizer textRecognizer = new TextRecognizer.Builder(getApplicationContext()).build();
        Frame frame = new Frame.Builder().setBitmap(bitmap).build();
        SparseArray<TextBlock> textBlocks = textRecognizer.detect(frame);

        String imageText = "";
        for (int i = 0; i < textBlocks.size(); i++) {
            TextBlock textBlock = textBlocks.valueAt(i);
            imageText += textBlock.getValue() + " ";
        }

        textView.setText(imageText);
    } catch (Exception e) {
        textView.setText("Error: " + e.getMessage());
    }
}

Reading Image Text Using Google Vision

In the readImageText() function, we first decode the selected image file into a Bitmap. We then set this Bitmap to the ImageView for display purposes.

Next, we create a TextRecognizer object and use it to detect the text from the image. The detected text is stored in a SparseArray of TextBlock objects.

We iterate through the TextBlocks and concatenate the extracted text into a single STRING variable, adding a space between each block for readability.

Displaying the Image and Extracted Text

Finally, we set the extracted text to the TextView for display.

Testing and Conclusion

To test the app, run it on an emulator or a physical device. Select an image file, click the "Read Image" button, and observe the extracted text displayed in the TextView.

In conclusion, we have successfully implemented an OCR app using the Google Vision library to extract text from images. This app can be further enhanced with additional features and functionalities.

Overall, this article has covered the necessary steps to read text from an image using the Google Vision library in an Android app. Feel free to explore and experiment with the code to enhance the app according to your requirements.

Highlights

• Learn how to read text from images in an Android app
• Use the Google Vision library for optical character recognition (OCR)
• Extract text from various image file formats
• Display the extracted text and image in the app's UI
• Grant necessary permissions for accessing and reading image files