ANDROID-17239 Compose MediaCard imagePosition left/right #481

jeprubio · 2026-01-08T09:34:05Z

🥅 What's the goal?

Update MediaCard so that it also handles imagePosition to left and right.

Specs:
https://www.figma.com/design/tKdPOfcUALzVIh5oizFbm7/%F0%9F%94%B8-Cards-Specs?node-id=11252-17819&t=07VsJqXhuGmrwcIq-4

Examples:
https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=54711-14370&t=v3KwV70ZvdIgGul4-4

🚧 How do we do it?

Add the imagePosition parameter to MediaCard.
Add imageContentScale parameter to MediaCard.
Add screenshot tests and a placeholder image for the tests and previews.

☑️ Checks

I updated the documentation, including readmes and wikis. If this is a breaking change, tag the PR with "Breaking Change" label and remember to include breaking change migration guide in release notes where this version is released.
Tested with dark mode.
Tested with API 24.
Sync done with iOS team for this feature to ensure alignment, if applies.
Accessibility considerations.

🧪 How can I test this?

🖼️ Screenshots/Videos

Before	After
Before.mov	After.mov

Mistica App QR or download link ([Firebase] 📱 New catalog for testing generated comment)
Reviewed by Mistica design team (added mistica-design to reviewers)

jeprubio · 2026-01-08T10:18:33Z

library/src/main/java/com/telefonica/mistica/compose/card/highlightedcard/HighLightedCard.kt

-private fun applyLinkTextFix(text: String): String {
-    return text.padEnd(18, ' ')
-}


Moved to an extension and reused in the MediaCard

jeprubio · 2026-01-08T10:18:55Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

