How to Develop an Image Editing App with Image Kit? — Part 1
✨ What is Huawei Image kit?
Nowadays, image editing is a must in image related applications like social media/network apps. To editing images Huawei offers the Image Kit. Huawei Image Kit provides Image Vision service for 24 unique color filters and Image Render service for five basic animations and nine advance animations. Huawei describes the image kit as “HUAWEI Image Kit incorporates powerful scene-specific smart design and animation production functions into your app, giving it the power of efficient image content reproduction while providing a better image editing experience for your users.”. Also all APIs provided by the Image Kit are free of charge.
⚠️ Restrictions
Image kit supports Huawei devices with HMS Core version 4.0.2 or later and with Android 8 or later. Also Image Kit 1.0.3 version can be used on non-Huawei mobile devices if you add the fallback-SDK dependency.
Image Vision service
- Filter: The image size is not greater than 15 MB, the image resolution is not greater than 8000 x 8000, and the aspect ratio is between 1:3 and 3:1.
- Smart layout: The aspect ratio is 9:16, and the image size is not greater than 10 MB. If the aspect ratio is not 9:16, the image will be cropped to the aspect ratio of 9:16.
- Image tagging: The recommended image resolution is 224 x 224 and the aspect ratio is 1:1.
- Image cropping: The recommended image resolution is greater than 800 x 800.
- A larger image size can lead to longer parsing and response time as well as higher memory and CPU usage and power consumption.
Image Render service
- The recommended image size is not greater than 10 MB. A larger image size can lead to longer parsing and response time as well as higher memory and CPU usage and power consumption, and can even result in frame freezing and black screen. To ensure interactive effects, only full-screen display is supported for animation views; that is, the animation view returned by the Image Render service can only be displayed in full screen. If the performance of a mobile phone is not sufficient for animation recording, set the GIF compression rate to 0.3 or lower and the frame rate to 20 or lower.
For detailed explanations and information on restrictions.
🚧 Development Process
To start our development of image editing app first, we need to integrate the HMS Core. It is mandatory to use HMS kits and services. You can use these guides to complete integration of HMS Core.
After we integrated HMS Core to our project we need to declare required permissions to AndroidManifest.xml file
And finally we need to add dependencies to our application level gradle file. You can take a look at the version changes for Image Kit here.
When we sync project with gradle files, we are ready to start our coding for simple photo editing application.
🔴 Step 1: Base Activity
First we will create a base activity to extend both Image Render and Image Vision functionality. Base activity will contain a function to create a JSONObject which we can simply call authJson. This variable will contain some parameters for authentication.
This are the descriptions for parameters in authJson and you can find this values in “agconnect-services.json” file except token. Token is optional in general but it is mandatory for cloud services such as smart layout and theme tagging. Here is the documentation for how to obtain a token.
🟠 Step 2: Image Render
We will develop Image Render activity first. For that we need to create a path for our sources. Then ask user for permissions, initialize view and initialize authJson by calling “initAuthJson” function.
To use Image Render capabilities we need to initialize it. We can accomplish this by getting an instance of Image Render. If ImageRender instance is successfully obtained, the onSuccess method will be called and we will call “initRenderView” to initialize our views for render. If anything goes wrong the onFailure method will be called and we can log the error.
After a successful attempt we initialized our variable with ImageRender instance and we can start initializing our render view. In “initRenderView” function we will null check our imageRenderAPI variable and if it is good to go we can simply start getting our initialization result. In a successful initialization, result will be “0”. Huawei documentation explain this render view process as “After the getRenderView() API is called, the Image Render service parses the image and script in sourcePath and returns the rendered views to the app. User interaction is supported for advanced animation views, such as particles and ripples. For better interaction effects, it is recommended that the obtained rendered view be displayed in full screen.” Also there is second method to obtain views.
If you want an explanation for both method you can take a look at this documentation.
Since our initializing functions are ready we can start writing our permission function. We need write to external storage permission to copy our asset to storage and render them for view.
I am using a spinner for animations so we are going to initialize it in “initView” function which we are calling it on “onCreate”.
When user changes selected animation we should remove all views from our frame layout and remove render view from our image render instance.
To copy our asset to our source path for playing animation we need a simple function. We will call this function after we get our permission to write external storage.
Since we completed our development for our needs, we only need a function to start our selected animation. To play an animation we only need a one line of code.
And finally we have a simple photo application which can display fourteen different animation. 🤗 Here is an example of our product after it is done.
Thanks to the new version of Image Render we can pause and resume our animations.
Also as a new feature we can record our animations as .gif or .mp4 formatted files. You can see the JSON parameters with description below. If you want a brief explanation for this you can find it here in eighth step.
All of this animations can be edited and Huawei offer us a very detailed documentation. Which you can find it here:
Also here is the result codes of Image Render. You can check it out for when you encounter a problem or just for more information. Document contains result codes with descriptions and offered solutions.
💡 Conclusion
Huawei Image Kit provides us a handful tool for image related operations. As you can see we can use Image Render functionality for animations. We can use this animations as lock screen or as wallpaper. So you can create a lock screen/wallpaper/theme creation application. Image Render can fell a little complicated at first but in reality it give us a easy way to animated our images.
In this part we talked about Image Render and developed an application which can display image animations. Next part we are going to talk about Image Vision and develop a filtering functionality with new features of Image Kit. You can find the GitHub repository of this project in references below. I hoped this post gave an brief understanding of Huawei Image Kit and helped you with Image Render service.
