Make a Text Scanner App | OCR App | Full Tutorial | Android Development

[Music] hello everyone welcome to coding with ivan and in this video we are going to make this ocr application so as you can see when we will open the app it will say hello capture or choose an image from gallery to perform ocr so now let's click on this capture button and here we'll get some options like we can click on this camera to click an image from the camera and we can also click on this gallery to pick an image from the gallery so let's click on this camera and take a picture so for this i'll open just this webpage of android studio and let's click on camera all right now let's take a picture of this part and let's confirm this and then we can crop uh a particular portion of this image so let's crop this part only and click on crop so as you can see we got the text extracted from this particular part that we just cropped okay and once you are done you can always click on this copy text button to copy the extracted text into your clipboard and if you are not satisfied with the ocr you can also click on this retec button to capture the image again so let's click on this retake camera and let's try to take picture of this part okay let's confirm it and i'll try to extract text from this part only now okay so let's click on crop okay so as you can see our text has been extracted now let's copy this text and let's go to our notepad and let's try to paste it here all right so our copy option is also working so now let's build this application so at first i'll go to the android studio and here as you can see i have opened a new project called ocr app and here we have the mainactivity.java and the activitymain.xml file so here at first let me tell you that to make this application we'll use two libraries like to capture or extract the text we will use the google mobile vision api and then we will use another library called android image cropper by arthur hub okay so we'll mainly use that to crop the image okay so we have to uh add the dependencies of these two libraries so i've just copied them here and don't worry i'll give the dependency in the description also from there you can copy them and paste it in your gradle so i'll just copy them and go back to my android studio and here i'll open the gradle scripts here and i'll go into this module level gradle file and inside here inside this dependencies i'll paste the two dependencies that i just copied so i'll paste them here and i'll click on sync now so once it's done we can go to our main activity.java and start our coding but before that let's create our ui so let's go to the ui first i'll go to the split view and inside here i'll change the root layout to a relative layout okay and then i'll remove this text view from here and here we have to add a text view to show the scanned or ocr text and we'll add two buttons here for the capture button and the copy text button okay so for the text view we will add that inside a scroll view so that if the extracted text is larger then we can just use the scroll view to scroll and view the full text so i'll take a scroll view here and i'll set its width to match parent and the height to match parent okay and then inside the scroll view we'll add the text view that we want so i'll take a text view here and i'll set its width to match parent and the height to wrap content okay and let's give this textview an id i'll call this text data and then for this scroll view i'll attach this to the top of the screen so i'll write align parent top to true and i'll also give this a margin of 8 db okay so this is our text view let's change the text size to 22 sp let's also change the text color to color black and let's also add a placeholder text so i'll write text i'll write hello capture or choose an image from gallery to perform ocr okay now we have to add two buttons so i'll go down this scroll view and here i'll add a linear layout because i want to show two of the buttons horizontally so for this i'll add a new linear layout this one i'll set its width as match parent and the height as wrap content and inside this linear layout i'll add our button so i'll add a button here and for the width i'll pass match parent okay actually press 0 db because we're going to add weights here so for the height i'll pass wrap content here and then let's pass a weight here of 1 and then i'll add a text of this button as i'll also give this a margin of 80p okay let's also give this button an id so for the id i'll pass button underscore capture okay let's close the tag of this button all right and then i'll just copy this button one more time under this okay and this time i'll change the buttons id to button copy and i'll change the text here to [Applause] copy text okay and we have to put these two buttons down here so that we have to attach them to the bottom of the screen so for this i'll go inside this linear layout because the linear layout is the parent layout of these two buttons so here i'll write uh sorry align parent to bottom and i'll pass through here okay and then we need to attach this text view just above these buttons so for this let's give this linear layout an id i'll call this linear holder okay and i'll go up here inside the scroll view and here i'll pass layout underscore above and here i'll pass the id of the linear layout so we named it as linear holder so i'll write here linear holder okay so now as you can see our text view is right above these two buttons okay so that's it for our ui now let's go to the main activity.java file and inside here at first let's initialize our views that we just defined inside this external file so i'll just define two buttons button button underscore capture and then button underscore copy okay and then let's also initialize the text view i'll call this text view underscore data now let's initialize them inside the oncreate method so here i'll write the button capture equals find view by id r dot id dot we named it as button capture and then for the button copy i will do the same find v by d r dot id dot button copy and then for the text view the text view data equals find v by id r dot id dot we named it as text underscore data okay and now as you know we are going to use the camera to capture image to perform ocr so in that case we have to access the camera permission so for this at first i will go into the manifest and here inside here we'll just define the permission to use the camera so here i'll write users permission then android.permission.camera let's close this and then we can go to our main activity.java here and here we'll ask the runtime permission to access the camera so i'll just go inside this oncreate method of after this initialization of the views so here i'll check if context compact dot check self permission and here at first we have to pass the context so for the context i'll pass main activity dot this and then we have to pass the name of the permission so i'll write manifest dot permission dot camera all right and then we'll check if the permission is not granted so i'll write not equals package manager dot permission granted so if the permission is not granted then we'll ask for the permission so here to ask the permission i'll write activity compat dot request permissions and here at the parameter we'll pass the activity so i'll write main activity dot this and the second parameter is the permissions so the permissions let's pass them inside a string so new string and then inside the second bracket we'll pass the permissions name so the permission name was manifest dot permission dot camera okay and then after this ending second bracket we have to pass the request permission code so let's define the code here so i'll go up here and here i'll create a variable called private static final int request underscore camera underscore code equals 100 okay and then we'll pass this request camera code right here so i'll write here request camera code all right so that will handle the runtime permission so now we can create on click listener for these so i'll just go after this and here i'll call this button capture select button capture dot set on click listener new view dot on click listener and inside here we'll just call our crop image activity that we'll get from the library that we just imported so before that if we go to the documentation or the github repository of our android image cropper so here we will see there are few steps to set up this library and here at the second step it was to add the crop image activity in our manifest file so let's do that so for this we'll just copy this part okay and then we'll just go to our android studio and i'll go to the manifest file and inside here i will create a new activity so i'll just paste it here okay it comes with the activity tag and we have to just close it okay so now we are done now we can go back to our main activity.java here and here we'll call our crop image activity so for this i'll write prop image dot activity dot set guidelines and here we'll pass the crop image view dot guidelines dot on okay and then we'll start the activity so for this we'll write dot start and here we'll pass the activity which is main activity dot this okay so that will launch the crop image activity and it will ask the user to click an image from the camera or select an image from the gallery and then the user will crop that image and then to capture the image result we have to call or override the on activityresult method so i'll just go outside of this oncreate method and i'll overwrite the on activity result so here i'll write on activityresult and inside this on activityresult after the supercall will check for the request code so i'll write if request code equal equal crop image dot crop image activity request code so if it matches then we'll just get the cropped image from the data so for this here i'll write crop image dot activity result i'll call this as result equals crop image dot get activity result and here for the parameter we'll pass the data that we got from the intent so i'll write here the data all right then in the next line we'll check for the result code so i'll write if the result code this one equal equal to result okay then we'll create a uri from the result so here i'll create a uri i'll call this as result uri equals result dot get uri okay so got the uri uh from the result here and then we'll try to create a bitmap from this uri so for this we have to take a bitmap so at first let's define a bitmap up here so here i'll create a bitmap object so i'll call this as bitmap and then let's go down here and inside here i will call this bitmap object equals media store dot images dot media dot get bitmap and here for the first parameter we have to pass a content resolver so for this i'll write this dot get content resolver and then for the second parameter we have to pass the uri so we have the uri here inside the result uri so i'll just pass this one the result uri okay so it's showing an error here in this get bitmap so we have to surround this with a try catch so let's click on this and we have the try catch block here okay so after we got the bitmap from the uri we can then start our ocr so in order to start the ocr we have to create another method so i'll just go after this or outside of this on activityresult method and here i'll create another method i'll call this private void gate text from image okay and here we'll pass a bitmap as a parameter so i'll pass bitmap object here okay so inside this method body we will call the text recognizer from the vision api so here i'll call the text recognizer class from google vision i'll create an object called recognizer equals new text recognizer dot builder this one and in the parameter we have to pass the context so i'll pass this and then i'll write dot build okay so recognizer object is now ready now we'll check if the recognizer is not operational so i'll write a if checker here and here i'll write recognizer dot is operational and i'll add a not here and then let's go to the if conditions body so if the recognizer is not operational then we'll just show a toast message and that will say some error occurred so at first we have to pass the context here so i'll write main activity dot this and then for the message or the text we'll pass error occurred okay now let's go outside of this if block and start the else block so inside this else block we will start extracting the text from the image so here at first i'll take a frame i'll call this frame okay showing an error because we need to import the class so we can click on alt enter or just click on this import class here okay all right so frame frame equals new frame dot builder this one and then i'll write dot set bitmap and here we'll pass the bitmap that we got from the parameter so i'll pass the bitmap here dot build okay and then i'll take a sparse array so i'll take a sparse array of text block and i'll call this as text block sparse array equals recognizer dot detect and we'll pass the frame that we got here okay and then we'll create a string builder so i'll write a string builder i'll call this as a string builder equals new string builder okay and then we'll traverse through each of the items inside this text block sparse array and we'll add them to the string builder so for this we have to create a new for loop here and here i'll write int i equals zero i is less than text block sparse array dot size and then i plus plus okay and inside this for loop i'll create a object of text block so i'll write text block text block equals text block sparse array dot value at and here i'll pass i which is the index and then we will add the value of this text block to our string builder so i'll write the string builder dot append and here we'll pass the text block dot get value okay and after adding each of the value we will add a new line here so that we can maintain the line patterns so i'll write stringbuilder.append and i'll attach a new line here and after all the strings from that image is added we can attach the strings from the string builder to our text view so i'll just go after this for loop here and here i'll call our text view which is the text view data dot set text and here i'll pass the string builder dot tostring okay and let's do another thing when we'll perform a successful ocr we can change the text of our capture button to retake and we can enable the copy text button so let's go to our activity main.xml file here and here at first we have to make this pattern copy as invisible so i'll change the visibility to gone here okay now let's go back to the magnitude.java here and here after adding the string to the textview i'll call the button capture dot set text and here i'll change the string to retake okay and then we'll make the button copy visible so i'll write button copy dot set visibility visible okay so what that will do is whenever a user will open the app for the first time it will only show the capture button and if the user clicks on the capture button it will open the camera you the user will click an image it will perform the ocr and when the ocr is complete it will show the retect button and the copy text button okay so that's done now we can make on click listener for the uh button copy so i'll just go above here after this button capture i'll create a on click listener for the button copy select button copy dot set on click listener new view dot on click listener and here we have to call a method to copy the text to the clipboard so let's make the method first so for this i'll go down here after this method and here i'll create a new method private void copy to click board okay and here we'll pass a string as the parameter i'll call this as text so inside this copy to clipboard method i'll call the clipboard manager i'll create an object called clipboard equals get system service and here we have to pass the service class so for this we have to write context context dot clipboard service so i'll write clipboard service here okay and then let's create another object for the clip data but before that it's showing an error okay so it says that cast to android slipper measure okay so let's cast this to clipboard manager so i'll just write here clipboard manager okay all right so let's create another object for the clip data so i'll write clip data i'll call this as clip equals clip data dot uh new plain text this one and here for the label at first we have to pass let's pass copied data okay and for the second parameter we have to pass this text that will get from the parameter okay and then let's set the primary clip to the clipboard so i'll call the clipboard dot set primary clip and here we'll pass the clip that we created okay so now our text is now copied to the clipboard and we can show a toast message to the user that the text has been copied to the clipboard so here for the first parameter we have to pass the context main activity dot this and then for the text we'll pass copied to clipboard okay so now we have to call this method to our on click listener for the button copy so here i'll call the copy to clipboard and for this string we have to get the text from the text view so at first let's create a string object here i'll call this as scanned text equals uh textviewdata.gettext.tostring okay and we'll pass this scan text into the parameter okay so that will do the work for the copy to clipboard method and now we have to call this get text from image method inside this on activity result after this bitmap creation so here i'll call this get text from image and for the bitmap we'll pass this one as the parameter so i'll pass the bitmap here okay so our ocr application is now done so now let's run this to see how it works okay so here as you can see our app is now opened and it's asking for the camera permission so let's allow that and it says hello capture or choose an image from gallery to perform ocr okay so let's open the web page again for the android studio okay and let's click on this capture button okay let's open this okay let's click on the capture button here and let's select the camera now we'll click on or click this image okay so image is now captured let's confirm this now let's try to extract this part of the text okay all right so now let's crop this image and as you can see our text has been extracted so now let's try to copy this text by clicking on this copy text button so the text is now copied now let's paste this inside the notepad to see if it works yes it works okay so that's how we can make a simple ocr application for android i hope you guys enjoyed this video and if you enjoyed leave a like to this video and subscribe to my channel because i will be posting more awesome android projects and tutorials like this and thank you so much for watching you

Channel: Coding With Evan

Views: 8,013

Keywords: Text Recognition App - Android Studio - Java, Image into text converter in Mobile & computer, Extract Text From Image using Android and Google ML Kit, how to extract text from image in android, how to make a document scanner app, how to make a text recognizer app, how to get text from image

Id: sjkDbxyoNW0

Length: 29min 14sec (1754 seconds)

Published: Sat Aug 14 2021