Skip to content

Commit 182ae9f

Browse files
IanArbIanArb
authored
[MFD-13002] Add customised colours API to demo app (#49)
* [MFD-13002] Add customised colours API to demo app * * PR feedback: Introduce new section for changing colors at runtime using a new card section * * PR feedback: Remove Hilt and make ZendeskManager an object singleton * * Remove redundant comment lines
1 parent 1d93b0d commit 182ae9f

File tree

7 files changed

+277
-31
lines changed

7 files changed

+277
-31
lines changed

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

Lines changed: 142 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,16 @@ import android.view.MenuItem
77
import android.widget.Button
88
import androidx.appcompat.app.AppCompatActivity
99
import androidx.coordinatorlayout.widget.CoordinatorLayout
10+
import androidx.core.content.ContextCompat
1011
import androidx.core.view.WindowCompat
1112
import androidx.core.view.isVisible
1213
import com.google.android.material.dialog.MaterialAlertDialogBuilder
13-
import zendesk.android.Zendesk
14+
import zendesk.android.messaging.model.UserColors
1415
import zendesk.logger.Logger
16+
import zendesk.messaging.android.DefaultMessagingFactory
1517

1618
class MainActivity : AppCompatActivity() {
1719

18-
private val LOG_TAG = "[${this.javaClass.name}]"
19-
2020
private var coordinatorLayout: CoordinatorLayout? = null
2121

2222
@SuppressLint("CutPasteId")
@@ -33,12 +33,149 @@ class MainActivity : AppCompatActivity() {
3333

3434
findViewById<Button>(R.id.InitButton).isVisible = false
3535

36-
// https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/#4-show-messaging
36+
// https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/ui_customization
3737
findViewById<Button>(R.id.StartButton).setOnClickListener {
38-
Zendesk.instance.messaging.showMessaging(this)
38+
ZendeskManager.showMessaging(context = this)
39+
}
40+
41+
findViewById<Button>(R.id.ChangeColorsButton).setOnClickListener {
42+
ZendeskManager.invalidate()
43+
ZendeskManager.initialize(
44+
context = this,
45+
channelKey = this.getString(R.string.channel_key),
46+
factory = DefaultMessagingFactory(
47+
userLightColors = lightColors(),
48+
userDarkColors = darkColors(),
49+
)
50+
)
3951
}
4052
}
4153

54+
private fun lightColors(): UserColors = UserColors(
55+
primary = ContextCompat.getColor(
56+
this,
57+
R.color.user_primary_light,
58+
),
59+
onPrimary = ContextCompat.getColor(
60+
this,
61+
R.color.user_on_primary_light,
62+
),
63+
action = ContextCompat.getColor(
64+
this,
65+
R.color.user_action_light,
66+
),
67+
onAction = ContextCompat.getColor(
68+
this,
69+
R.color.user_on_action_light,
70+
),
71+
onMessage = ContextCompat.getColor(
72+
this,
73+
R.color.user_on_message_light,
74+
),
75+
message = ContextCompat.getColor(
76+
this,
77+
R.color.user_message_light,
78+
),
79+
onBusinessMessage = ContextCompat.getColor(
80+
this,
81+
R.color.user_on_business_message_light,
82+
),
83+
businessMessage = ContextCompat.getColor(
84+
this,
85+
R.color.user_business_message_light,
86+
),
87+
background = ContextCompat.getColor(
88+
this,
89+
R.color.user_background_light,
90+
),
91+
onBackground = ContextCompat.getColor(
92+
this,
93+
R.color.user_on_background_light,
94+
),
95+
onSecondaryAction = ContextCompat.getColor(
96+
this,
97+
R.color.user_on_secondary_action_light,
98+
),
99+
error = ContextCompat.getColor(
100+
this,
101+
R.color.user_error_light,
102+
),
103+
notify = ContextCompat.getColor(
104+
this,
105+
R.color.user_notify_light,
106+
),
107+
onError = ContextCompat.getColor(
108+
this,
109+
R.color.user_on_error_light,
110+
),
111+
onNotify = ContextCompat.getColor(
112+
this,
113+
R.color.user_on_notify_light,
114+
),
115+
)
116+
117+
private fun darkColors(): UserColors = UserColors(
118+
primary = ContextCompat.getColor(
119+
this, R.color.user_primary_dark,
120+
),
121+
onPrimary = ContextCompat.getColor(
122+
this,
123+
R.color.user_on_primary_dark,
124+
),
125+
action = ContextCompat.getColor(
126+
this,
127+
R.color.user_action_dark,
128+
),
129+
onAction = ContextCompat.getColor(
130+
this,
131+
R.color.user_on_action_dark,
132+
),
133+
onMessage = ContextCompat.getColor(
134+
this,
135+
R.color.user_on_message_dark,
136+
),
137+
message = ContextCompat.getColor(
138+
this,
139+
R.color.user_message_dark,
140+
),
141+
onBusinessMessage = ContextCompat.getColor(
142+
this,
143+
R.color.user_on_business_message_dark,
144+
),
145+
businessMessage = ContextCompat.getColor(
146+
this,
147+
R.color.user_business_message_dark,
148+
),
149+
background = ContextCompat.getColor(
150+
this,
151+
R.color.user_background_dark,
152+
),
153+
onBackground = ContextCompat.getColor(
154+
this,
155+
R.color.user_on_background_dark,
156+
),
157+
onSecondaryAction = ContextCompat.getColor(
158+
this,
159+
R.color.user_on_secondary_action_dark,
160+
),
161+
error = ContextCompat.getColor(
162+
this,
163+
R.color.user_error_dark,
164+
),
165+
notify = ContextCompat.getColor(
166+
this,
167+
R.color.user_notify_dark,
168+
),
169+
onError = ContextCompat.getColor(
170+
this,
171+
R.color.user_on_error_dark,
172+
),
173+
onNotify = ContextCompat.getColor(
174+
this,
175+
R.color.user_on_notify_dark,
176+
),
177+
)
178+
42179
override fun onPrepareOptionsMenu(menu: Menu?): Boolean {
43180
menuInflater.inflate(R.menu.top_app_bar, menu)
44181
return super.onPrepareOptionsMenu(menu)

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

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,17 @@
11
package com.example.zendesk_sdk_demo
22

33
import android.app.Application
4-
import android.util.Log
5-
import zendesk.android.Zendesk
64
import zendesk.messaging.android.DefaultMessagingFactory
75

86
class MainApplication : Application() {
97

108
override fun onCreate() {
119
super.onCreate()
1210

13-
// https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/#3-initialize-the-sdk
14-
Zendesk.initialize(this, this.getString(R.string.channel_key), successCallback = { zendesk ->
15-
Log.i(LOG_TAG, getString(R.string.msg_init_success))
16-
// https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/analytics_tracking
17-
// Enable/Disable analytics tracking, enabled by default
18-
zendesk.messaging.enableAnalyticsTracking(enabled = true)
19-
}, failureCallback = { error ->
20-
// Tracking the cause of exceptions in your crash reporting dashboard will help to triage any unexpected failures in production
21-
Log.e(LOG_TAG, "${getString(R.string.msg_init_error)}: $error")
22-
}, messagingFactory = DefaultMessagingFactory())
23-
}
24-
25-
companion object {
26-
private val LOG_TAG = "[${Companion::class.java.simpleName}]"
27-
28-
/**
29-
* Private reference to the instance of [MainApplication], initialized during [onCreate].
30-
*/
31-
private lateinit var instance: MainApplication
32-
33-
/**
34-
* Returns this instance of [MainApplication].
35-
*/
36-
fun get(): MainApplication = instance
11+
ZendeskManager.initialize(
12+
context = this,
13+
channelKey = this.getString(R.string.channel_key),
14+
factory = DefaultMessagingFactory(),
15+
)
3716
}
3817
}

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
package com.example.zendesk_sdk_demo
2+
3+
import android.content.Context
4+
import android.widget.Toast
5+
import zendesk.android.Zendesk
6+
import zendesk.android.messaging.MessagingFactory
7+
import zendesk.logger.Logger
8+
9+
object ZendeskManager {
10+
11+
fun initialize(
12+
context: Context,
13+
channelKey: String,
14+
factory: MessagingFactory,
15+
) {
16+
// https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/android/getting_started/#3-initialize-the-sdk
17+
Zendesk.initialize(
18+
context = context,
19+
channelKey = channelKey,
20+
successCallback = { zendesk ->
21+
Logger.d(LOG_TAG, "Initialization Success", zendesk)
22+
Toast.makeText(
23+
context,
24+
"Initialization Success", Toast.LENGTH_SHORT,
25+
).show()
26+
},
27+
failureCallback = {
28+
Toast.makeText(
29+
context,
30+
"Initialization failed", Toast.LENGTH_SHORT,
31+
).show()
32+
Logger.d(LOG_TAG, "Zendesk initialization failed", it)
33+
},
34+
messagingFactory = factory
35+
)
36+
}
37+
38+
fun showMessaging(context: Context) {
39+
Zendesk.instance.messaging.showMessaging(context = context)
40+
}
41+
42+
fun invalidate() {
43+
Zendesk.invalidate()
44+
}
45+
46+
private const val LOG_TAG = "ZendeskManager"
47+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646

4747
<include layout="@layout/conversation_cardview" />
4848

49+
<include layout="@layout/colors_api_cardview" />
50+
4951
</LinearLayout>
5052

5153
</androidx.core.widget.NestedScrollView>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<merge xmlns:android="http://schemas.android.com/apk/res/android"
4+
xmlns:card_view="http://schemas.android.com/apk/res-auto">
5+
6+
<com.google.android.material.card.MaterialCardView
7+
android:id="@+id/ConversationCard"
8+
android:layout_width="match_parent"
9+
android:layout_height="wrap_content"
10+
android:layout_marginVertical="8dp"
11+
android:layout_marginHorizontal="16dp"
12+
android:layout_gravity="start"
13+
card_view:cardCornerRadius="@dimen/card_radius">
14+
<LinearLayout
15+
android:layout_width="match_parent"
16+
android:layout_height="match_parent"
17+
android:layout_margin="16dp"
18+
android:gravity="start"
19+
android:orientation="vertical">
20+
21+
<TextView
22+
style="@style/style_card_title"
23+
android:layout_width="wrap_content"
24+
android:layout_height="wrap_content"
25+
android:text="@string/colors_api_card_title" />
26+
27+
<TextView
28+
android:layout_width="wrap_content"
29+
android:layout_height="wrap_content"
30+
android:layout_marginVertical="16dp"
31+
android:text="@string/colors_api_card_description" />
32+
33+
<Button
34+
android:id="@+id/ChangeColorsButton"
35+
android:layout_width="wrap_content"
36+
android:layout_height="wrap_content"
37+
android:layout_gravity="end"
38+
android:text="@string/colors_api_button" />
39+
40+
</LinearLayout>
41+
</com.google.android.material.card.MaterialCardView>
42+
43+
</merge>

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,38 @@
2222
<color name="gradient_start_dark">#000000</color>
2323
<color name="gradient_end_dark">#001416</color>
2424

25+
<!-- UserColors Light Theme -->
26+
<color name="user_primary_light">#1976D2</color>
27+
<color name="user_on_primary_light">#FFFFFF</color>
28+
<color name="user_action_light">#009688</color>
29+
<color name="user_on_action_light">#FFFFFF</color>
30+
<color name="user_on_message_light">#212121</color>
31+
<color name="user_message_light">#E3F2FD</color>
32+
<color name="user_on_business_message_light">#212121</color>
33+
<color name="user_business_message_light">#FFF8E1</color>
34+
<color name="user_background_light">#F5F5F5</color>
35+
<color name="user_on_background_light">#212121</color>
36+
<color name="user_on_secondary_action_light">#1976D2</color>
37+
<color name="user_error_light">#D32F2F</color>
38+
<color name="user_notify_light">#388E3C</color>
39+
<color name="user_on_error_light">#FFFFFF</color>
40+
<color name="user_on_notify_light">#FFFFFF</color>
41+
42+
<!-- UserColors Dark Theme -->
43+
<color name="user_primary_dark">#90CAF9</color>
44+
<color name="user_on_primary_dark">#212121</color>
45+
<color name="user_action_dark">#80CBC4</color>
46+
<color name="user_on_action_dark">#212121</color>
47+
<color name="user_on_message_dark">#FFFFFF</color>
48+
<color name="user_message_dark">#263238</color>
49+
<color name="user_on_business_message_dark">#FFFFFF</color>
50+
<color name="user_business_message_dark">#424242</color>
51+
<color name="user_background_dark">#121212</color>
52+
<color name="user_on_background_dark">#FFFFFF</color>
53+
<color name="user_on_secondary_action_dark">#90CAF9</color>
54+
<color name="user_error_dark">#EF9A9A</color>
55+
<color name="user_notify_dark">#A5D6A7</color>
56+
<color name="user_on_error_dark">#212121</color>
57+
<color name="user_on_notify_dark">#212121</color>
58+
2559
</resources>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@
2020
<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>
2121
<string name="conversation_button">Show conversation</string>
2222

23+
<string name="colors_api_card_title">Reinitialise with custom colors</string>
24+
<string name="colors_api_card_description">Demonstrates changing the theme color of the Zendesk SDK using the Colors API. See the MainActivity for example usage</string>
25+
<string name="colors_api_button">Change theme color</string>
26+
2327
<!-- SNACK BAR -->
2428

2529
<string name="msg_init_success">Initialization Successful</string>

0 commit comments

Comments
 (0)