Updating use case icons to match designs

changelog.d/5025.wip

@@ -0,0 +1 @@
+Updating the FTUE use case icons

vector/src/main/java/im/vector/app/core/extensions/Context.kt

@@ -17,9 +17,32 @@
 package im.vector.app.core.extensions
 
 import android.content.Context
+import android.graphics.drawable.Drawable
+import androidx.annotation.ColorInt
+import androidx.annotation.ColorRes
+import androidx.annotation.DrawableRes
+import androidx.core.content.ContextCompat
 import dagger.hilt.EntryPoints
 import im.vector.app.core.di.SingletonEntryPoint
+import kotlin.math.round
 
 fun Context.singletonEntryPoint(): SingletonEntryPoint {
     return EntryPoints.get(applicationContext, SingletonEntryPoint::class.java)
 }
+
+fun Context.getResTintedDrawable(@DrawableRes drawableRes: Int, @ColorRes tint: Int, alpha: Float? = null): Drawable? {
+    return getTintedDrawable(drawableRes, ContextCompat.getColor(this, tint), alpha)
+}
+
+fun Context.getTintedDrawable(@DrawableRes drawableRes: Int, @ColorInt tint: Int, alpha: Float? = null) = ContextCompat.getDrawable(this, drawableRes)
+        ?.mutate()
+        ?.also { drawable ->
+            drawable.setTint(tint)
+            alpha?.let {
+                drawable.alpha = it.toAndroidAlpha()
+            }
+        }
+
+private fun Float.toAndroidAlpha(): Int {
+    return round(this * 255).toInt()
+}

vector/src/main/java/im/vector/app/core/extensions/TextView.kt

@@ -16,6 +16,7 @@
 
 package im.vector.app.core.extensions
 
+import android.graphics.drawable.Drawable
 import android.text.Spannable
 import android.text.SpannableString
 import android.text.TextPaint
@@ -121,7 +122,11 @@ fun TextView.setLeftDrawable(@DrawableRes iconRes: Int, @AttrRes tintColor: Int?
     } else {
         ContextCompat.getDrawable(context, iconRes)
     }
