ANDROID-13941 Implement Callout Image/Avatar

UPGRADING.md

@@ -71,3 +71,6 @@ Watch out that the new app:style attribute is needed to set the button style (wi
 Later on we'll deprecate the button.Button in favour of button2.Button and start migrating the rest.
 
 When this new compose wrapper is used on dialogs the ViewTreeLifecycle should be provided (see initViewTreeOwners() in Sheet.kt).
+
+## Upgrade to version 10.0.0
+`calloutIcon` has been replaced with `calloutAsset` and `calloutAssetType` to allow the use of images and circular images in the `Callout` component

catalog/src/main/java/com/telefonica/mistica/catalog/ui/classic/components/CalloutsCatalogFragment.kt

@@ -11,6 +11,7 @@ import android.widget.Button
 import android.widget.Toast
 import androidx.fragment.app.Fragment
 import com.telefonica.mistica.callout.CalloutView
+import com.telefonica.mistica.callout.CalloutViewImageConfig
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.input.CheckBoxInput
 import com.telefonica.mistica.input.DropDownInput
@@ -40,6 +41,16 @@ class CalloutsCatalogFragment : Fragment() {
             )
             setText(CalloutButtonsConfig.PRIMARY.name)
         }
+        with(view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown) {
+            setAdapter(
+                DropDownInput.Adapter(
+                    view.context,
+                    R.layout.dropdown_menu_popup_item,
+                    CalloutViewImageConfig.values().map { it.name },
+                )
+            )
+            setText(CalloutViewImageConfig.ICON.name)
+        }
         view.findViewById<Button>(R.id.update_button).setOnClickListener {
             updateCalloutView(view)
         }
@@ -52,11 +63,25 @@ class CalloutsCatalogFragment : Fragment() {
                 visibility = VISIBLE
             }
 
