Google Vision API Demo - BarCode Reader Using Android Studio

This article is about how we use Vision API in Android Studio.

Introduction

Today, you are going to learn about the Google Vision API using Android Studio and we are going to build a barcode reader app to scan the barcodes. Please follow the below steps carefully to build the Barcode Reader App.

Google API
  • Google Vision API is used to find the objects like images, faces in photos, and videos, and barcodes.
  • It recognizes the texts and other things which are digitally captured; thus, it is very useful to build our barcode reader app.
Barcode API Overview
  • This app will let us to detect the information from a barcode with the help of Vision API.
  • A barcode is classified into 1d Barcode and 2d Barcode.
  • To know more about it, you can visit the Barcode API information page from Google Developers portal.
Requirements
  •  Android Studio
  • How to code 
  • Understanding basic functionlaities of how API works
  • Free to learn 
Steps to follow

Add the below code in "build gradle" to add library files to our Barcode reader.
  1. compile 'com.google.android.gms:play-services-vision:11.0.2'  
Now, we are going to include Barcode Reader library to work correctly. First, we need to build the gradle codes and Android Hive. Then, add Barcode Reader code to it.
  1. build.gradle  
  2. dependencies {  
  3.     
  4.     implementation 'info.androidhive:barcode-reader:1.1.5'  
  5.     implementation 'com.google.android.gms:play-services-vision:11.0.2'  
  6. }  
It is time to add Activity fragment to which we can invoke the Camera fragment.
  1. <fragment  
  2.         android:id="@+id/barcode_scanner"  
  3.         android:name="info.androidhive.barcode.BarcodeReader"  
  4.         android:layout_width="match_parent"  
  5.         android:layout_height="match_parent"  
  6.         app:auto_focus="true"  
  7.         app:use_flash="false" />  
  8. This is code for Camera Actvity  
Now, let's add the following code to work our project correctly and name it as BarcodeReader.BarcodeReader.java in class library.
  1. import android.support.v7.app.AppCompatActivity;  
  2. import android.os.Bundle;  
  3. import android.util.SparseArray;  
  4. import com.google.android.gms.vision.barcode.Barcode;  
  5. import java.util.List;  
  6.    
  7. import info.androidhive.barcode.BarcodeReader;  
  8.    
  9. public class MainActivity extends AppCompatActivity implements BarcodeReader.BarcodeReaderListener {  
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.activity_scan);  
  14.     }  
  15.    
  16.     @Override  
  17.     public void onScanned(Barcode barcode) {  
  18.         // single barcode scanned  
  19.     }  
  20.    
  21.     @Override  
  22.     public void onScannedMultiple(List<Barcode> list) {  
  23.         // multiple barcodes scanned  
  24.     }  
  25.    
  26.     @Override  
  27.     public void onBitmapScanned(SparseArray<Barcode> sparseArray) {  
  28.           
  29.     }  
  30.    
  31.     @Override  
  32.     public void onScanError(String s) {  
  33.         // now scan error   
  34.     }  
  35.    
  36.     @Override  
  37.     public void onCameraPermissionDenied() {  
  38.         // camera permission actually denied  
  39.     }  
  40. }  
Add this following Java Code MyClass java file in iy.
  1. import android.app.Application;  
  2. import android.text.TextUtils;   
  3. import com.android.volley.Request;  
  4. public class MyApplication extends Application {  
  5.    
  6.     public static final String TAG = MyApplication.class  
  7.             .getSimpleName();  
  8.    
  9.     private RequestQueue mRequestQueue;  
  10.    
  11.     private static MyApplication mInstance;  
  12.    
  13.     @Override  
  14.     public void onCreate() {  
  15.         super.onCreate();  
  16.         mInstance = this;  
  17.     }  
  18.    
  19.     public static synchronized MyApplication getInstance() {  
  20.         return mInstance;  
  21.     }  
  22.    
  23.     public RequestQueue getRequestQueue() {  
  24.         if (mRequestQueue == null) {  
  25.             mRequestQueue = Volley.newRequestQueue(getApplicationContext());  
  26.         }  
  27.    
  28.         return mRequestQueue;  
  29.     }  
  30.    
  31.     public <T> void addToRequestQueue(Request<T> req, String tag) {  
  32.         // set the default tag if tag is empty  
  33.         req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);  
  34.         getRequestQueue().add(req);  
  35.     }  
  36.    
  37.     public <T> void addToRequestQueue(Request<T> req) {  
  38.         req.setTag(TAG);  
  39.         getRequestQueue().add(req);  
  40.     }  
  41.    
  42.     public void cancelPendingRequests(Object tag) {  
  43.         if (mRequestQueue != null) {  
  44.             mRequestQueue.cancelAll(tag);  
  45.         }  
  46.     }  
  47. }  
Now, add the following XAML code to add the user interface in activity.main.xaml page. 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     android:background="@drawable/bg_gradient"  
  8.     tools:context="info.androidhive.movietickets.MainActivity">  
  9.  //akshayrao code  
  10.     <LinearLayout  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:layout_centerHorizontal="true"  
  14.         android:layout_centerInParent="true"  
  15.         android:gravity="center"  
  16.         android:orientation="vertical"  
  17.         android:paddingLeft="40dp"  
  18.         android:paddingRight="40dp">  
  19.    
  20.         <ImageView  
  21.             android:id="@+id/icon"  
  22.             android:layout_width="100dp"  
  23.             android:layout_height="100dp"  
  24.             android:layout_centerHorizontal="true"  
  25.             android:clickable="true"  
  26.             android:foreground="?attr/selectableItemBackground"  
  27.             android:src="@drawable/qrcode"  
  28.             android:tint="@android:color/white" />  
  29.    
  30.         <TextView  
  31.             android:layout_width="wrap_content"  
  32.             android:layout_height="wrap_content"  
  33.             android:layout_marginTop="30dp"  
  34.             android:fontFamily="sans-serif-light"  
  35.             android:gravity="center"  
  36.             android:text="Scan the QR code on the poster and book your movie tickets"  
  37.             android:textColor="@android:color/white"  
  38.             android:textSize="16dp" />  
  39.     </LinearLayout>  
  40.    
  41.     <Button  
  42.         android:id="@+id/btn_scan"  
  43.         android:layout_width="wrap_content"  
  44.         android:layout_height="wrap_content"  
  45.         android:layout_alignParentBottom="true"  
  46.         android:layout_centerHorizontal="true"  
  47.         android:layout_marginBottom="40dp"  
  48.         android:background="@android:color/transparent"  
  49.         android:foreground="?attr/selectableItemBackground"  
  50.         android:paddingLeft="20dp"  
  51.         android:paddingRight="20dp"  
  52.         android:fontFamily="sans-serif-medium"  
  53.         android:text="Scan QR Code"  
  54.         android:textColor="@android:color/white"  
  55.         android:textSize="18sp" />  
  56.    
  57. </RelativeLayout>  
Now, the application has been successully created. Debug it to get the certain output.
 
 

Comment below in case you have any query. Please like and share if you love it.