• Home
More

    Getting started with ML Kit

    Hey Guys, most of you must have watched Google’s I/O 2018. Among all the amazing things announced at I/O this year, Google announced ML Kit. Google’s ML Kit is a feature that is available in firebase and helps to get any regular person taste machine learning, without knowing the ins and outs of machine learning.

     

    Let’s get started

    Step 1 – Create a new Project in Android Studio.

    -> Empty Activity

    -> Next->Next->Next->Finish

     

    Step 2 – Once the project is created, you need to integrate firebase with your app. Firebase is a tool provided by Google. You can do this in two ways:- Manually or by using Tools->Firebase from Android Studio.

     

    Go to https://firebase.google.com

    Sign into your Google account if you haven’t already

    Click on Get Started

    Click on Add Project

    Once the project is created, Go to settings -> Project Settings(cogwheel icon on the top right corner of left pane)

     

    Under “Your apps” click Add app -> Add firebase to android app

    Enter package name of your app and click “Register”.

    Now it will provide a google_services.json file. Download it

    Now, switch to project view on android studio and copy that file to the app folder

    Add the dependency to app/build.gradle as said in next prompt

    Now, let gradle sync your project files

    Note: if it fails or you wanna sync explicitly, use Ctrl+shift+A and enter “sync project with gradle files” and select the first option.

    Hurray!, firebase is implemented

     

    Now, time to implement ML kit.

     

    In this tutorial, we will just be using Ml kit to add an image of a face and the app will tell various parameters based on the face. (Just the happiness probability of a person, for now, based on the image)

    In your firebase project window, click ML kit option from the left pane.

    Click get started -> Face detection -> Get Started

     

    Click on Android in next window.

     

    Add the dependencies as said in the next window

     

    Now, in your Switch to Android view in the left pane in the android studio.

    Go to layout/res/MainActivity.xml

    Change ConstraintLayout to LinearLayout.

    Add a textview

    Add a two buttons

    Your activity_main.xml should look identical to :

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".MainActivity">
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:id="@+id/details" />
       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Gallery"
           android:id="@+id/gallery"/>
       <Button
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Camera"
           android:id="@+id/camera"/>
    </LinearLayout>

    Now head on to MainActivity.java

    We need to add variables for the textview and both of the buttons. Add them as global variables so that you can access them all throughout the program. But, note: DO NOT INITIALISE THEM OUTSIDE ANY METHOD LIKE onCreate. THIS WILL LEAD TO NULL POINTER EXCEPTION.

    Don’t worry, I’ll link you to my MainActivity.java file and you can refer to that in case you want.

    Now that we are done declaring the variables, we need to initialize them. We need to do this inside any method which gets executed during runtime. As ours is a very basic app, we can be better off initializing them inside onCreate method of MainActivity.java.

     

    details = findViewById(R.id.details);
    
    gallery = findViewById(R.id.gallery);
    
    camera = findViewById(R.id.camera);

     

     

     

    This will do the job.

     

    Now, according to the Google’s machine learning documentation, we need to add some methods. Here, everything is handled by the classes provided by Firebase and we need not do any external coding ourselves, thus it reduces code size and we can get started easily.

     

    Now, for this job, we use an external library called EasyImage. We use this to pick images from the camera or the gallery. https://github.com/jkwiecien/EasyImage You can follow its documentation here. As the name suggests, it’s really easy to use. You just need to add jitpack to the project level build.gradle and a dependency on the app level build.gradle. Sound jargon? Let’s do it.

     

    In the android studio, under Gradle Scripts, you will find two Build.gradle files. Open the first one.

     

    allprojects {
    
       repositories {
    
           google()
    
           jcenter()
    
           maven {
    
               url "https://jitpack.io" //Jitpack  This should be present.
    
           }
    
    
    
       }
    
    }

     

    Add <code> implementation  ‘com.github.jkwiecien:EasyImage:1.3.1’ </code>

    To the app level build.gradle

     

    Both your files should look such.

    Now we are done with the library adding part. All we need to do now is to work on picking the image from camera or the gallery and feeding it to the apt Firebase class.

     

    We have got two buttons, remember?

    We need to set clicklisteners to both of them so that on clicking each one a specific activity is triggered.

    When we click the “Gallery” button, we use EasyImage to open the gallery picker and when we use the “Camera” button, we use EasyImage to open the camera picker.

     

    Once image picking is successful, EasyImage provides callback methods via an overridden function so that we can manipulate the image as per our needs. You just need to follow EasyImage’s documentation.

     

    In the onImagePicked method, we assign use firebase methods to pass on the image to firebase methods. You may refer to my MainActivity.java for the methods.

     

    Now that everything is done, we call <code> EasyImage.openCamera(MainActivity.this, 100); </code>

    Note: The second parameter in the above method is called the request code. It can be any arbitrary integer. It’s required only when we have more than one activity and need to use methods like startActivityForResult(). For more info, you may refer the android docs. For now, no need to worry much about it.

    In both the clicklisteners.

     

    camera.setOnClickListener(new View.OnClickListener() {
    
       @Override
    
       public void onClick(View view) {
    
           //Opens camera dialog
    
           EasyImage.openCamera(MainActivity.this, 100);
    
       }
    
    });
    
    
    
    gallery.setOnClickListener(new View.OnClickListener() {
    
       @Override
    
       public void onClick(View view) {
    
           //Opens gallery picker
    
           EasyImage.openGallery(MainActivity.this, 100);
    
       }
    
    });

    Voila, the app is ready.

    Code – https://github.com/jashasweejena/Ml-Kit-face-detection .

     

    Stay tuned with Tech Includes to get more insight knowledge about Programming and Tips and Tricks in Computer Science. Peace.

    Recent Articles

    Huawei Mate 30 Pro – No Horizon for Innovation

    With the tag “Rethink Possibilities”, Huawei launched its all-new Huawei Mate 30 Pro with some interesting specs. Few of them are Horizon...

    Apple Watch Series 5 – A Worthy Upgrade?

    Everyone was really hyped about the Apple Event which was held on 10th September 2019. As everyone was hoping for something new...

    iPhone 11: The Final Rumors

    With the launch of iPhone X, the Xs and the Xs Max, Apple took it to the next level for smartphone manufacturers....

    Huawei Mate 30 Series – The Good, the Bad, the Ugly

    Huawei has been making its mark in the major league industry since its inception. It has given a tough competition to any...

    Android 10: Here’s everything you need to know

    Android Q is the 10th version of Android, which is coming up with loads of surprises. Earlier this year, everyone was hyped...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox