Integration of Huawei Remote Configuration in Quiz Android app (Kotlin) – Part 3
Tags: remoteconfig, kotlin, xml, android
Published: 2022-05-30 08:06:22


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9e3u3bzbc47ti5e4j3n.png)
**Introduction**
In this article, we can learn how to fetch the quiz questions and answers to sports from the server using **Huawei Remote Configuration**. Suppose you want to add any extra questions or delete any questions on the application, this Remote configuration helps to change the content without changing the code. Users can just change the content in the JSON format so that it will display the same in the app. So, I will provide a series of articles on this **Quiz App**, in upcoming articles.

If you are new to this application, follow my previous articles.
[https://forums.developer.huawei.com/forumPortal/en/topic/0202877278014350004](https://forums.developer.huawei.com/forumPortal/en/topic/0202877278014350004)

[https://forums.developer.huawei.com/forumPortal/en/topic/0201884103719030016?fid=0101187876626530001](https://forums.developer.huawei.com/forumPortal/en/topic/0201884103719030016?fid=0101187876626530001)

**What is Huawei Remote Configuration?**
**Huawei Remote Configuration** is a cloud service. It changes the behavior and appearance of your app without publishing an app update on App Gallery for all active users. Basically, Remote Configuration allows you to maintain parameters on the cloud, based on these parameters we control the behavior and appearance of your app. In the festival scenario, we can define parameters with the text, color, and images for a theme which can be fetched using Remote Configuration.

**Configuration in AGC**

- Sign in to [AppGallery Connect](https://developer.huawei.com/consumer/en/service/josp/agc/handleAllianceLogin.html?_=20220426193610) and select My apps.
- Select the app in which you want to integrate Huawei Remote configuration Service.
- Navigate to **Grow > Remote configuration** and click **Use now**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1jxde89r5u7w2vuzsnn.JPG)

- Click **New parameter**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9d8hqmxejtl7za7009p.JPG)

- Enter the **Parameter name**, json format content in **Default value**, **Description**, and then click **Save**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwe81ye42x2flew5gkhw.JPG)

Note: Once you add or edit the JSON format content in Default value, it will take 12 hours to return in the app.

**Requirements**
1. Any operating system (MacOS, Linux, and Windows).
2. Must have a Huawei phone with HMS 4.0.0.300 or later.
3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 and above installed.
4. Minimum API Level 24 is required.
5. Required EMUI 9.0.0 and later version devices.

**How to integrate HMS Dependencies**

- First register as Huawei developer and complete identity verification on the Huawei developers website, refer to register a [Huawei ID](https://developer.huawei.com/consumer/en/doc/start/registration-and-verification-0000001053628148).

- Create a project in android studio, refer [Creating an Android Studio Project](https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#1).

- Generate a **SHA-256 certificate fingerprint**.

- To generate **SHA-256 certificate fingerprint**. On right-upper corner of android project click **Gradle**, choose **Project Name > Tasks > android**, and then click **signingReport**, as follows.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1hsnelemza12o22v99w.png)

Note: Project Name depends on the user created name.

- [Create an App in AppGallery Connect](https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#0).

- Download the **agconnect-services.json** file from **App information**, **copy** and **paste** in android **Project** under **app** directory, as follows.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm2d1csjr6n8na7un08h.png)

- Enter **SHA-256 certificate fingerprint** and click **Save** button, as follows.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojz8x4wpl7fs9ia838a6.png)


- Click **Manage APIs** tab and enable **Remote Configuration** and **HUAWEI Analytics**.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzt2bycdy9oqighodypx.jpg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hyj5pimffktee6qpp4hb.jpg)