-    setCompoundDrawablesWithIntrinsicBounds(icon, null, null, null)
+    setLeftDrawable(icon)
+}
+
+fun TextView.setLeftDrawable(drawable: Drawable?) {
+    setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null)
 }
 
 /**

vector/src/main/java/im/vector/app/features/onboarding/ftueauth/FtueAuthUseCaseFragment.kt

@@ -16,21 +16,36 @@
 
 package im.vector.app.features.onboarding.ftueauth
 
+import android.graphics.Color
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.LayerDrawable
 import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
+import androidx.annotation.ColorRes
+import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
+import androidx.core.content.ContextCompat
 import im.vector.app.R
+import im.vector.app.core.extensions.getResTintedDrawable
+import im.vector.app.core.extensions.getTintedDrawable
+import im.vector.app.core.extensions.setLeftDrawable
 import im.vector.app.core.extensions.setTextWithColoredPart
 import im.vector.app.databinding.FragmentFtueAuthUseCaseBinding
 import im.vector.app.features.login.ServerType
 import im.vector.app.features.onboarding.FtueUseCase
 import im.vector.app.features.onboarding.OnboardingAction
+import im.vector.app.features.themes.ThemeProvider
 import javax.inject.Inject
 
-class FtueAuthUseCaseFragment @Inject constructor() : AbstractFtueAuthFragment<FragmentFtueAuthUseCaseBinding>() {
+private const val DARK_MODE_ICON_BACKGROUND_ALPHA = 0.30f
+private const val LIGHT_MODE_ICON_BACKGROUND_ALPHA = 0.15f
+
+class FtueAuthUseCaseFragment @Inject constructor(
+        private val themeProvider: ThemeProvider
+) : AbstractFtueAuthFragment<FragmentFtueAuthUseCaseBinding>() {
 
     override fun getBinding(inflater: LayoutInflater, container: ViewGroup?): FragmentFtueAuthUseCaseBinding {
         return FragmentFtueAuthUseCaseBinding.inflate(inflater, container, false)
@@ -42,9 +57,24 @@ class FtueAuthUseCaseFragment @Inject constructor() : AbstractFtueAuthFragment<F
     }
 
     private fun setupViews() {
-        views.useCaseOptionOne.setUseCase(R.string.ftue_auth_use_case_option_one, FtueUseCase.FRIENDS_FAMILY)
-        views.useCaseOptionTwo.setUseCase(R.string.ftue_auth_use_case_option_two, FtueUseCase.TEAMS)
-        views.useCaseOptionThree.setUseCase(R.string.ftue_auth_use_case_option_three, FtueUseCase.COMMUNITIES)
+        views.useCaseOptionOne.renderUseCase(
+                useCase = FtueUseCase.FRIENDS_FAMILY,
+                label = R.string.ftue_auth_use_case_option_one,
+                icon = R.drawable.ic_use_case_friends,
+                tint = R.color.palette_grape
+        )
+        views.useCaseOptionTwo.renderUseCase(
+                useCase = FtueUseCase.TEAMS,
+                label = R.string.ftue_auth_use_case_option_two,
+                icon = R.drawable.ic_use_case_teams,
+                tint = R.color.palette_element_green
+        )
+        views.useCaseOptionThree.renderUseCase(
+                useCase = FtueUseCase.COMMUNITIES,
+                label = R.string.ftue_auth_use_case_option_three,
+                icon = R.drawable.ic_use_case_communities,
+                tint = R.color.palette_azure
+        )
 
         views.useCaseSkip.setTextWithColoredPart(
                 fullTextRes = R.string.ftue_auth_use_case_skip,
@@ -63,10 +93,22 @@ class FtueAuthUseCaseFragment @Inject constructor() : AbstractFtueAuthFragment<F
         viewModel.handle(OnboardingAction.ResetUseCase)
     }
 
-    private fun TextView.setUseCase(@StringRes label: Int, useCase: FtueUseCase) {
+    private fun TextView.renderUseCase(useCase: FtueUseCase, @StringRes label: Int, @DrawableRes icon: Int, @ColorRes tint: Int) {
+        setLeftDrawable(createIcon(tint, icon, isLightMode = themeProvider.isLightTheme()))
         setText(label)
         debouncedClicks {
             viewModel.handle(OnboardingAction.UpdateUseCase(useCase))
         }
     }
+
+    private fun createIcon(@ColorRes tint: Int, icon: Int, isLightMode: Boolean): Drawable {
+        val context = requireContext()
+        val alpha = when (isLightMode) {
+            true  -> LIGHT_MODE_ICON_BACKGROUND_ALPHA
+            false -> DARK_MODE_ICON_BACKGROUND_ALPHA
+        }
+        val iconBackground = context.getResTintedDrawable(R.drawable.bg_feature_icon, tint, alpha = alpha)
+        val whiteLayer = context.getTintedDrawable(R.drawable.bg_feature_icon, Color.WHITE)
+        return LayerDrawable(arrayOf(whiteLayer, iconBackground, ContextCompat.getDrawable(context, icon)))
+    }
 }

vector/src/main/res/drawable/bg_feature_icon.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="38dp"
+    android:height="38dp"
+    android:viewportWidth="38"
+    android:viewportHeight="38">
+    <path
+        android:fillColor="#ff0000"
+        android:pathData="M0,14C0,6.268 6.268,0 14,0H24C31.732,0 38,6.268 38,14V24C38,31.732 31.732,38 24,38H14C6.268,38 0,31.732 0,24V14Z" />
+</vector>

vector/src/main/res/drawable/ic_use_case_communities.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="38dp"
+    android:height="38dp"
+    android:viewportWidth="38"
+    android:viewportHeight="38">
+    <path
+        android:fillColor="#17191C"
+        android:fillType="evenOdd"
+        android:pathData="M19,29C24.5228,29 29,24.5228 29,19C29,13.4772 24.5228,9 19,9C13.4772,9 9,13.4772 9,19C9,24.5228 13.4772,29 19,29ZM25.3518,22.3106L24.5865,24.6722C24.5747,24.7086 24.5546,24.7419 24.5279,24.7694L23.7731,25.5458L22.9776,26.364L22.4305,26.9267C22.3097,27.051 22.1022,27.0176 22.0264,26.8617L21.4043,25.5819C21.3927,25.558 21.3773,25.5361 21.3587,25.517L20.5913,24.7276L19.8694,23.9852C19.8224,23.9367 19.7577,23.9094 19.6902,23.9094H18.3613C18.2656,23.9094 18.1783,23.8548 18.1365,23.7687L17.4346,22.3248C17.418,22.2908 17.4094,22.2534 17.4094,22.2155V19.9711C17.4094,19.8774 17.3571,19.7916 17.2738,19.7487L15.8724,19.028C15.837,19.0098 15.7978,19.0003 15.758,19.0003H14.3333C14.2657,19.0003 14.2011,18.973 14.154,18.9246L12.713,17.4424C12.6644,17.3924 12.6388,17.3244 12.6426,17.2547L12.7331,15.5685C12.7445,15.3571 12.7842,15.1482 12.8511,14.9474L13.1309,14.108C13.6777,12.4677 14.9701,11.1839 16.614,10.6481L17.6003,10.3428C18.5075,10.062 19.4825,10.0931 20.3699,10.4312L21.335,10.7988C21.3691,10.8118 21.3999,10.8321 21.4253,10.8582L22.8082,12.2806C22.9025,12.3776 22.9025,12.5321 22.8082,12.6291L20.662,14.8367C20.6166,14.8833 20.5913,14.9458 20.5913,15.0109V16.2391C20.5913,16.3974 20.446,16.5159 20.2909,16.484L16.9144,15.7894C16.7593,15.7575 16.614,15.8759 16.614,16.0343V17.114C16.614,17.252 16.7259,17.364 16.864,17.364H18.7504C18.8884,17.364 19.0004,17.4759 19.0004,17.614V18.7503C19.0004,18.8884 19.1123,19.0003 19.2504,19.0003H22.0766C22.1441,19.0003 22.2087,19.0276 22.2558,19.0761L22.9491,19.7892C22.968,19.8086 22.9899,19.8248 23.014,19.8372L24.5321,20.618C24.5562,20.6304 24.5782,20.6466 24.5971,20.666L25.2932,21.3821C25.3386,21.4288 25.364,21.4913 25.364,21.5564V22.2336C25.364,22.2597 25.3599,22.2857 25.3518,22.3106Z" />
+</vector>

vector/src/main/res/drawable/ic_use_case_friends.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="38dp"
+    android:height="38dp"
+    android:viewportWidth="38"
+    android:viewportHeight="38">
+    <path
+        android:fillColor="#17191C"
+        android:fillType="evenOdd"
+        android:pathData="M30.0666,19C30.0666,25.0889 25.1307,30.0248 19.0418,30.0248C17.0259,30.0248 15.1364,29.4838 13.5105,28.5389L9.2568,29.8516C8.4718,30.0938 7.7368,29.3568 7.9812,28.5725L9.3342,24.2302C8.494,22.674 8.017,20.8927 8.017,19C8.017,12.9112 12.953,7.9752 19.0418,7.9752C25.1307,7.9752 30.0666,12.9112 30.0666,19ZM15.3669,19C15.3669,19.6766 14.8185,20.225 14.1419,20.225C13.4654,20.225 12.9169,19.6766 12.9169,19C12.9169,18.3235 13.4654,17.775 14.1419,17.775C14.8185,17.775 15.3669,18.3235 15.3669,19ZM19.0418,20.225C19.7184,20.225 20.2668,19.6766 20.2668,19C20.2668,18.3235 19.7184,17.775 19.0418,17.775C18.3653,17.775 17.8169,18.3235 17.8169,19C17.8169,19.6766 18.3653,20.225 19.0418,20.225ZM25.1667,19C25.1667,19.6766 24.6183,20.225 23.9417,20.225C23.2652,20.225 22.7168,19.6766 22.7168,19C22.7168,18.3235 23.2652,17.775 23.9417,17.775C24.6183,17.775 25.1667,18.3235 25.1667,19Z" />
+</vector>