Android Text Recognition from Camera - Android Studio Tutorial Text Recogniser using ML KIT

hello guys welcome back to quarry cafe my name is Mohammad elites and in this tutorial we are going to create tax recognition app using the firebase machine learning kit so here you can see this is the demo at the start of toriel I want to show you guys that which F you are going to develop so I just Google some images okay that contain text okay now when user click in the application by this on this button which is such an image the phone camera will be turned on here you can see it I'm moving the camera again here you can see it now let's just take a picture of this I mean from here I'm going to take a picture here okay now once it is done that image will be appeared here in this application here you can see it and after this you can just click on this deduct text button and boom here you can see it it exactly get the text from the image here you can see it in it displayed here in our text view now let's test it from for some other images I'm going to clear again on the capture capture button on camera it's turned on okay now I am rotating my phone in the landscape mode okay here you can see it my phone is in the landscape and now let's just click mean let's just get a picture and here you can see it now if I click on the deduct text button and here you can see it it exactly get the text even though you can see that the image is a little bit blur okay but it exactly get the text and it displayed here which is feeling happy and satisfied so this is I mean the fire best machine learning using the fire best machine learning kit open the Android studio and let's create a brand new Android project with the new project and choose an empty activity click Next and you can give name to your application so I give it no mystic text recognition app okay and then all you need is here you can select the language that is called in Java we are going to do it using Java ok and then the API level 21 is the best lollipop and then make sure that this is checked okay which is a new library or you can say the n-word X artifacts okay it will be checked by default in your cache if you are using the latest Android studio version okay so make sure that it is checked and once then you can I mean click on finish so a new project is going to launch I mean the Gradle build is running now and we have to wait for it it will talk some seconds so our new project is created successfully obey the same successfully then the next step is to come here to the XML file quickly and let's design this page okay so first of all make sure to change this constant layout to the relative layout okay and then what we gonna do is here we need to okay so let's move this textview first need it we need an image view where I mean we will allow you to snap a picture or you can say capture image and we will display it inside this image you as you have seen in the demo of this project okay so it will be match parent match parent lets do I do to it quickly so the idea will be image underscore loop for this one okay and the next thing which we need to do is after this we need to add our text to where we will I mean deduct the text from an image and you will display the text inside all text view so that's error text you quickly match parent web content ID for this text underscore display and it must be below the image view so let's I mean you can say Android low ID that said some text to it so that we can make a design good so it will be like display get up take deducted image well this is just I mean we are doing to see our design here okay now here we need to change the height because it is much current and because of that the text is not visible here so let's give size to over this image view the 350 will be 400 will be good okay 400 DP will be the height okay here you can see it okay and then after this we need to below we will have this text let's increase the text size so the text size for this will be acting will be good or you can change it to 26 whatever you want okay and then max lines will be 5 depending upon the text on the image did I mean it will display maximum 5 okay let's give it some margin from all the sides and it will be 10 DP now the next thing comes which is to capture image I mean to patterns whereas for capturing the image and the other one is for the deduct X button from that image that we capture so let's add a button quickly and let's start from capital B content now let's quickly assign ID to it will capture underscore image for this button and it was weird bottom so we can say align parent bottom and then let's quickly add some text to this button and it will be capture image so when I user click on this button he will we will open the camera mobile phone camera for the user to capture image from the background or surroundings okay so now you can design this if you want okay it's totally up to you guys I mean our main task is to get up the text from that image now let's copy paste this button copy it questions down below and here we can say this will be over deduct underscore text within the text recognition of s or deduct text from the image I mean it is the ID okay to make it unique from here you can remove this alignment bottom okay and now the next thing is let's first changes which will be deduction deduct text from the image or whatever and them you want to give to it okay and this button will be above this text button okay so all you will need is just type above ID and copy this ID and pass that ID here and here you can see it now if you want you can give background to these button like just for designing purposes it is up to you I mean you can ignore it color and royal white text size 17 DP also you can just go repairs this quickly and after this we can start work on our firebase and allocate text recognition okay so yeah now if you want you can change this color just to differentiate between these two buttons okay capture again read our text so let's give it some margin from the bottom 10 DP so yeah now we are ready okay so let's go just go to the main activity and there Squiggy define all these things okay so Pat but we have one button which is for our capture the image capture image beauty and and then we have another one which is our deduct text image or we can just said it attracts to eat again then we have image view in which we will display the captured image so we can say image view there is give it the same image view then we have got extra where we will display the electric text on that image so we can just say text view text to you then in here inside our on cleared let's just cast these things could 3 1 and our capture image buttons equals to final view by ID or what I do not capture image let's come to a state quickly for the remaining ones so second we have deductive button ID is deduct text image your text image sorry let me check it what is the ID of our this one it is redux capture image and deduct text image let's give some proper ID alongside we did ok BTN we can differentiate copy it and paste it here now say I would think is okay now so we have captured image button we got text image button and then we have capture sorry we have an image view then we have our text view and then we have to give it ID so for the image view you have ID image view and for the text we think we have your text display so now when a user click on the capture image button you have to open the camera and and get that image intent ok displayed on that image view and then we will move to the detect text operations okay so anywhere else just do it quickly now this link will be available in the description down below ok developer.android.com strange / camera / photo basics we are this is basically the official side of e Android ok so from here we will use some or snippets for capturing the image and displaying ok so anyways just copy this cord here you can see when you scroll here little bit you will see this one take a photo with a camera F and then make sure to come here to the Java if you are developing using the Java ok then click Java and then copy it so once it is copied left just go back and here you need to press this cord inside here oh sorry I mean not here this is the method okay for I mean here you can see private wide display state to take picture intent to get the intent of that picture which means to get that image so anyways just copy past that whole thing I mean below this on create okay here you can see it is over method and make sure to import this by pressing alt enter or if you can click on this red bull import class same is for this media store import class ok now come here to the browser and then after it we have to get that image content that is that M is basically this is for I will explain it now but first come to the Java go B this onactivityresult and then come here and pasted that code here and make sure to import this bitmap import class and one thing you can just cut the statics final request image capture control X and pastured above here so yeah now now first of all if you see this red line below is all activity result all you need is just click here ok and click this red bull and make sure to click this one which is at super called so also you can type this thing manually which is super dot onactivityresult okay so let me just give some space here oh let me tell you now what this dispatch text which our intent will do and this one activity result now here basically when we say enter in texture and 10 equals to n now what we are doing here is that basically we are sending the user to the external activity or you can say we are opening the basically we allow the user to open the phone camera and from the phone camera the user can now select a capture image basically now once that a picture I mean take picture and 10 means that ok if this is not equals to null then we I mean how we can get that intent though they start activity for result this is basically pointing to this method which is on activity result that is once that picture is captured here by the user phone we have to get that picture data ok so here we said it or not get X timing this whole court basically we are getting that data I mean that image and we are displaying it on our image view and we are using the same name image view that is why it is displaying here ok so image view are set image bitmap image bitmap I mean that either we convert that image into a bitmap and we are displaying here it on our image so that is just simple if you do not understand it I mean I explain it well but if you do not understand it I mean a human can make mistake you can just see the whole documentation from here ok take a photo with the camera app this is the documentation for this method which is dispatch I mean this method ok here you can see it and then we have to get the thumbnail which is to get the image we have this on activity results so you can also read that documentation for your clear understanding if you do not understand it what I said at all okay now also when we use something like I mean to use external storage or let's say location or other thing we need to add a permission so for that let's go to that link again and here we have this request the camera feature ok here we have this manifest news feature and just copy this uses feature ok up to here video is permission and they're just go to the Android studio manifest Android manifest and then we can Westar yeah now comes the fat waste ml kit working okay once you add this the next thing is to just go to your favorite browser and come here to the console dot fire West or google.com if you have already any Android I mean fire this project you can connect this new project to that existing firebase project but there will many people who will be new to the firebase so for them let's create a new project okay so I am going to just click on this add project now here all you gonna need is just to type your project name don't give any name to it okay just click continue and make sure that this Google Analytics for your firebase project is turned on and then press Continue select account if it is not selected then you can just click that is default account for firebase and then create project so it is now going to create a firebase project for us so a new project F atmospheric is created successfully Androids click this Android icon since or project is Android here we have to write our Android package name for the end of studio here we have this our yes resource I mean sorry I mean a greater scripts okay here we have built our Gradle module app here we have our application ID just copy this ID ctrl C let's go back press that ID here and here if you want you can give nickname to it let's say I'm going to give it name ml get recognition and you can leave this one this optional okay just click register so yeah now we have to download this Google services dot yes and file you can see it'll download it successfully let's open that folder here you can see okay now what you going to do next is just come here and make sure to change this to project inside here we have your project name like in my case technician F okay my Android project name is and then we have this F folder now all you will need is just to the file which is our Google services dot JSON which I downloaded in front of you guys okay this file all you gonna need is just to drag and drop this file you know I mean above this or you can say inside this F folder here you can see it okay just drag and drop like this above this or you can say inside you safe folder and then click OK and here you can see that file is added successfully inside our F folder okay now once you do this just come back to the Android I mean change this to and right now let's go back to the browser we click Next now we have to copy this one which is you need to add it in our project ok so copy it come back here and we have mentor grader project come here and paste it inside I mean below this class path just paste it here and you can then plug it and come back to the module app now here we need to add some dependencies which is this one apply plugin come Google Google services copy it and in our module app below this dependencies you can test that line ok make sure that it is this one and then click Next ok so it is done I mean object is created but one thing I will provide this link in the description down below okay here you can see this link which is for using the latest version of firebase and we will be using the file firebase mi region ok which is dependency I mean related to be fired by cement kit for text recognition or ferrous reduction and all these stuff I mean machine learning or dependency so anyways now the most important thing we need to do is to add our firebase analytics dependency ok so yes I mean just copy it ctrl C go to the end of studio and here we need to add this quickly implementation I mean it will be difficult to write it I'm going to copy this implementation here okay then put two single quotation make sure to copy this control C and inside this single quotation you can just press Q okay then again you have one more live dependency which is the firebase in my region single quotation and then come here search for this one kongu Ville dot fire where's fire test version okay so whenever you need to add the test version all you need is just to come here to the official side of firebase and from here you can get latest versions of the dependencies for using the firebase ml kit features or firebase database or authentication whatever it is well now you can just click on the sync now okay let's come to the browser or firebase project is now created successfully so you can just click on this go to console and if you want you can just close this tab because we do not need our mean it is connected now we can use the ml fit features and if you want like to get knowledge about the firebase Kate I mean which features they basically offer for machine learning purposes then I will provide this thing in the description down below you can just I mean go through to it like you can use it for the recognized X deduct fares you scan barcodes level immediate speed up and track objects and recognized landmarks here you can see I mean all things they have already mentioned here okay you can see it so we are just sweating okay so it is saying successfully now let's do it but before doing that one thing which we need to add is hem can see we have this recognized text okay come here click on that click Android and this is you halt I mean thing which they explain here which we did till now I mean okay and one thing which you need to add is over manifest fire file which is this thing metadata okay copy this metadata you step four okay and just come here androidmanifest.xml and all you're gonna do is now we have to pass that inside our application there you can see it so here you can see activity and inside our man activity out there you can just ask it here okay so application then we have over this activity which is basically over man activity and then inside here we have passed our this meta data you can see it so yeah so let's come back to the main activity and we have already write code for capturing the image and I mean get their data and display it on our image view so we have to just call this method here in our this capture image dot set one click listener event okay so just call this method here now the next thing is to drag the text from there when user click on the edit text button so yeah the extract button what set on click listener on click listener now in here we can call a method which will be our give name deduct text from image and now let's clear this method you can just click here create method inside of an activity and this method is created here successful here you can see it let's just move it to the bottom control X from here and let's just paste it here at the bottom just unique Mac makeover code clean okay before we proceed let me tell you one thing now 99% of people who are watching this will be the students I know that I mean you all on it there will be students from colleges all from universities so the problem here is that if we go with this latest version of the firebase ml region then basically you will be needing to use the Google cloud platform for the firebase cloud text recognition and which is not free for that you have to connect your card with Google cloud platforms I mean to use their services okay so we cannot use this test words and since many of you will be students from colleges or universities so what we are going to do in order to use the free was a free thing I mean to use this Google this firebase ml kit I mean this text recognition specifically you can use it for free if we downgrade our version from 23 to 16 because the version which is 16 on vo 16 is free but now above version from the 16 we have to connect our credit card to the Google cloud platform okay so I mean we have to use it for free so for that I must suggest that please don't read this to 16 or instead of it the I mean the one which will work accurately is 15 point 0.0 okay fire best email region and for that we can use the fire score alongside with it and the version for this will be 1502 so make sure to do these changes okay for the ml region we have 15 point 0 point 0 and for the firebase called 15 point zero point 2 and then sync now because I mean this was in contain the text deduction built-in plus instance with the help of which we can do the text SEC ignition while in the latest version we use the Google cloud platform and the firebase text cloud recognition I think something like that which is I mean for that we have to connect our credit card to the Google cloud platform so that is why we are not using the latest version is 23 for the 5s okay so make sure that you do these changes and which is three hundred percent free okay don't worry I will also test the app in front of you guys and this is freely available okay so yeah now the next thing is here inside our text deduct text from Amy we can now create an instance of the fire switchin image region image ahem as far as with an image equals true and here basically we have to pass our image bitmap to it okay so we can save our best with an image dot from bitmap and past the image will have to it now we can say firebase so from capital F which is firebase which in faith deductr sorry doctor it instead deductr by the way we have already made you do tutorial on the face detection okay so you can also check that video tutorial let's give it a name as firebase within text without a push for this we do not get instance don't get vision text deductr vision tax-deductible sweden deductr within text dr. dot deduct in him and pass this fire this region beach to it dot add on success listener new on success listener now here make sure to put a semicolon and here let's also add an add on failure listener so that it can also display error message in case if in here you on failure listener so here all we will need is just to display our toast message we can say error and then by using concatenation sign works by using this exception e you can get the u dot i mean the error message or get message okay also let display this I mean if any failure occurred so we can display that error also in the logcat sold si log dot d and here we can say error and past this you don't get message here oh sorry not this congratulations and plus here you need to put a comma okay so for the string parameter and the other one is you got your message so that's it okay now the next thing is to to display the text on the test tube okay so for that first of all I mean we have let's first period another method for it okay which is which will be this layer text from damage after the reduction so let's just also make sure to pass this firebase text as a parameter to it now let us just hear this method now our main activity and here you can see it squared it now inside here we have to get all the blocks of the I mean all the text box and we'll have to check if let's say you capture an image and that image basically do not contain any text so we have to tell the user that there is no text available in this image I mean you have to check it so for that we can just sell lists firebears which are text dot block let's give it a name is block list equals to text dot get blocks sorry and the name is basically this one firebase within text blocks okay if block list dot size become equals to zero then we have to display a toast message to the user that is no text found in image and then in the else statement what we can do is by using the for each loop and say best vision text dot block call them for where Sweden text dot get blocks that just get the text so let's create a variable text equals to the place dot get text so let's just give it a name as remove this first here we can say block and then here we can say a block dot get text and once we get the text we have to display it on our text view so text view dot set text and pass the text variable to it so everything is completed now but before testing we have that just got here activity man dot XML file and here what I want is that to remove this default text from this textview okay so inside the States let's leave this textview empty okay now the next thing is come back to the main activity and whenever the user click on the button which is over captured in each button what we need to do is to text to dot set text I mean we have to make this null always okay whenever user click bet on the capturing each button now we will see what basically it will do so now connect to your veil and with food and now let this test for communication my offer is connected now just click OK they'll be running now so please wait for it it will take few seconds so the application is running now successfully you can see it now let's click on this capture image button so you can see my phone camera is on off you can see it I'm just moving it ok now the next thing is I mean I just Google some text images here ok just to test the application so I open this ugly image name I mean you can see it just take picture from here so for now I am testing the application in the I mean in the vertical my phone is in the vertical position here you can see it okay so let's just capture it and then after it we will test it in the landscape mode also so let's just take a picture now and capture it and here you can see it and this is the image which we captured okay now you can just click on this deduct text button let's see what happens so here you can see it it is working fine 100% accurately one line for me okay now let's again click on this capture image button to see for to test it for the replication now I am going to change the image here okay so yeah here you can see this is another image now what I'm going to do is I'm going to return my phone in the landscape mode just to see if it is working in the landscape mode or not okay let's just take a picture here and now let's see what happens so now just click on this duck text button and here you can see it Wow I mean it get exactly as it is in the picture okay alongside with this quotation and exclamation marks my heart is always yours so I mean that is working really nice that is really incredible so I hope you have liked this video tutorial if you have anyone you do to our channel and please subscribe our channel coding cafe thumbs up for this video and yeah don't forget to follow me on my Twitter account for recent updates take care of yourself and bye for now

Channel: Coding Cafe

Views: 60,311

Keywords: firebase ml text recognition, firebase ml kit text recognition, text recognition android studio, text recognition app - android studio - java, text recognition by camera using google vision, text recognition apps, text recognition app, recognize text in images with ml kit on android, android take picture and save, android machine learning, android machine learning tutorial, android machine learning projects, android artificial intelligence tutorial

Id: fmTlgwgKJmE

Length: 34min 49sec (2089 seconds)

Published: Mon Sep 30 2019