APPS-7260 Add option to support the three types of assets defined by design

catalog/src/main/java/com/telefonica/mistica/catalog/ui/CatalogMainActivity.kt

@@ -14,6 +14,7 @@ import androidx.recyclerview.widget.RecyclerView
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.input.DropDownInput
 import com.telefonica.mistica.list.ListRowView
+import com.telefonica.mistica.list.ListRowView.Companion.TYPE_SMALL_ICON
 import com.telefonica.mistica.list.layout.configureWithFullWidthLayout
 
 
@@ -119,8 +120,8 @@ class CatalogMainActivity : AppCompatActivity() {
                             context.startActivity(this)
                         }
                 }
+                setAssetType(TYPE_SMALL_ICON)
                 setAssetResource(section.icon)
-                setSmallAsset(true)
             }
         }
 

catalog/src/main/java/com/telefonica/mistica/catalog/ui/fragment/ListsCatalogFragment.kt

@@ -11,6 +11,10 @@ import androidx.fragment.app.Fragment
 import androidx.recyclerview.widget.RecyclerView
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.list.ListRowView
+import com.telefonica.mistica.list.ListRowView.AssetType
+import com.telefonica.mistica.list.ListRowView.Companion.TYPE_IMAGE
+import com.telefonica.mistica.list.ListRowView.Companion.TYPE_LARGE_ICON
+import com.telefonica.mistica.list.ListRowView.Companion.TYPE_SMALL_ICON
 import com.telefonica.mistica.list.MisticaRecyclerView
 
 class ListsCatalogFragment : Fragment() {
@@ -45,7 +49,7 @@ class ListsCatalogFragment : Fragment() {
                 ) as ListRowView
             )
 
-        override fun getItemCount(): Int = 23
+        override fun getItemCount(): Int = 25
 
         override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
             val rowView: ListRowView = holder.rowView
@@ -71,49 +75,55 @@ class ListsCatalogFragment : Fragment() {
                     withAction = true
                 )
                 6 -> rowView.configureView(
-                    withAsset = true
+                    withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON
                 )
                 7 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true
                 )
                 8 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true,
                     withBadgeCount = 0
                 )
                 9 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true,
                     withBadgeCount = 5
                 )
                 10 -> rowView.configureView(
                     withLongDescription = false,
-                    withAsset = true
+                    withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON
                 )
                 11 -> rowView.configureView(
                     withLongDescription = false,
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true
                 )
                 12 -> rowView.configureView(
                     withAsset = true,
-                    withSmallAsset = true
+                    withAssetType = TYPE_SMALL_ICON
                 )
                 13 -> rowView.configureView(
                     withAsset = true,
-                    withSmallAsset = true,
+                    withAssetType = TYPE_SMALL_ICON,
                     withAction = true
                 )
                 14 -> rowView.configureView(
                     withAsset = true,
-                    withSmallAsset = true,
+                    withAssetType = TYPE_SMALL_ICON,
                     withAction = true,
                     withBadgeCount = 0
                 )
                 15 -> rowView.configureView(
                     withAsset = true,
-                    withSmallAsset = true,
+                    withAssetType = TYPE_SMALL_ICON,
                     withAction = true,
                     withBadgeCount = 10
                 )
@@ -124,37 +134,52 @@ class ListsCatalogFragment : Fragment() {
                 17 -> rowView.configureView(
                     withLongTitle = true,
                     withLongDescription = true,
-                    withAsset = true
+                    withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON
                 )
                 18 -> rowView.configureView(
                     withLongTitle = true,
                     withLongDescription = true,
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true
                 )
                 19 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true,
                     withHeadline = true
                 )
                 20 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true,
                     withSubtitle = true
                 )
                 21 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withAction = true,
                     withSubtitle = true,
                     withHeadline = true
                 )
                 22 -> rowView.configureView(
                     withAsset = true,
+                    withAssetType = TYPE_LARGE_ICON,
                     withLongDescription = false,
                     withAction = true,
                     withSubtitle = true,
                     withHeadline = true
                 )
+                23 -> rowView.configureView(
+                    withAsset = true,
+                    withAssetType = TYPE_IMAGE,
+                    withLongDescription = false
+                )
+                24 -> rowView.configureView(
+                    withAsset = true,
+                    withAssetType = TYPE_IMAGE
+                )
             }
         }
 
@@ -163,7 +188,7 @@ class ListsCatalogFragment : Fragment() {
             withLongTitle: Boolean = false,
             withLongDescription: Boolean? = null,
             withAsset: Boolean = false,
-            withSmallAsset: Boolean = false,
+            @AssetType withAssetType: Int = TYPE_SMALL_ICON,
             withAction: Boolean = false,
             withBadgeCount: Int = ListRowView.BADGE_GONE,
             withHeadline: Boolean = false,
@@ -187,8 +212,10 @@ class ListsCatalogFragment : Fragment() {
                     }
                 }
             )