- Add the below maven URL in **build.gradle(Project)** file under the repositories of **buildscript**, **dependencies** and **allprojects**, refer [Add Configuration](https://developer.huawei.com/consumer/en/codelab/HMSPreparation/index.html#6).

```
maven { url 'http://developer.huawei.com/repo/' }
classpath 'com.huawei.agconnect:agcp:1.6.0.300'

```

- Add the below plugin and dependencies in **build.gradle(Module) file**.
```
apply plugin: id 'com.huawei.agconnect'
// Huawei AGC
implementation 'com.huawei.agconnect:agconnect-core:1.6.0.300'
// Huawei Analytics Kit
implementation 'com.huawei.hms:hianalytics:6.4.0.300'
// Remote Config
implementation 'com.huawei.agconnect:agconnect-remoteconfig:1.6.5.300'
```

- Now Sync the gradle.
- Add the required permission to the **AndroidManifest.xml** file.
```
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
```

**Let us move to development**
I have created a project on Android studio with empty activity let us start coding.
In the **SportsActivity.kt** we can find the business logic for android questions.
```
class SportsActivity : AppCompatActivity(), View.OnClickListener {

    private var pCurrentPosition: Int = 1
    private var pQuestionsList: ArrayList<SportQuestions>? = null
    private var pSelectedOptionPosition: Int = 0
    private var pCorrectAnswers: Int = 0
    private var layout: LinearLayout? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sports)

        layout = findViewById(R.id.Layout_container)
        layout!!.visibility = View.GONE

        txt_option1_spt.setOnClickListener(this)
        txt_option2_spt.setOnClickListener(this)
        txt_option3_spt.setOnClickListener(this)
        txt_option4_spt.setOnClickListener(this)
        btn_spt_submit.setOnClickListener(this)

        pQuestionsList = ArrayList<SportQuestions>()
        // Remote Configuration Fetching
        val config : AGConnectConfig= AGConnectConfig.getInstance()
        config.fetch(0).addOnSuccessListener {
            config.apply(it)
            val value = config.getValueAsString("remoteconfig_ques")
            parseQuestion(value)
            setQuestion()
        }.addOnFailureListener {
        }

    }
    // Parse the questions in array format
    private fun parseQuestion(value : String) {
        val jsonObject : JSONObject = JSONObject(value)
        val questions : JSONArray = jsonObject.getJSONArray("questions")
        for (i in 0 until questions.length()) {
            val q: JSONObject = questions.getJSONObject(i)
            val question = q.getString("question")
            val option1 = q.getString("option1")
            val option2 = q.getString("option2")
            val option3 = q.getString("option3")
            val option4 = q.getString("option4")
            val answer = q.getString("answer")
            val id = q.getString("id")
            val sportQuestions  = SportQuestions(id.toInt(),question, option1,option2,option3,option4,answer.last().digitToInt() )
            pQuestionsList?.add(sportQuestions)
            layout!!.visibility = View.VISIBLE
        }
    }

    private fun setQuestion() {
        val question = pQuestionsList!![pCurrentPosition -1]
        defaultOptionsView()
        if(pCurrentPosition == pQuestionsList!!.size){
            btn_spt_submit.text = "FINISH"
        } else {
            btn_spt_submit.text = "SUBMIT"
        }
        progressBar_spt.progress = pCurrentPosition
        txt_progress_spt.text = "$pCurrentPosition" + "/" + progressBar_spt.max
        txt_sptquestion.text = question!!.spt_questions
        txt_option1_spt.text = question.spt_option1
        txt_option2_spt.text = question.spt_option2
        txt_option3_spt.text = question.spt_option3
        txt_option4_spt.text = question.spt_option4
    }

    private fun defaultOptionsView() {
        val options = ArrayList<TextView>()
        options.add(0, txt_option1_spt)
        options.add(1, txt_option2_spt)
        options.add(2, txt_option3_spt)
        options.add(3, txt_option4_spt)
        for(option in options){
            option.setTextColor(Color.parseColor("#7A8089"))
            option.typeface = Typeface.DEFAULT
            option.background = ContextCompat.getDrawable(this, R.drawable.border_bg)
        }
    }

    override fun onClick(v: View?) {
        when(v?.id){
            R.id.txt_option1_spt -> {
                selectedOptionView(txt_option1_spt, 1)
            }
            R.id.txt_option2_spt -> {
                selectedOptionView(txt_option2_spt, 2)
            }
            R.id.txt_option3_spt -> {
                selectedOptionView(txt_option3_spt, 3)
            }
            R.id.txt_option4_spt -> {
                selectedOptionView(txt_option4_spt, 4)
            }
            R.id.btn_spt_submit -> {
                if(pSelectedOptionPosition == 0){
                    pCurrentPosition++
                    when{
                        pCurrentPosition <= pQuestionsList!!.size -> {
                            setQuestion()
                        } else  -> {
                        val intent = Intent(this, SportsResultActivity::class.java)
                        intent.putExtra(SportConstants.TOTAL_SPT_QUESTIONS, pCorrectAnswers)
                        intent.putExtra(SportConstants.CORRECT_SPT_ANSWERS, pQuestionsList!!.size)
                        startActivity(intent)
                    }
                    }
                } else {
                    val question = pQuestionsList?.get(pCurrentPosition -1)
                    if(question!!.spt_correctAnswer != pSelectedOptionPosition){
                        answerView(pSelectedOptionPosition, R.drawable.wrong_bg)
                    } else {
                        pCorrectAnswers ++
                    }
                    answerView(question!!.spt_correctAnswer, R.drawable.correct_bg)
                    if(pCurrentPosition == pQuestionsList!!.size){
                        btn_spt_submit.text = "FINISH"
                    } else {
                        btn_spt_submit.text = "Next Question"
                    }
                    pSelectedOptionPosition = 0
                }
            }
        }
    }

    private fun answerView(answer:Int, drawableView:Int){
        when(answer) {
            1 -> {
                txt_option1_spt.background = ContextCompat.getDrawable(this, drawableView)
            }
            2 -> {
                txt_option2_spt.background = ContextCompat.getDrawable(this, drawableView)
            }
            3 -> {
                txt_option3_spt.background = ContextCompat.getDrawable(this, drawableView)
            }
            4 -> {
                txt_option4_spt.background = ContextCompat.getDrawable(this, drawableView)
            }
        }
    }

    private fun selectedOptionView(tv: TextView, selectedOptionNum: Int){
        defaultOptionsView()
        pSelectedOptionPosition = selectedOptionNum
        tv.setTextColor(Color.parseColor("#363A43"))
        tv.setTypeface(tv.typeface, Typeface.BOLD)
        tv.background = ContextCompat.getDrawable(this, R.drawable.select_bg)
    }

}
```

In the **SportsResultActivity.kt** we can find the business logic for android result view.
```
class SportsResultActivity : AppCompatActivity() {
    
    val TOTAL_SPT_QUESTIONS: String = "total_questions"
    val CORRECT_SPT_ANSWERS: String = "correct_answers"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_sports_result)

        val totalQuestions = intent.getIntExtra(TOTAL_SPT_QUESTIONS, 0)
        val correctAnswers = intent.getIntExtra(CORRECT_SPT_ANSWERS, 0)
        txt_sptscore.text = "Your Score is $totalQuestions out of $correctAnswers"
        btn_sptfinish.setOnClickListener {
            startActivity(Intent(this, Home::class.java))
        }

    }

}
```

Create a data class **SportQuestions.kt** to access variables.
```
data class SportQuestions (
    val id:Int,
    val spt_questions:String,
    val spt_option1:String,
    val spt_option2:String,
    val spt_option3:String,
    val spt_option4:String,
    val spt_correctAnswer:Int
)
```

In the **activity_sports.xml** we can create the UI screen for questions.
```
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    tools:context=".sports.SportsActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/Layout_container"
        android:visibility="gone"
        android:orientation="vertical"
        android:padding="16dp"
        android:gravity="center" >

        <TextView
            android:id="@+id/txt_sptquestion"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:gravity="center"
            android:text="Which is the national sport of Latvia?"
            android:textColor="#363A43"
            android:textSize="18sp">
        </TextView>

        <LinearLayout
            android:id="@+id/progress_details_spt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:layout_marginTop="16dp" >

            <ProgressBar
                android:id="@+id/progressBar_spt"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:minHeight="50dp"
                android:progress="0"
                android:indeterminate="false"
                android:max="10">
            </ProgressBar>

            <TextView
                android:id="@+id/txt_progress_spt"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="15dp"
                android:gravity="center"
                android:textColorHint="#7A8089"
                android:textSize="14sp"
                tools:text="1/10">
            </TextView>
        </LinearLayout>

        <TextView
            android:id="@+id/txt_option1_spt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border_bg"
            android:padding="15dp"
            android:gravity="center"
            android:textColor="#7A8089"
            android:textSize="18sp"
            tools:text="Ice Hockey">
        </TextView>

        <TextView
            android:id="@+id/txt_option2_spt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border_bg"
            android:padding="15dp"
            android:gravity="center"
            android:textColor="#7A8089"
            android:textSize="18sp"
            tools:text="Basketball">
        </TextView>

        <TextView
            android:id="@+id/txt_option3_spt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border_bg"
            android:padding="15dp"
            android:gravity="center"
            android:textColor="#7A8089"
            android:textSize="18sp"
            tools:text="Football">
        </TextView>

        <TextView
            android:id="@+id/txt_option4_spt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@drawable/border_bg"
            android:padding="15dp"
            android:gravity="center"
            android:textColor="#7A8089"
            android:textSize="18sp"
            tools:text="Volleyball">
        </TextView>

        <Button
            android:id="@+id/btn_spt_submit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@color/design_default_color_primary"
            android:text="Submit"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:textStyle="bold" />
    </LinearLayout>

</ScrollView>
```

In the **activity_sports_result.xml** we can create the UI screen for result.
```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@drawable/sportsresult_bg"
    android:padding="20dp"
    tools:context=".sports.SportsResultActivity">

    <TextView
        android:id="@+id/txt_sptresult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="25dp"
        android:text="Result"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="22sp">
    </TextView>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:src="@drawable/women_spray"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Wow Completed Sports Quiz!!"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        android:textSize="21sp">
    </TextView>

    <TextView
        android:id="@+id/txt_sptscore"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="Your Score is 4 out of 10"
        android:textColor="@color/design_default_color_error"
        android:textSize="20sp">
    </TextView>

    <Button
        android:id="@+id/btn_sptfinish"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@android:color/white"
        android:text="Finish"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>
```

**Demo**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ui0urx9vpfko4dnv6ue.gif)

**Tips and Tricks**
1. Make sure you are already registered as Huawei developer.
2. Set minSDK version to **24** or later, otherwise you will get **AndriodManifest** merge issue.
3. Make sure you have added the **agconnect-services.json** file to app folder.
4. Make sure you have added **SHA-256 fingerprint** without fail.
5. Make sure all the dependencies are added properly.

**Conclusion**
In this article, we have learned how to fetch the quiz questions and answers to sports from the server using **Huawei Remote Configuration**. Suppose you want to add any extra questions or delete any questions on the application, this Remote configuration helps to change the content without changing the code. Users can just change the content in the JSON format so that it will display the same in the app. So, I will provide a series of articles on this **Quiz App**, in upcoming articles.

I hope you have read this article. If you found it helpful, please provide likes and comments.

**Reference**
Remote Configuration - [Document](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-remoteconfig-introduction-0000001055149778)
Remote Configuration - [Training Video](https://developer.huawei.com/consumer/en/training/course/video/101603279270731106)