ANDROID-14761 Fix Image size of EmptyStateScreenView when it's IMAGE_…

…SIZE_FULL_WIDTH (#363)
Telefonica · Jun 6, 2024 · f654c69 · f654c69
1 parent 5fbe5d1
commit f654c69
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 26 deletions.
diff --git a/library/src/main/java/com/telefonica/mistica/emptystate/screen/EmptyStateScreenView.kt b/library/src/main/java/com/telefonica/mistica/emptystate/screen/EmptyStateScreenView.kt
@@ -15,6 +15,7 @@ import android.widget.TextView
 import androidx.annotation.DrawableRes
 import androidx.annotation.IntDef
 import androidx.appcompat.content.res.AppCompatResources
+import androidx.constraintlayout.widget.ConstraintLayout
 import androidx.databinding.BindingMethod
 import androidx.databinding.BindingMethods
 import com.telefonica.mistica.R
@@ -243,24 +244,35 @@ class EmptyStateScreenView @JvmOverloads constructor(
     }
 
     fun setImageSize(@ImageSize imageSize: Int) {
-        val imageWidth: Int = when (imageSize) {
-            IMAGE_SIZE_ICON -> context.convertDpToPx(64)
-            IMAGE_SIZE_SMALL -> ViewGroup.LayoutParams.WRAP_CONTENT
-            else -> ViewGroup.LayoutParams.MATCH_PARENT
-        }
-        val imageHeight: Int = when (imageSize) {
-            IMAGE_SIZE_ICON -> context.convertDpToPx(64)
-            IMAGE_SIZE_SMALL -> context.convertDpToPx(112)
-            else -> ViewGroup.LayoutParams.WRAP_CONTENT
-        }
-        image.scaleType = when (imageSize) {
-            IMAGE_SIZE_ICON -> ImageView.ScaleType.CENTER_INSIDE
-            IMAGE_SIZE_SMALL -> ImageView.ScaleType.FIT_START
-            else -> ImageView.ScaleType.CENTER_CROP
-        }
-        image.layoutParams = image.layoutParams.apply {
-            width = imageWidth
-            height = imageHeight
+        val layoutParams = image.layoutParams as ConstraintLayout.LayoutParams
+        with (layoutParams) {
+            when (imageSize) {
+                IMAGE_SIZE_ICON -> {
+                    width = context.convertDpToPx(IMAGE_ICON_SIDE_PIXELS)
+                    height = context.convertDpToPx(IMAGE_ICON_SIDE_PIXELS)
+                    dimensionRatio = null
+                    image.scaleType = ImageView.ScaleType.CENTER_INSIDE
+                }
+                IMAGE_SIZE_SMALL -> {
+                    width = ViewGroup.LayoutParams.WRAP_CONTENT
+                    height = context.convertDpToPx(IMAGE_SMALL_HEIGHT_PIXELS)
+                    dimensionRatio = null
+                    image.scaleType = ImageView.ScaleType.FIT_START
+                }
+                IMAGE_SIZE_FULL_WIDTH -> {
+                    width = ViewGroup.LayoutParams.MATCH_PARENT
+                    height = 0
+                    dimensionRatio = "16:9"
+                    image.scaleType = ImageView.ScaleType.CENTER_CROP
+                }
+                else -> {
+                    width = ViewGroup.LayoutParams.MATCH_PARENT
+                    height = ViewGroup.LayoutParams.WRAP_CONTENT
+                    dimensionRatio = null
+                    image.scaleType = ImageView.ScaleType.CENTER_CROP
+                }
+            }
+            image.layoutParams = this
         }
     }
 
@@ -278,5 +290,8 @@ class EmptyStateScreenView @JvmOverloads constructor(
         const val IMAGE_SIZE_ICON = 0
         const val IMAGE_SIZE_SMALL = 1
         const val IMAGE_SIZE_FULL_WIDTH = 2
+
+        const val IMAGE_ICON_SIDE_PIXELS = 64
+        const val IMAGE_SMALL_HEIGHT_PIXELS = 112
     }
 }
diff --git a/library/src/main/res/layout/empty_state_screen_view.xml b/library/src/main/res/layout/empty_state_screen_view.xml
@@ -1,13 +1,12 @@
 <?xml version="1.0" encoding="utf-8"?>
 <merge xmlns:android="http://schemas.android.com/apk/res/android"
 		xmlns:tools="http://schemas.android.com/tools"
-		tools:parentTag="ScrollView"
-		>
+		xmlns:app="http://schemas.android.com/apk/res-auto"
+		tools:parentTag="ScrollView">
 
-	<LinearLayout
+	<androidx.constraintlayout.widget.ConstraintLayout
+			android:layout_width="match_parent"
 			android:layout_height="wrap_content"
-			android:focusable="true"
-			android:orientation="vertical"
 			android:paddingTop="64dp"
 			android:paddingEnd="24dp"
 			android:paddingBottom="24dp"
@@ -19,8 +18,10 @@
 				android:id="@+id/empty_state_screen_image"
 				android:layout_width="wrap_content"
 				android:layout_height="112dp"
-				android:scaleType="fitStart"
 				android:layout_marginStart="24dp"
+				android:scaleType="fitStart"
+				app:layout_constraintTop_toTopOf="parent"
+				app:layout_constraintStart_toStartOf="parent"
 				tools:ignore="ContentDescription"
 				tools:src="@tools:sample/avatars"
 				/>
@@ -32,6 +33,8 @@
 				android:layout_height="wrap_content"
 				android:layout_marginTop="24dp"
 				android:layout_marginStart="24dp"
+				app:layout_constraintTop_toBottomOf="@id/empty_state_screen_image"
+				app:layout_constraintStart_toStartOf="parent"
 				tools:text="Your cart is empty"
 				/>
 
@@ -44,6 +47,8 @@
 				android:layout_marginTop="16dp"
 				android:layout_marginStart="24dp"
 				android:textColor="?colorTextSecondary"
+				app:layout_constraintTop_toBottomOf="@id/empty_state_screen_title"
+				app:layout_constraintStart_toStartOf="parent"
 				tools:text="Check our marketplaces and find something for you"
 				tools:visibility="visible"
 				/>
@@ -56,6 +61,8 @@
 				android:orientation="horizontal"
 				android:layout_marginTop="24dp"
 				android:layout_marginStart="0dp"
+				app:layout_constraintTop_toBottomOf="@id/empty_state_screen_subtitle"
+				app:layout_constraintStart_toStartOf="parent"
 				>
 
 			<com.telefonica.mistica.button.ProgressButton
@@ -86,5 +93,5 @@
 					/>
 
 		</LinearLayout>
-	</LinearLayout>
-</merge>
+	</androidx.constraintlayout.widget.ConstraintLayout>
+</merge>