Make an Image Editing Application in 10 Minutes
In this article, we will be creating a sample application that can create a Depth of Field effect without any DSLR, using the HMS ML Kit.
Join the DZone community and get the full member experience.Join For Free
We will use the HMS ML Kit in order to complete the following tasks:
Extract a user from an image using Image Segmentation,
Add Blur effect on the image,
Create a new wonderful result using Huawei ML Kit.
We will be using both the camera and gallery as input.
To use the demo, go to AppGallery and download the above application. Edit IT.
As we are using cloud services here, Internet connectivity is required.
Steps to Build the Application
1. Add Maven URL in buildscript and allprojects.
2. Add classpath.
3. Add the below dependency in the app level Gradle file.
4. Add the below permissions in the manifest file.
5. Add the below code to auto-update the model when a new one arrives on the server.
Open your main activity and add 2 buttons. With one, you can open a gallery, and with another, you can open a camera.
Below is the code for both of them.
6. Upload by Camera
7. Upload by Gallery
After the pic selection, the control will come inside
onActivityResult(), where you will get the result bitmap. This bitmap we have to pass on to the
8. Add the below
imageSegmentation()method in activity or ViewModel as per your application design.
Create a copy of the previously fetched bitmap and pass it to this method.
This method is using a copy image and extracting the human boy from it. If the response is successful, we will get the callback inside
addOnSuccessListener(). Finally, it saves the extracted image, which only contains a human body.
Create a SeekBar with the below properties and call the
blurRenderScript()method if the progress of SeekBar is changed.
The range of SeekBar is from 0 to 100, but in our blurRenderScript, we are cannot accept a value above 25; hence we are using the relative value of SeekBar progress by dividing it by 4.
9. Below, two methods are used to fetch a bitmap and create a blur effect on top of it.
10. Once your background image is blurred, you can combine the previously extracted body image on top of the blurred image. By this, without any masking, you will get a radius blur effect inside your picture.
11. Last but not least, below is how we can request runtime permissions.
12. Here, we will get control over whether the permission is granted or revoked.
Finally, your app is ready to test. I hope you enjoyed creating this application.
Opinions expressed by DZone contributors are their own.