-            setAssetResource(if (withAsset) R.drawable.ic_lists else null)
-            setSmallAsset(withSmallAsset)
+
+            setAssetType(withAssetType)
+            setAssetResource(getAssetResource(withAsset, withAssetType))
+
             if (withAction) {
                 setActionLayout(R.layout.list_row_chevron_action)
                 setOnClickListener { Toast.makeText(context, "Click!", Toast.LENGTH_SHORT).show() }
@@ -198,6 +225,17 @@ class ListsCatalogFragment : Fragment() {
             }
             setBadgeCount(withBadgeCount)
         }
+
+        private fun getAssetResource(withAsset: Boolean, withAssetType: Int): Int? =
+            if (withAsset) {
+                if (withAssetType == TYPE_IMAGE) {
+                    R.drawable.netflix_logo
+                } else {
+                    R.drawable.ic_lists
+                }
+            } else {
+                null
+            }
     }
 
     class ListViewHolder(val rowView: ListRowView) : RecyclerView.ViewHolder(rowView)

catalog/src/main/res/layout/screen_fragment_lists_catalog_item.xml

@@ -6,6 +6,6 @@
     app:listRowAssetDrawable="@android:drawable/btn_star"
     app:listRowBadgeCount="gone"
     app:listRowDescription="Test Subtitle"
-    app:listRowHasSmallAsset="true"
+    app:listRowAssetType="smallIcon"
     app:listRowIsBoxed="true"
     app:listRowTitle="Test Title" />

library/src/main/java/com/telefonica/mistica/list/ListRowView.kt

@@ -3,6 +3,7 @@ package com.telefonica.mistica.list
 import android.content.Context
 import android.graphics.drawable.Drawable
 import android.util.AttributeSet
+import android.util.Log
 import android.util.TypedValue
 import android.view.LayoutInflater
 import android.view.View
@@ -11,6 +12,7 @@ import android.widget.ImageView
 import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.annotation.DrawableRes
+import androidx.annotation.IntDef
 import androidx.annotation.LayoutRes
 import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.constraintlayout.widget.ConstraintSet