+                CardActions(primaryButton, linkButton)
+            }
+        }
+        MediaCardImagePosition.Left -> {


New Left image position

jeprubio · 2026-01-08T10:19:03Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

+                }
+            }
+        }
+        MediaCardImagePosition.Right -> {


Right image position

jeprubio · 2026-01-08T10:20:08Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

-sealed class MediaCardImage(val contentDescription: String?) {
-    class MediaCardImageResource(@DrawableRes val imageRes: Int, contentDescription: String? = null) : MediaCardImage(contentDescription)
-    class MediaCardImageBitmap(val imageBitmap: ImageBitmap, contentDescription: String? = null) : MediaCardImage(contentDescription)
+public sealed class MediaCardImage(public val contentDescription: String?) {


added public visibility explicitely

jeprubio · 2026-01-08T10:20:22Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

+    public class MediaCardImageBitmap(public val imageBitmap: ImageBitmap, contentDescription: String? = null) : MediaCardImage(contentDescription)
+}
+
+public enum class MediaCardImagePosition {


New enum for the image position

jeprubio · 2026-01-08T10:53:17Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

+    imagePosition: MediaCardImagePosition = MediaCardImagePosition.Top,
+    imageContentScale: ContentScale = ContentScale.Crop,


New parameters to MediaCard

jeprubio · 2026-01-08T11:42:28Z

library/src/main/java/com/telefonica/mistica/compose/card/Card.kt

            }
-            linkButton?.let {
-                Button(
-                    modifier = if (primaryButton == null) Modifier.offset(x = (-8).dp) else Modifier,


Now we can use invalidatePaddings and invalidateMinWidth so the offset(x = (-8).dp) hack is no longer needed.

Copilot

Pull request overview

This PR extends the MediaCard component to support left and right image positioning in addition to the existing top position, aligning with updated design specifications.

Key Changes

Added imagePosition parameter to MediaCard to control image placement (Top, Left, Right)
Added imageContentScale parameter to allow customization of image scaling behavior
Extracted link text padding utility function to shared location for reuse across card components

Reviewed changes

Copilot reviewed 6 out of 31 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`MediaCard.kt`	Added image position variants with different layouts and made API classes public
`Card.kt`	Enhanced to support vertical button orientation and configurable padding for flexible layouts
`HighLightedCard.kt`	Refactored to use shared link text padding utility
`TextUtils.kt`	Added shared utility function for link text padding
`MediaCardTest.kt`	Added comprehensive parameterized tests for all image positions and button combinations
`MediaCards.kt`	Updated catalog demo to include image position selector

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

library/src/main/java/com/telefonica/mistica/compose/card/Card.kt

library/src/main/java/com/telefonica/mistica/util/TextUtils.kt

Co-authored-by: Copilot <[email protected]>

…magePosition' into feature/ANDROID-17239-MediaCardImagePosition

github-actions · 2026-01-08T12:02:27Z

[Firebase] 📱 New catalog for testing generated:
Download from Firebase
Download from App Tester

pmartinbTEF · 2026-01-09T09:46:43Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

+                    CardImage(
+                        mediaCardImage = image,
+                        modifier = Modifier
+                            .width(150.dp)


could be this mediaCardImage width extracted to a const val?

Sure 687c1f5

pmartinbTEF · 2026-01-09T09:57:39Z

library/src/main/java/com/telefonica/mistica/compose/card/mediacard/MediaCard.kt

Should it be implemented in xml too? Also media card readme should be updated

I think xml can be done in a different task if needed as we did lately in other tasks like when applying accessibility in views and in compose separately.

Also, doing it in xml when we know for sure we won't need this as we do everything new in compose I'm not sure it makes sense. It would probably never be needed/used by anybody.

I've added a couple of images to the readme and improved that README.md

pmartinbTEF

Good job! just a couple of questions

github-actions · 2026-01-09T10:41:07Z

[Firebase] 📱 New catalog for testing generated:
Download from Firebase
Download from App Tester

juangardi21

LGTM, nice job!

pmartinbTEF

Thanks

…eadme

github-actions · 2026-01-12T11:13:43Z

[Firebase] 📱 New catalog for testing generated:
Download from Firebase
Download from App Tester

AnaMontes11

lgtm

jeprubio and others added 5 commits January 8, 2026 09:24

ANDROID-17239 add imagePosition to MediaCard

3661174

ANDROID-17239 add tests to MediaCard

65c9549

Updated screenshots baseline

c4a307d

ANDROID-17239 add previews

11e66ac

ANDROID-17239 update imageContentScale parameter

0f7ee08

jeprubio commented Jan 8, 2026

View reviewed changes

jeprubio and others added 2 commits January 8, 2026 11:24

ANDROID-17239 add trailing commas & remove unneeded default value

21c9364

Updated screenshots baseline

cedc726

Telefonica deleted a comment from github-actions bot Jan 8, 2026

jeprubio commented Jan 8, 2026

View reviewed changes

Telefonica deleted a comment from github-actions bot Jan 8, 2026

ANDROID-17239 move mistica_placeholder.png

f9483b5

Telefonica deleted a comment from github-actions bot Jan 8, 2026

Updated screenshots baseline

034a54f

jeprubio commented Jan 8, 2026

View reviewed changes

jeprubio marked this pull request as ready for review January 8, 2026 11:47

jeprubio requested a review from Copilot January 8, 2026 11:47

Copilot AI reviewed Jan 8, 2026

View reviewed changes

jeprubio and others added 3 commits January 8, 2026 12:50

Update library/src/main/java/com/telefonica/mistica/util/TextUtils.kt

fd38e57

Co-authored-by: Copilot <[email protected]>

ANDROID-17239 update using constant

4ad3813

Merge remote-tracking branch 'origin/feature/ANDROID-17239-MediaCardI…

1dbece7

…magePosition' into feature/ANDROID-17239-MediaCardImagePosition

jeprubio requested review from a team and neo-sagittal and removed request for a team January 8, 2026 11:58

jeprubio requested review from a team, juangardi21 and yceballost and removed request for a team January 8, 2026 12:00

Telefonica deleted a comment from github-actions bot Jan 8, 2026

jeprubio removed the request for review from neo-sagittal January 8, 2026 12:08

pmartinbTEF reviewed Jan 9, 2026

View reviewed changes

ANDROID-17239 add SIDE_IMAGE_WIDTH constant

687c1f5

pmartinbTEF reviewed Jan 9, 2026

View reviewed changes

jeprubio added 2 commits January 9, 2026 11:17

ANDROID-17239 add sample images

9dbd2d4

ANDROID-17239 improve MediaCard readme

b1540bf

Telefonica deleted a comment from github-actions bot Jan 9, 2026

jeprubio requested a review from pmartinbTEF January 9, 2026 10:35

juangardi21 approved these changes Jan 9, 2026

View reviewed changes

pmartinbTEF approved these changes Jan 12, 2026

View reviewed changes

jeprubio added 2 commits January 12, 2026 12:00

ANDROID-17239 save readme images in the repo

3abaa55

ANDROID-17239 add Compose Enhancements section in the classic views r…

4df2ff4

…eadme

jeprubio requested review from a team and AnaMontes11 and removed request for a team and yceballost January 12, 2026 15:41

AnaMontes11 approved these changes Jan 12, 2026

View reviewed changes

jeprubio merged commit 4626b3f into main Jan 12, 2026
4 checks passed

jeprubio deleted the feature/ANDROID-17239-MediaCardImagePosition branch January 12, 2026 16:39

jeprubio changed the title ~~ANDROID-17239 MediaCard imagePosition left/right~~ ANDROID-17239 Compose MediaCard imagePosition left/right Jan 12, 2026

		imagePosition: MediaCardImagePosition = MediaCardImagePosition.Top,
		imageContentScale: ContentScale = ContentScale.Crop,

ANDROID-17239 Compose MediaCard imagePosition left/right #481

ANDROID-17239 Compose MediaCard imagePosition left/right #481

Uh oh!

Conversation

jeprubio commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🥅 What's the goal?

🚧 How do we do it?

☑️ Checks

🧪 How can I test this?

Uh oh!

jeprubio Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeprubio Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 8, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeprubio Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pmartinbTEF left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 9, 2026

Uh oh!

juangardi21 left a comment

Choose a reason for hiding this comment

Uh oh!

pmartinbTEF left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 12, 2026

Uh oh!

AnaMontes11 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jeprubio commented Jan 8, 2026 •

edited

Loading

jeprubio Jan 8, 2026 •

edited

Loading

jeprubio Jan 8, 2026 •

edited

Loading

jeprubio Jan 9, 2026 •

edited

Loading