Skip to content

[SDK-386] embedded card improvements #1009

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
franco-zalamena-iterable wants to merge 4 commits into
base: master
Choose a base branch
from
+81 −64
Open

[SDK-386] embedded card improvements #1009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
33c7253
Embedded Card Layout fixes
franco-zalamena-iterable Mar 31, 2026
676d096
Default params for embedded config
franco-zalamena-iterable Mar 31, 2026
c7229cb
Fixed embedded card appearance
franco-zalamena-iterable Apr 1, 2026
e35c809
Changelog updates
franco-zalamena-iterable Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).

## [Unreleased]
### Fixed
- Fixed `IterableEmbeddedView` card layout rendering issues: image now displays at a 16:9 aspect ratio instead of collapsing to zero height, card container no longer expands to fill the parent, buttons use a text style for better alignment with the campaign preview, missing end margin on the card is now applied, bottom spacing on buttons is no longer cut off, and the image properly clips to the card's rounded corners.

### Added
- Added `imageScaleType` to `IterableEmbeddedViewConfig` to allow configuring the image scale type for embedded message views.
- Added default values to all `IterableEmbeddedViewConfig` constructor parameters for easier configuration.

## [3.7.0]
- Replaced the deprecated `AsyncTask`-based push notification handling with `WorkManager` for improved reliability and compatibility with modern Android versions. No action is required.
Expand Down
9 changes: 5 additions & 4 deletions iterableapi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,17 +104,17 @@ class IterableEmbeddedView() : Fragment() {
val view = when (viewType) {
IterableEmbeddedViewType.BANNER -> {
val bannerView = inflater.inflate(R.layout.banner_view, container, false)
bind(viewType, bannerView, message)
bind(viewType, bannerView, message, config)
bannerView
}
IterableEmbeddedViewType.CARD -> {
val cardView = inflater.inflate(R.layout.card_view, container, false)
bind(viewType, cardView, message)
bind(viewType, cardView, message, config)
cardView
}
IterableEmbeddedViewType.NOTIFICATION -> {
val notificationView = inflater.inflate(R.layout.notification_view, container, false)
bind(viewType, notificationView, message)
bind(viewType, notificationView, message, config)
notificationView
}
}
Expand Down Expand Up @@ -167,7 +167,7 @@ class IterableEmbeddedView() : Fragment() {
bodyText.setTextColor(bodyTextColor)
}

private fun bind(viewType: IterableEmbeddedViewType, view: View, message: IterableEmbeddedMessage): View {
private fun bind(viewType: IterableEmbeddedViewType, view: View, message: IterableEmbeddedMessage, config: IterableEmbeddedViewConfig?): View {
val embeddedMessageViewTitle: TextView = view.findViewById(R.id.embedded_message_title)
val embeddedMessageViewBody: TextView = view.findViewById(R.id.embedded_message_body)
val embeddedMessageViewButton: Button = view.findViewById(R.id.embedded_message_first_button)
Expand All @@ -179,6 +179,7 @@ class IterableEmbeddedView() : Fragment() {
if(message.elements?.mediaURL?.isEmpty() == true) {
embeddedMessageImageView.visibility = View.GONE
} else {
config?.imageScaleType?.let { embeddedMessageImageView.scaleType = it }
Glide.with(view.context).load(message.elements?.mediaURL).into(embeddedMessageImageView)
embeddedMessageImageView.contentDescription = message.elements?.mediaUrlCaption
}
Expand Down
20 changes: 18 additions & 2 deletions ...pi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedViewArguments.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package com.iterable.iterableapi.ui.embedded

import android.os.Bundle
import android.widget.ImageView
import com.iterable.iterableapi.IterableEmbeddedMessage
import com.iterable.iterableapi.IterableLogger
import org.json.JSONException
Expand All @@ -23,6 +24,7 @@ internal object IterableEmbeddedViewArguments {
private const val KEY_SECONDARY_BTN_TEXT = "secondary_btn_text"
private const val KEY_TITLE_COLOR = "title_color"
private const val KEY_BODY_COLOR = "body_color"
private const val KEY_IMAGE_SCALE_TYPE = "image_scale_type"

fun toBundle(
viewType: IterableEmbeddedViewType,
Expand Down Expand Up @@ -78,7 +80,8 @@ internal object IterableEmbeddedViewArguments {
arguments.containsKey(KEY_SECONDARY_BTN_BG) ||
arguments.containsKey(KEY_SECONDARY_BTN_TEXT) ||
arguments.containsKey(KEY_TITLE_COLOR) ||
arguments.containsKey(KEY_BODY_COLOR)
arguments.containsKey(KEY_BODY_COLOR) ||
arguments.containsKey(KEY_IMAGE_SCALE_TYPE)

return if (hasConfig) {
IterableEmbeddedViewConfig(
Expand All @@ -91,7 +94,15 @@ internal object IterableEmbeddedViewArguments {
secondaryBtnBackgroundColor = arguments.getIntOrNull(KEY_SECONDARY_BTN_BG),
secondaryBtnTextColor = arguments.getIntOrNull(KEY_SECONDARY_BTN_TEXT),
titleTextColor = arguments.getIntOrNull(KEY_TITLE_COLOR),
bodyTextColor = arguments.getIntOrNull(KEY_BODY_COLOR)
bodyTextColor = arguments.getIntOrNull(KEY_BODY_COLOR),
imageScaleType = arguments.getStringOrNull(KEY_IMAGE_SCALE_TYPE)?.let {
try {
ImageView.ScaleType.valueOf(it)
} catch (e: IllegalArgumentException) {
IterableLogger.e(TAG, "Invalid image scale type: $it, using default")
null
}
}
)
} else {
null
Expand All @@ -110,6 +121,7 @@ internal object IterableEmbeddedViewArguments {
cfg.secondaryBtnTextColor?.let { putInt(KEY_SECONDARY_BTN_TEXT, it) }
cfg.titleTextColor?.let { putInt(KEY_TITLE_COLOR, it) }
cfg.bodyTextColor?.let { putInt(KEY_BODY_COLOR, it) }
cfg.imageScaleType?.let { putString(KEY_IMAGE_SCALE_TYPE, it.name) }
}
}

Expand All @@ -120,4 +132,8 @@ internal object IterableEmbeddedViewArguments {
private fun Bundle.getFloatOrNull(key: String): Float? {
return if (containsKey(key)) getFloat(key) else null
}

private fun Bundle.getStringOrNull(key: String): String? {
return if (containsKey(key)) getString(key) else null
}
}
23 changes: 13 additions & 10 deletions ...leapi-ui/src/main/java/com/iterable/iterableapi/ui/embedded/IterableEmbeddedViewConfig.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
package com.iterable.iterableapi.ui.embedded

import android.widget.ImageView

data class IterableEmbeddedViewConfig(
val backgroundColor: Int?,
val borderColor: Int?,
val borderWidth: Int?,
val borderCornerRadius: Float?,
val primaryBtnBackgroundColor: Int?,
val primaryBtnTextColor: Int?,
val secondaryBtnBackgroundColor: Int?,
val secondaryBtnTextColor: Int?,
val titleTextColor: Int?,
val bodyTextColor: Int?
val backgroundColor: Int? = null,
val borderColor: Int? = null,
val borderWidth: Int? = null,
val borderCornerRadius: Float? = null,
val primaryBtnBackgroundColor: Int? = null,
val primaryBtnTextColor: Int? = null,
val secondaryBtnBackgroundColor: Int? = null,
val secondaryBtnTextColor: Int? = null,
val titleTextColor: Int? = null,
val bodyTextColor: Int? = null,
val imageScaleType: ImageView.ScaleType? = null
)
44 changes: 20 additions & 24 deletions iterableapi-ui/src/main/res/layout-v21/card_view.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,19 @@
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="12dp"
app:cardCornerRadius="8dp"
app:cardElevation="0dp"
android:background="@drawable/banner_card_border"
android:clipToOutline="true"
android:outlineProvider="background"
android:orientation="vertical">

<com.google.android.material.imageview.ShapeableImageView
Expand All @@ -19,18 +24,18 @@
android:layout_height="0dp"
android:contentDescription=""
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/embedded_message_text_container"
app:shapeAppearanceOverlay="@style/classCardStyle" />
/>

<LinearLayout
android:id="@+id/embedded_message_text_container"
android:layout_width="0dp"
android:layout_height="@dimen/card_text_container_height"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@id/embedded_message_buttons_container"
app:layout_constraintTop_toBottomOf="@id/embedded_message_image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">

Expand Down Expand Up @@ -79,41 +84,32 @@
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/embedded_message_text_container"
app:layout_constraintBottom_toBottomOf="parent">

<com.google.android.material.button.MaterialButton
android:id="@+id/embedded_message_first_button"
style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginStart="16dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:minWidth="0dp"
android:ellipsize="end"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:singleLine="true"
android:stateListAnimator="@null"
android:textAllCaps="false"
android:textSize="14sp"
app:cornerRadius="32dp" />
android:textSize="14sp" />

<com.google.android.material.button.MaterialButton
android:id="@+id/embedded_message_second_button"
style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginEnd="16dp"
android:layout_height="wrap_content"
android:minWidth="0dp"
android:ellipsize="end"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:singleLine="true"
android:stateListAnimator="@null"
android:text=""
android:textAllCaps="false"
app:cornerRadius="32dp" />
android:textSize="14sp" />

</LinearLayout>

Expand Down
43 changes: 19 additions & 24 deletions iterableapi-ui/src/main/res/layout/card_view.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,20 @@
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:layout_gravity="center_vertical"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="12dp"
app:cardCornerRadius="8dp"
app:cardElevation="0dp"
android:background="@drawable/banner_card_border"
android:clipToOutline="true"
android:outlineProvider="background"
android:orientation="vertical">

<com.google.android.material.imageview.ShapeableImageView
Expand All @@ -20,18 +24,18 @@
android:layout_height="0dp"
android:contentDescription=""
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="H,16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/embedded_message_text_container"
app:shapeAppearanceOverlay="@style/classCardStyle" />
/>

<LinearLayout
android:id="@+id/embedded_message_text_container"
android:layout_width="0dp"
android:layout_height="@dimen/card_text_container_height"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@id/embedded_message_buttons_container"
app:layout_constraintTop_toBottomOf="@id/embedded_message_image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">

Expand Down Expand Up @@ -79,41 +83,32 @@
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/embedded_message_text_container"
app:layout_constraintBottom_toBottomOf="parent">

<com.google.android.material.button.MaterialButton
android:id="@+id/embedded_message_first_button"
style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginStart="16dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:minWidth="0dp"
android:ellipsize="end"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:singleLine="true"
android:stateListAnimator="@null"
android:textAllCaps="false"
android:textSize="14sp"
app:cornerRadius="32dp" />
android:textSize="14sp" />

<com.google.android.material.button.MaterialButton
android:id="@+id/embedded_message_second_button"
style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_marginEnd="16dp"
android:layout_height="wrap_content"
android:minWidth="0dp"
android:ellipsize="end"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:singleLine="true"
android:stateListAnimator="@null"
android:text=""
android:textAllCaps="false"
app:cornerRadius="32dp" />
android:textSize="14sp" />

</LinearLayout>

Expand Down
Loading