Creating an Animated Splash Screen with Image Kit - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
Original link: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201334296322460044&fid=0101187876626530001
Introduction
Do you already know Image Kit? If you havent have the opportuniy to use it, Image Kit incorporates intelligent design and animation production functions in your App. Giving us the power of efficient image reproduction while providing image editing for our users.
For this example we will use the Image Render service. This service provides us with basic animation effects and nine advanced ones. In this example we will create an animated Splash Screen where we will apply the Waterfall effect. Without further ado let's see the steps to follow
Steps:
1. Download the Image Render Example code
2. Create an App in AGC
3. Connect our Android project with the App
4. Downloading the necessary repositories
5. Create our Splash Screen
6. Add the necessary assets manifest.xml for our animation
7. Obtain the instance
8. Initialize the Rendering service
9. Run the animation
10. After the execution we launch the Main Activity
Download the Image Render Example code
In order to implement this functionality we must download the source code provided by the developer Huawei, this is the link to the repository.
https://github.com/huaweicodelabs/ImageKit
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
You can git clone or download the zip to your computer. I recommend that you run the app. In my case there were some problems with my version of gradle. In case the same thing happens to you. What I did was download the Gradle version of my project, use the following one and you modify this in the gradle-wrapper.properties file
Code:
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip
Run the app so that you know how the Image Render works.
Create an App in AGC
In order to use this service it will be necessary to have an App in AGC. I share a guide so that you can create an App and when creating an App and a project in AGC you will have the instructions to be able to add the necessary elements to your App.
https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#1
Connect our Android project with the App
To connect them we need to add the following lines
. Configure the Maven repository address and AppGallery Connect plug-in in the project's build.gradle file.
Go to allprojects> repositories and configure the Maven repository address for the HMS Core SDK
Code:
allprojects {
repositories {
maven { url 'https://developer.huawei.com/repo/' }
...
}
}
Go to buildscript > repositories and configure the Maven repository address for the HMS Core SDK.
Code:
buildscript {
repositories {
maven {url 'https://developer.huawei.com/repo/'}
...
}
...
}
Go to buildscript > dependencies and add dependency configurations
Code:
Buildscript {
dependencies {
classpath 'com.huawei.agconnect:agcp:1.3.1.300'
}
}
Configure the dependency package in the app's build.gradle file.
Add a dependency package to the dependencies section in the build.gradle file.
Code:
dependencies {
...
implementation 'com.huawei.hms:image-render:1.0.2.302'
...
}
Downloading the necessary repositories
Configure the dependency package in the app's build.gradle file.
Add a dependency package to the dependencies section in the build.gradle file.
Code:
dependencies {
...
implementation 'com.huawei.hms:image-render:1.0.2.302'
...
}
Configure minSdkVersion
android {
...
defaultConfig {
...
minSdkVersion 26
...
}
...
}
Add the AppGallery Connect plug-in dependency to the file header.
Code:
apply plugin: 'com.huawei.agconnect'
Create our Splash Screen
Create our style
Code:
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash_background</item>
</style>
Add our Activity to the manifest
Code:
<activity android:name="SplashActivity"
android:theme="@style/SplashTheme"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN"
/>
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
We also need to add these permissions
Code:
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
Splash Activity
For the Splash we need to pause the main thread we declare a time in milliseconds
Code:
private final int DURACION_SPLASH = 8500;
private void onUIThread(){
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent intent = new Intent(SplashActivity.this, MainActivity.class);
//SplashActivity.this.startActivity(intent);
}
},DURACION_SPLASH);
}
We get the instance
For this I have created a method we call initImageRender () and we call it from onCreate ()
Code:
private void initImageRender() {
// Obtain an ImageRender object.
ImageRender.getInstance(this, new ImageRender.RenderCallBack() {
@Override
public void onSuccess(ImageRenderImpl imageRender) {
Log.i(TAG, "getImageRenderAPI success");
imageRenderAPI = imageRender;
useImageRender();
}
@Override
public void onFailure(int i) {
Log.e(TAG, "getImageRenderAPI failure, errorCode = " + i);
}
});
}
Now we initialize the Service for this We will have to pass it the path of the file that we will use from splash
Code:
private void useImageRender() {
// Initialize the ImageRender object.
if (imageRenderAPI == null) {
Log.e(TAG, "initRemote fail, please check kit version");
return;
}
Log.d(TAG, sourcePath);
int initResult = imageRenderAPI.doInit(sourcePath, getAuthJson());
Log.i(TAG, "DoInit result == " + initResult);
if (initResult == 0) {
// Obtain the rendered view.
RenderView renderView = imageRenderAPI.getRenderView();
if (renderView.getResultCode() == ResultCode.SUCCEED) {
View view = renderView.getView();
if (null != view) {
// Add the rendered view to the layout.
contentView.addView(view);
int playResult = imageRenderAPI.playAnimation();
} else {
Log.w(TAG, "GetRenderView fail, view is null");
}
} else if (renderView.getResultCode() == ResultCode.ERROR_GET_RENDER_VIEW_FAILURE) {
Log.w(TAG, "GetRenderView fail");
} else if (renderView.getResultCode() == ResultCode.ERROR_XSD_CHECK_FAILURE) {
Log.w(TAG, "GetRenderView fail, resource file parameter error, please check resource file.");
} else if (renderView.getResultCode() == ResultCode.ERROR_VIEW_PARSE_FAILURE) {
Log.w(TAG, "GetRenderView fail, resource file parsing failed, please check resource file.");
} else if (renderView.getResultCode() == ResultCode.ERROR_REMOTE) {
Log.w(TAG, "GetRenderView fail, remote call failed, please check HMS service");
} else if (renderView.getResultCode() == ResultCode.ERROR_DOINIT) {
Log.w(TAG, "GetRenderView fail, init failed, please init again");
}
} else {
Log.w(TAG, "Do init fail, errorCode == " + initResult);
}
}
Add the necessary assets manifest.xml for our animation
We need to add to our folder assets manifest.xml file which is the animation.
Obtain the instance
Now we have to get the instance of the ImageRender
Code:
private void initImageRender() {
// Obtain an ImageRender object.
ImageRender.getInstance(this, new ImageRender.RenderCallBack() {
@Override
public void onSuccess(ImageRenderImpl imageRender) {
Log.i(TAG, "getImageRenderAPI success");
imageRenderAPI = imageRender;
useImageRender();
}
@Override
public void onFailure(int i) {
Log.e(TAG, "getImageRenderAPI failure, errorCode = " + i);
}
});
}
If everithing goes well we should get printed in the console the following message
Code:
getImageRenderAPI success
Initialize the Rendering service
Once that the instance has been initialized we can init the service by executing the doInit() method
Code:
Log.d(TAG, sourcePath);
int initResult = imageRenderAPI.doInit(sourcePath, getAuthJson());
Log.i(TAG, "DoInit result == " + initResult);
if (initResult == 0) {
// Obtain the rendered view.
RenderView renderView = imageRenderAPI.getRenderView();
if (renderView.getResultCode() == ResultCode.SUCCEED) {
View view = renderView.getView();
if (null != view) {
// Add the rendered view to the layout.
contentView.addView(view);
int playResult = imageRenderAPI.playAnimation();
} else {
Log.w(TAG, "GetRenderView fail, view is null");
}
} else if (renderView.getResultCode() == ResultCode.ERROR_GET_RENDER_VIEW_FAILURE) {
Log.w(TAG, "GetRenderView fail");
} else if (renderView.getResultCode() == ResultCode.ERROR_XSD_CHECK_FAILURE) {
Log.w(TAG, "GetRenderView fail, resource file parameter error, please check resource file.");
} else if (renderView.getResultCode() == ResultCode.ERROR_VIEW_PARSE_FAILURE) {
Log.w(TAG, "GetRenderView fail, resource file parsing failed, please check resource file.");
} else if (renderView.getResultCode() == ResultCode.ERROR_REMOTE) {
Log.w(TAG, "GetRenderView fail, remote call failed, please check HMS service");
} else if (renderView.getResultCode() == ResultCode.ERROR_DOINIT) {
Log.w(TAG, "GetRenderView fail, init failed, please init again");
}
} else {
Log.w(TAG, "Do init fail, errorCode == " + initResult);
}
Run the animation
Once that we have initialized and init the Image Render is time to play the animation
So Now we have to add a View to our Activity and play the animation
Code:
if (null != imageRenderAPI) {
int playResult = imageRenderAPI.playAnimation();
if (playResult == ResultCode.SUCCEED) {
Log.i(TAG, "Start animation success");
} else {
Log.i(TAG, "Start animation failure");
}
} else {
Log.w(TAG, "Start animation fail, please init first.");
}
Conclusion
With this little example we haver started with the implementation of Image Kit in one project. For further information here you have docs.
https://developer.huawei.com/consumer/en/hms/huawei-imagekit/

---

Can we do like gif animation using Image kit?