Expert: Directory App MVVM Jetpack (HMS Account and AuthService) in Android using Kotlin- Part-1

Overview

In this article, I will create a Directory android application using Kotlin in which I will integrate HMS Core kits such as HMS Account and AuthService Kit.

App will make use of android MVVM clean architecture using Jetpack components such as DataBinding, AndroidViewModel, Observer, LiveData and much more.
In this article we are going to implement DataBinding using Observable pattern.

Huawei ID Service Introduction
Huawei ID login provides you with simple, secure, and quick sign-in and authorization functions. Instead of entering accounts and passwords and waiting for authentication, users can just tap the Sign in with HUAWEI ID button to quickly and securely sign in to your app with their HUAWEI IDs.

Prerequisite
1.Huawei Phone EMUI 3.0 or later.
2.Non-Huawei phones Android 4.4 or later (API level 19 or higher).
3.HMS Core APK 4.0.0.300 or later
4.Android Studio
5.AppGallery Account

App Gallery Integration process
1.Sign In and Create or Choose a project on AppGallery Connect portal.
2.Navigate to Project settings and download the configuration file.
3.Navigate to General Information, and then provide Data Storage location.

App Development
1.Add Required Dependencies:
•Launch Android studio and create a new project. Once the project is ready.

•Navigate to the Gradle scripts folder and open `build.gradle (module: app).
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'
apply plugin: 'com.huawei.agconnect'

android {
compileSdkVersion 30
buildToolsVersion "29.0.3"

buildFeatures {

    dataBinding = true
    viewBinding = true
}


•In the same build.gradle file, add the lifecycle library to your dependencies. This library helps connect the UI to a ViewModel and LiveData.
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
//noinspection GradleDependency
implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
implementation 'androidx.core:core-ktx:1.6.0'
implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'androidx.annotation:annotation:1.3.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
implementation 'androidx.lifecycle:lifecycle-extensions:2.2.0'
implementation 'androidx.navigation:navigation-fragment-ktx:2.4.1'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'`

•Add following dependency for HMS Kits
//HMS Kits
implementation 'com.huawei.agconnect:agconnect-core:1.5.0.300'
implementation 'com.huawei.hms:hwid:5.3.0.302'

•Navigate to the Gradle scripts folder and open build.gradle (project: app).
classpath 'com.huawei.agconnect:agcp:1.4.2.300'
maven {url 'https://developer.huawei.com/repo/'}

2.Code Implementation
•Created following package model, event, viewmodel.
ViewModel: The ViewModel makes it easy to update data changes on the UI.Create a package named viewmodel in your main folder.Then create a new file and name it LoginViewModel.kt along with their FactoryViewModelProviders.

LoginViewModel.kt:
`class LoginViewModel(application: Application) : AndroidViewModel(application), Observable {

private var mAuthManager: AccountAuthService? = null
private var mAuthParam: AccountAuthParams? = null

LoginViewModelFactory.kt:
class LoginViewModelFactory : ViewModelProvider.Factory {
override fun create(modelClass: Class): T {
if(modelClass.isAssignableFrom(LoginViewModel::class.java)){
return LoginViewModel() as T
}
throw IllegalArgumentException ("UnknownViewModel")
}

}`

•Xml layout DataBinding
To include data binding in the UI, enclose all content with .
The ViewModel is introduced to the layout in the section, as shown. Ensure that the type value points to the specific folder that has the required ViewModel.
activity_main.xml:
`<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="6dp"
        android:text="Directory App "
        android:textAlignment="center"
        android:textColor="@color/white"
        android:background="@color/purple_500"
        android:textSize="34sp"
        android:textStyle="bold" />


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="16dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="SigIn / SignUp "
                android:textAlignment="center"
                android:textColor="@color/black"
                android:textSize="34sp"
                android:textStyle="bold" />


            <Button
                android:id="@+id/btn_sign"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:layout_marginBottom="5dp"
                android:background="@color/cardview_dark_background"
                android:text="Login With Huawei Id"
                android:textColor="@color/white"
                android:textStyle="bold" />
        </LinearLayout>

    </ScrollView>

</RelativeLayout>

`

package com.hms.directoryapp

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.ViewModelProviders
import com.hms.directoryapp.databinding.ActivityMainBinding
import com.hms.directoryapp.event.ActivityNavigation

class MainActivity : AppCompatActivity(), ActivityNavigation {

    private lateinit var viewModel: LoginViewModel
    private lateinit var dataBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        dataBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val viewModel: LoginViewModel by lazy {
            val activity = requireNotNull(this) {}
            ViewModelProviders.of(this, LoginViewModelFactory(activity.application))
                .get(LoginViewModel::class.java)
        }

        dataBinding.loginViewModel = viewModel
        dataBinding.lifecycleOwner = this
        viewModel.startActivityForResultEvent.setEventReceiver(this, this)
    }


    public override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        viewModel.onResultFromActivity(requestCode, data)
        super.onActivityResult(requestCode, resultCode, data)
    }

}

App Build Result

Tips and Tricks

Identity Kit displays the HUAWEI ID registration or sign-in page first. The user can use the functions provided by Identity Kit only after signing in using a registered HUAWEI ID.

Conclusion

In this article, we have learned how to integrate Huawei ID in Android application. After completely read this article user can easily implement Huawei ID in the Directory App android application using Kotlin.
Thanks for reading this article. Be sure to like and comment to this article, if you found it helpful. It means a lot to me.

References
HMS Docs:
https://developer.huawei.com/consumer/en/doc/development/HMSCore-Guides/introduction-0000001050048870