[MFD-13002] Add customised colours API to demo app

zendesk_sdk_demo/app/build.gradle.kts

@@ -1,6 +1,8 @@
 plugins {
     alias(libs.plugins.android.application)
     alias(libs.plugins.kotlin.android)
+    alias(libs.plugins.hilt)
+    alias(libs.plugins.kotlin.ksp)
 }
 
 android {
@@ -43,4 +45,8 @@ dependencies {
     implementation(libs.androidx.appcompat)
     implementation(libs.material)
     implementation(libs.androidx.lifecycle.runtime.ktx)
+
+    // Hilt dependencies
+    implementation(libs.hilt.android)
+    ksp(libs.hilt.compiler)
 }

zendesk_sdk_demo/app/src/main/java/com/example/zendesk_sdk_demo/MainActivity.kt

@@ -7,14 +7,22 @@ import android.view.MenuItem
 import android.widget.Button
 import androidx.appcompat.app.AppCompatActivity
 import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.content.ContextCompat
 import androidx.core.view.WindowCompat
 import androidx.core.view.isVisible
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
-import zendesk.android.Zendesk
+import dagger.hilt.android.AndroidEntryPoint
+import zendesk.android.messaging.model.UserColors
 import zendesk.logger.Logger
+import zendesk.messaging.android.DefaultMessagingFactory
+import javax.inject.Inject
 
+@AndroidEntryPoint
 class MainActivity : AppCompatActivity() {
 
+    @Inject
+    lateinit var zendeskManager: ZendeskManager
+
     private val LOG_TAG = "[${this.javaClass.name}]"
 
     private var coordinatorLayout: CoordinatorLayout? = null
@@ -35,10 +43,147 @@ class MainActivity : AppCompatActivity() {
 
         // https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/#4-show-messaging
         findViewById<Button>(R.id.StartButton).setOnClickListener {
-            Zendesk.instance.messaging.showMessaging(this)
+            zendeskManager.showMessaging(context = this)
+        }
+
+        findViewById<Button>(R.id.ChangeColorsButton).setOnClickListener {
+            zendeskManager.invalidate()
+            zendeskManager.initialize(
+                context = this,
+                channelKey = this.getString(R.string.channel_key),
+                factory = DefaultMessagingFactory(
+                    userLightColors = lightColors(),
+                    userDarkColors = darkColors(),
+                )
+            )
         }
     }
 
+    private fun lightColors(): UserColors = UserColors(
+        primary = ContextCompat.getColor(
+            this,
+            R.color.user_primary_light,
+        ),
+        onPrimary = ContextCompat.getColor(
+            this,
+            R.color.user_on_primary_light,
+        ),
+        action = ContextCompat.getColor(
+            this,
+            R.color.user_action_light,
+        ),
+        onAction = ContextCompat.getColor(
+            this,
+            R.color.user_on_action_light,
+        ),
+        onMessage = ContextCompat.getColor(
+            this,
+            R.color.user_on_message_light,
+        ),
+        message = ContextCompat.getColor(
+            this,
+            R.color.user_message_light,
+        ),
+        onBusinessMessage = ContextCompat.getColor(
+            this,
+            R.color.user_on_business_message_light,
+        ),
+        businessMessage = ContextCompat.getColor(
+            this,
+            R.color.user_business_message_light,
+        ),
+        background = ContextCompat.getColor(
+            this,
+            R.color.user_background_light,
+        ),
+        onBackground = ContextCompat.getColor(
+            this,
+            R.color.user_on_background_light,
+        ),
+        onSecondaryAction = ContextCompat.getColor(
+            this,
+            R.color.user_on_secondary_action_light,
+        ),
+        error = ContextCompat.getColor(
+            this,
+            R.color.user_error_light,
+        ),
+        notify = ContextCompat.getColor(
+            this,
+            R.color.user_notify_light,
+        ),
+        onError = ContextCompat.getColor(
+            this,
+            R.color.user_on_error_light,
+        ),
+        onNotify = ContextCompat.getColor(
+            this,
+            R.color.user_on_notify_light,
+        ),
+    )
+
+    private fun darkColors(): UserColors = UserColors(
+        primary = ContextCompat.getColor(
+            this, R.color.user_primary_dark,
+        ),
+        onPrimary = ContextCompat.getColor(
+            this,
+            R.color.user_on_primary_dark,
+        ),
+        action = ContextCompat.getColor(
+            this,
+            R.color.user_action_dark,
+        ),
+        onAction = ContextCompat.getColor(
+            this,
+            R.color.user_on_action_dark,
+        ),
+        onMessage = ContextCompat.getColor(
+            this,
+            R.color.user_on_message_dark,
+        ),
+        message = ContextCompat.getColor(
+            this,
+            R.color.user_message_dark,
+        ),
+        onBusinessMessage = ContextCompat.getColor(
+            this,
+            R.color.user_on_business_message_dark,
+        ),
+        businessMessage = ContextCompat.getColor(
+            this,
+            R.color.user_business_message_dark,
+        ),
+        background = ContextCompat.getColor(
+            this,
+            R.color.user_background_dark,
+        ),
+        onBackground = ContextCompat.getColor(
+            this,
+            R.color.user_on_background_dark,
+        ),
+        onSecondaryAction = ContextCompat.getColor(
+            this,
+            R.color.user_on_secondary_action_dark,
+        ),
+        error = ContextCompat.getColor(
+            this,
+            R.color.user_error_dark,
+        ),
+        notify = ContextCompat.getColor(
+            this,
+            R.color.user_notify_dark,
+        ),
+        onError = ContextCompat.getColor(
+            this,
+            R.color.user_on_error_dark,
+        ),
+        onNotify = ContextCompat.getColor(
+            this,
+            R.color.user_on_notify_dark,
+        ),
+    )
+
     override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
         menuInflater.inflate(R.menu.top_app_bar, menu)
         return super.onPrepareOptionsMenu(menu)

zendesk_sdk_demo/app/src/main/java/com/example/zendesk_sdk_demo/MainApplication.kt

@@ -1,38 +1,23 @@
 package com.example.zendesk_sdk_demo
 
 import android.app.Application
-import android.util.Log
-import zendesk.android.Zendesk
+import dagger.hilt.android.HiltAndroidApp
 import zendesk.messaging.android.DefaultMessagingFactory
+import javax.inject.Inject
 
+@HiltAndroidApp
 class MainApplication : Application() {
 
+    @Inject
+    lateinit var zendeskManager: ZendeskManager
+
     override fun onCreate() {
         super.onCreate()
 
-        // https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/#3-initialize-the-sdk
-        Zendesk.initialize(this, this.getString(R.string.channel_key), successCallback = { zendesk ->
-            Log.i(LOG_TAG, getString(R.string.msg_init_success))
-            // https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/analytics_tracking
-            // Enable/Disable analytics tracking, enabled by default
-            zendesk.messaging.enableAnalyticsTracking(enabled = true)
-        }, failureCallback = { error ->
-            // Tracking the cause of exceptions in your crash reporting dashboard will help to triage any unexpected failures in production
-            Log.e(LOG_TAG, "${getString(R.string.msg_init_error)}: $error")
-        }, messagingFactory = DefaultMessagingFactory())
-    }
-
-    companion object {
-        private val LOG_TAG = "[${Companion::class.java.simpleName}]"
-
-        /**
-         * Private reference to the instance of [MainApplication], initialized during [onCreate].
-         */
-        private lateinit var instance: MainApplication
-
-        /**
-         * Returns this instance of [MainApplication].
-         */
-        fun get(): MainApplication = instance
+        zendeskManager.initialize(
+            context = this,
+            channelKey = this.getString(R.string.channel_key),
+            factory = DefaultMessagingFactory(),
+        )
     }
 }

zendesk_sdk_demo/app/src/main/java/com/example/zendesk_sdk_demo/ZendeskManager.kt

@@ -0,0 +1,50 @@
+package com.example.zendesk_sdk_demo
+
+import android.content.Context
+import android.widget.Toast
+import zendesk.android.Zendesk
+import zendesk.android.messaging.MessagingFactory
+import zendesk.logger.Logger
+import javax.inject.Inject
+
+class ZendeskManager @Inject constructor() {
+
+    fun initialize(
+        context: Context,
+        channelKey: String,
+        factory: MessagingFactory,
+    ) {
+        // https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/#3-initialize-the-sdk
+        Zendesk.initialize(
+            context = context,
+            channelKey = channelKey,
+            successCallback = { zendesk ->
+                Logger.d(LOG_TAG, "Initialization Success", zendesk)
+                Toast.makeText(
+                    context,
+                    "Initialization Success", Toast.LENGTH_SHORT,
+                ).show()
+            },
+            failureCallback = {
+                Toast.makeText(
+                    context,
+                    "Initialization failed", Toast.LENGTH_SHORT,
+                ).show()
+                Logger.d(LOG_TAG, "Zendesk initialization failed", it)
+            },
+            messagingFactory = factory
+        )
+    }
+
+    fun showMessaging(context: Context) {
+        Zendesk.instance.messaging.showMessaging(context = context)
+    }
+
+    fun invalidate() {
+        Zendesk.invalidate()
+    }
+
+    companion object {
+        private const val LOG_TAG = "ZendeskManager"
+    }
+}

zendesk_sdk_demo/app/src/main/res/layout/activity_main.xml

@@ -46,6 +46,8 @@
 
             <include layout="@layout/conversation_cardview" />
 
+            <include layout="@layout/colors_api_cardview" />
+
         </LinearLayout>
 
     </androidx.core.widget.NestedScrollView>

zendesk_sdk_demo/app/src/main/res/layout/colors_api_cardview.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:card_view="http://schemas.android.com/apk/res-auto">
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/ConversationCard"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginVertical="8dp"
+        android:layout_marginHorizontal="16dp"
+        android:layout_gravity="start"
+        card_view:cardCornerRadius="@dimen/card_radius">
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:layout_margin="16dp"
+            android:gravity="start"
+            android:orientation="vertical">
+
+            <TextView
+                style="@style/style_card_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/colors_api_card_title" />
+
+            <TextView
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginVertical="16dp"
+                android:text="@string/colors_api_card_description" />
+
+            <Button
+                android:id="@+id/ChangeColorsButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="end"
+                android:text="@string/colors_api_button" />
+
+        </LinearLayout>
+    </com.google.android.material.card.MaterialCardView>
+
+</merge>

zendesk_sdk_demo/app/src/main/res/values/colors.xml

@@ -22,4 +22,38 @@
     <color name="gradient_start_dark">#000000</color>
     <color name="gradient_end_dark">#001416</color>
 
+    <!-- UserColors Light Theme -->
+    <color name="user_primary_light">#1976D2</color>
+    <color name="user_on_primary_light">#FFFFFF</color>
+    <color name="user_action_light">#009688</color>
+    <color name="user_on_action_light">#FFFFFF</color>
+    <color name="user_on_message_light">#212121</color>
+    <color name="user_message_light">#E3F2FD</color>
+    <color name="user_on_business_message_light">#212121</color>
+    <color name="user_business_message_light">#FFF8E1</color>
+    <color name="user_background_light">#F5F5F5</color>
+    <color name="user_on_background_light">#212121</color>
+    <color name="user_on_secondary_action_light">#1976D2</color>
+    <color name="user_error_light">#D32F2F</color>
+    <color name="user_notify_light">#388E3C</color>
+    <color name="user_on_error_light">#FFFFFF</color>
+    <color name="user_on_notify_light">#FFFFFF</color>
+
+    <!-- UserColors Dark Theme -->
+    <color name="user_primary_dark">#90CAF9</color>
+    <color name="user_on_primary_dark">#212121</color>
+    <color name="user_action_dark">#80CBC4</color>
+    <color name="user_on_action_dark">#212121</color>
+    <color name="user_on_message_dark">#FFFFFF</color>
+    <color name="user_message_dark">#263238</color>
+    <color name="user_on_business_message_dark">#FFFFFF</color>
+    <color name="user_business_message_dark">#424242</color>
+    <color name="user_background_dark">#121212</color>
+    <color name="user_on_background_dark">#FFFFFF</color>
+    <color name="user_on_secondary_action_dark">#90CAF9</color>
+    <color name="user_error_dark">#EF9A9A</color>
+    <color name="user_notify_dark">#A5D6A7</color>
+    <color name="user_on_error_dark">#212121</color>
+    <color name="user_on_notify_dark">#212121</color>
+
 </resources>

zendesk_sdk_demo/app/src/main/res/values/strings.xml

@@ -20,6 +20,10 @@
     <string name="conversation_card_description">Displays the conversation screen for the initial conversation created for your user. A user and a new conversation will automatically be created if they don\'t exist. Ensure you have previously initialized the Zendesk SDK.</string>
     <string name="conversation_button">Show conversation</string>
 
+    <string name="colors_api_card_title">Change the theme color</string>
+    <string name="colors_api_card_description">Demonstrates changing the theme color of the Zendesk SDK using the Colors API.</string>
+    <string name="colors_api_button">Change theme color</string>
+
     <!-- SNACK BAR -->
 
     <string name="msg_init_success">Initialization Successful</string>