-            if (view.findViewById<CheckBoxInput>(R.id.show_icon_input).isChecked()) {
-                setIcon(R.drawable.ic_callout)
-            } else {
-                setIcon(null)
+            val imageConfig = CalloutViewImageConfig.valueOf(
+                view.findViewById<DropDownInput>(R.id.image_config_dropdown).dropDown.text.toString()
+            )
+
+            when (imageConfig) {
+                CalloutViewImageConfig.NONE -> {
+                    setAssetType(imageConfig)
+                }
+                CalloutViewImageConfig.ICON -> {
+                    setAsset(R.drawable.ic_callout)
+                    setAssetType(imageConfig)
+                }
+                CalloutViewImageConfig.SQUARE_IMAGE,
+                CalloutViewImageConfig.CIRCULAR_IMAGE -> {
+                    setAsset(R.drawable.media_card_sample_image)
+                    setAssetType(imageConfig)
+                }
             }
+
             setDismissable(view.findViewById<CheckBoxInput>(R.id.dismiss_input).isChecked())
             val inverse = view.findViewById<CheckBoxInput>(R.id.inverse_input).isChecked()
             setInverse(inverse)

catalog/src/main/java/com/telefonica/mistica/catalog/ui/compose/components/Callouts.kt

@@ -21,11 +21,13 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.telefonica.mistica.callout.CalloutViewImageConfig
 import com.telefonica.mistica.catalog.R
 import com.telefonica.mistica.catalog.ui.compose.common.DropDown
 import com.telefonica.mistica.compose.button.Button
 import com.telefonica.mistica.compose.callout.Callout
 import com.telefonica.mistica.compose.callout.CalloutButtonConfig
+import com.telefonica.mistica.compose.input.DropDownInput
 import com.telefonica.mistica.compose.theme.MisticaTheme
 
 @Composable
@@ -47,14 +49,16 @@ fun Callouts() {
             Text("Inverse variant")
         }
 
-        var showIcon by remember { mutableStateOf(false) }
-        Row(
-            modifier = Modifier.padding(horizontal = 16.dp),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Checkbox(checked = showIcon, onCheckedChange = { showIcon = !showIcon })
-            Text("Show icon")
-        }
+        var iconType: CalloutViewImageConfig by remember { mutableStateOf(CalloutViewImageConfig.ICON) }
+        DropDownInput(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(40.dp, 8.dp),
+            items = CalloutViewImageConfig.values().map { it.name },
+            currentItemIndex = CalloutViewImageConfig.values().indexOf(iconType),
+            onItemSelected = { index -> iconType = CalloutViewImageConfig.values()[index] },
+            hint = "Icon type",
+        )
 
         var dismissable by remember { mutableStateOf(false) }
         Row(
@@ -67,46 +71,58 @@ fun Callouts() {
 
         var title by remember { mutableStateOf("Callout sample title") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = title,
             onValueChange = { title = it },
             label = { Text("Title") }
         )
 
         var description by remember { mutableStateOf("Callout sample description") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = description,
             onValueChange = { description = it },
             label = { Text("Description") }
         )
 
         var buttonConfig by remember { mutableStateOf(CalloutButtonConfig.PRIMARY) }
         DropDown(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             selectedValue = buttonConfig,
             onValueChanged = { buttonConfig = it }
         )
 
         var primaryButtonText by remember { mutableStateOf("Primary Action") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = primaryButtonText,
             onValueChange = { primaryButtonText = it },
             label = { Text("Primary Button text") }
         )
 
         var secondaryButtonText by remember { mutableStateOf("Secondary Action") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = secondaryButtonText,
             onValueChange = { secondaryButtonText = it },
             label = { Text("Secondary Button text") }
         )
 
         var linkText by remember { mutableStateOf("Link Action") }
         OutlinedTextField(
-            modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp),
             value = linkText,
             onValueChange = { linkText = it },
             label = { Text("Link Button text") }
@@ -128,11 +144,24 @@ fun Callouts() {
                     ),
             ) {
                 Callout(
-                    modifier = Modifier.fillMaxWidth().padding(16.dp),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(16.dp),
                     title = title.takeIf { it.isNotBlank() },
                     description = description.takeIf { it.isNotBlank() },
                     buttonConfig = buttonConfig,
-                    iconRes = if (showIcon) R.drawable.ic_callout else null,
+                    imageConfig = when (iconType) {
+                        CalloutViewImageConfig.NONE -> CalloutViewImageConfig.NONE
+                        CalloutViewImageConfig.ICON -> CalloutViewImageConfig.ICON
+                        CalloutViewImageConfig.SQUARE_IMAGE -> CalloutViewImageConfig.SQUARE_IMAGE
+                        CalloutViewImageConfig.CIRCULAR_IMAGE -> CalloutViewImageConfig.CIRCULAR_IMAGE
+                    },
+                    iconRes = when (iconType) {
+                        CalloutViewImageConfig.NONE -> null
+                        CalloutViewImageConfig.ICON -> R.drawable.ic_callout
+                        CalloutViewImageConfig.CIRCULAR_IMAGE -> R.drawable.media_card_sample_image
+                        CalloutViewImageConfig.SQUARE_IMAGE -> R.drawable.card_image_sample
+                    },
                     dismissable = dismissable,
                     inverse = inverse,
                     onDismiss = { isShown = false },
@@ -143,7 +172,9 @@ fun Callouts() {
             }
         } else {
             Button(
-                modifier = Modifier.fillMaxWidth().padding(start = 16.dp, end = 16.dp, top = 8.dp),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 16.dp, end = 16.dp, top = 8.dp),
                 text = "Show callout again",
                 onClickListener = {
                     isShown = true
@@ -152,4 +183,3 @@ fun Callouts() {
         }
     }
 }
-

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

@@ -30,19 +30,19 @@
 				/>
 
 		<com.telefonica.mistica.input.CheckBoxInput
-				android:id="@+id/show_icon_input"
+				android:id="@+id/dismiss_input"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_margin="8dp"
-				app:inputCheckText="Show icon"
+				app:inputCheckText="Is Dismissable"
 				/>
 
-		<com.telefonica.mistica.input.CheckBoxInput
-				android:id="@+id/dismiss_input"
+		<com.telefonica.mistica.input.DropDownInput
+				android:id="@+id/image_config_dropdown"
 				android:layout_width="match_parent"
 				android:layout_height="wrap_content"
 				android:layout_margin="8dp"
-				app:inputCheckText="Is Dismissable"
+				app:inputHint="Select icon/image config"
 				/>
 
 		<com.telefonica.mistica.input.TextInput
@@ -120,6 +120,8 @@
 					android:id="@+id/callout_view"
 					android:layout_width="match_parent"
 					android:layout_height="wrap_content"
+					tools:calloutAsset="@drawable/ic_callout"
+					tools:calloutAssetType="icon"
 					/>
 		</LinearLayout>