@@ -54,13 +56,13 @@ import com.telefonica.mistica.util.convertDpToPx
     ),
     BindingMethod(
         type = ListRowView::class,
-        attribute = "listRowIsBoxed",
-        method = "setBoxed"
+        attribute = "listRowAssetType",
+        method = "setAssetType"
     ),
     BindingMethod(
         type = ListRowView::class,
-        attribute = "listRowHasSmallAsset",
-        method = "setSmallAsset"
+        attribute = "listRowIsBoxed",
+        method = "setBoxed"
     ),
     BindingMethod(
         type = ListRowView::class,
@@ -79,8 +81,18 @@ class ListRowView @JvmOverloads constructor(
     defStyleAttr: Int = 0
 ) : ConstraintLayout(context, attrs, defStyleAttr) {
 
+    @Retention(AnnotationRetention.SOURCE)
+    @IntDef(
+        TYPE_IMAGE,
+        TYPE_SMALL_ICON,
+        TYPE_LARGE_ICON
+    )
+    annotation class AssetType
+
     private val textsContainer: LinearLayout
     private val assetImageView: ImageView
+    private val assetCircularImageView: ImageView
+    private val assetImageLayout: FrameLayout
     private val headlineContainer: FrameLayout
     private val titleTextView: TextView
     private val subtitleTextView: TextView
@@ -90,7 +102,7 @@ class ListRowView @JvmOverloads constructor(
 
     private var currentHeadlineLayoutRes: Int = HEADLINE_NONE
     private var currentActionLayoutRes: Int = ACTION_NONE
-    private var isSmallAsset: Boolean = false
+    private var assetType: Int = TYPE_SMALL_ICON
 
     init {
         LayoutInflater.from(context).inflate(R.layout.list_row_item, this, true)
@@ -101,6 +113,8 @@ class ListRowView @JvmOverloads constructor(
 
         textsContainer = findViewById(R.id.row_texts_container)
         assetImageView = findViewById(R.id.row_asset_image)
+        assetCircularImageView = findViewById(R.id.row_asset_circular_image)
+        assetImageLayout = findViewById(R.id.row_asset_image_layout)
         headlineContainer = findViewById(R.id.row_headline)
         titleTextView = findViewById(R.id.row_title_text)
         subtitleTextView = findViewById(R.id.row_subtitle_text)
@@ -131,12 +145,7 @@ class ListRowView @JvmOverloads constructor(
             setSubtitle(styledAttrs.getText(R.styleable.ListRowView_listRowSubtitle))
             setDescription(styledAttrs.getText(R.styleable.ListRowView_listRowDescription))
             setBoxed(styledAttrs.getBoolean(R.styleable.ListRowView_listRowIsBoxed, false))
-            setSmallAsset(
-                styledAttrs.getBoolean(
-                    R.styleable.ListRowView_listRowHasSmallAsset,
-                    false
-                )
-            )
+            setAssetType(styledAttrs.getType(R.styleable.ListRowView_listRowAssetType))
             setAssetDrawable(styledAttrs.getDrawable(R.styleable.ListRowView_listRowAssetDrawable))
             setBadgeCount(styledAttrs.getInt(R.styleable.ListRowView_listRowBadgeCount, BADGE_GONE))
             styledAttrs.getResourceId(
@@ -149,25 +158,49 @@ class ListRowView @JvmOverloads constructor(
         }
     }
 
-    fun setSmallAsset(isSmall: Boolean) {
-        isSmallAsset = isSmall
-        assetImageView.setSize(if (isSmall) 24 else 40)
-        recalculateAssetPosition()
-    }
-
     fun setAssetResource(@DrawableRes resource: Int? = null) {
         setAssetDrawable(resource?.let { ContextCompat.getDrawable(context, it) })
     }
 
     fun setAssetDrawable(drawable: Drawable? = null) {
-        assetImageView.setImageDrawable(drawable)
-        assetImageView.visibility = if (drawable != null) {
-            View.VISIBLE
+        if (drawable != null) {
+            if (assetType == TYPE_IMAGE) {
+                assetCircularImageView.setImageDrawable(drawable)
+                assetCircularImageView.visibility = VISIBLE
+                assetImageView.visibility = GONE
+            } else {
+                assetImageView.setImageDrawable(drawable)
+                assetCircularImageView.visibility = GONE
+                assetImageView.visibility = VISIBLE
+            }
+            assetImageLayout.visibility = VISIBLE
         } else {
-            View.GONE
+            assetImageLayout.visibility = GONE
         }
     }
 
+    fun setAssetType(@AssetType type: Int) {
+        assetType = type
+        configureAsset()
+    }
+
+    private fun configureAsset() {
+        when (assetType) {
+            TYPE_IMAGE -> {
+                assetImageLayout.setBackgroundResource(0)
+            }
+            TYPE_SMALL_ICON -> {
+                assetImageView.setSize(24)
+                assetImageLayout.setBackgroundResource(0)
+            }
+            TYPE_LARGE_ICON -> {
+                assetImageView.setSize(24)
+                assetImageLayout.setBackgroundResource(R.drawable.bg_list_image)
+            }
+        }
+        recalculateAssetPosition()
+    }
+
     fun setTitle(text: CharSequence?) {
         titleTextView.text = text
         recalculateTitleBottomConstraints()
@@ -263,15 +296,15 @@ class ListRowView @JvmOverloads constructor(
     }
 
     private fun recalculateAssetPosition() {
-        with(assetImageView.layoutParams as LayoutParams) {
+        with(assetImageLayout.layoutParams as LayoutParams) {
             if (isAnyTextDifferentThanTitleVisible()) {
                 bottomToBottom = ConstraintSet.UNSET
-                topMargin = context.convertDpToPx(if (isSmallAsset) 8 else 4)
+                topMargin = context.convertDpToPx(if (assetType == TYPE_SMALL_ICON) 8 else 4)
             } else {
                 bottomToBottom = ConstraintSet.PARENT_ID
                 topMargin = context.convertDpToPx(0)
             }
-            assetImageView.layoutParams = this
+            assetImageLayout.layoutParams = this
         }
     }
 
@@ -303,5 +336,8 @@ class ListRowView @JvmOverloads constructor(
         const val BADGE_GONE = -1
         const val ACTION_NONE = -1
         const val HEADLINE_NONE = -1
+        const val TYPE_IMAGE = 0
+        const val TYPE_SMALL_ICON = 1
+        const val TYPE_LARGE_ICON = 2
     }
 }

library/src/main/java/com/telefonica/mistica/list/README.md

@@ -19,8 +19,12 @@ Implemented as a custom view, `com.telefonica.mistica.ListRowView` can be used i
     <attr name="listRowSubtitle" format="string" />
     <attr name="listRowDescription" format="string" />
     <attr name="listRowAssetDrawable" format="reference" />
+    <attr name="listRowAssetType" format="enum">
+        <enum name="image" value="0" />
+        <enum name="smallIcon" value="1" />
+        <enum name="largeIcon" value="2" />
+    </attr>
     <attr name="listRowIsBoxed" format="boolean" />
-    <attr name="listRowHasSmallAsset" format="boolean" />
     <attr name="listRowActionLayout" format="integer">
         <enum name="none" value="-1" />
     </attr>

library/src/main/res/drawable/bg_list_image.xml

@@ -0,0 +1,7 @@
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="oval">
+    <size
+        android:width="40dp"
+        android:height="40dp" />
+    <solid android:color="?colorIconDisabled" />
+</shape>