A dashboard screen is a stack of fixed-size cards: a big clock, a weather card, a countdown, a month calendar. It looks right on my test phone, and then someone sets the system font to Large or runs a denser display, and text spills out of the cards. This is what I changed in my Android flip-clock app (Kotlin and XML) to stop that.
The two settings I test with
Both can be changed from adb, so every layout change gets checked at the extremes:
adb shell wm density 560
adb shell settings put system font_scale 1.3
After testing I put the device back with wm density 420 and font_scale 1.0. It is easy to forget, and then every screenshot afterwards is wrong.
Decision 1: card text in dp, not sp
On the dashboard the cards have a fixed size. If their text is in sp, a larger system font makes the text outgrow the card. So the text inside the dashboard cards uses dp, and the system font scale no longer changes it.
The trade-off is real: those cards ignore the user's font-size preference. I accepted it because the cards show short, glanceable values (a temperature, a day count) rather than paragraphs, and an overflowing card is worse than a card that keeps its size.
Decision 2: a separate landscape layout for the tightest card
The weather card has to show a required attribution: a logo plus a line of text. On short screens it was cut off, in portrait and in landscape. Two changes fixed it: the card's text is sized in dp, and landscape got its own, more compact layout (layout-land/) where the attribution sits in one row.
The cost is that the two layouts have to be kept in sync by hand. I wrote that into the project notes so I don't forget.
Decision 3: clipping you only see on a zoomed screenshot
A small gear button on the countdown card looked fine until I zoomed in: its top and right edges were cut off. The button overlaps the card's 14dp padding, and a parent clips its children to its padding by default (clipToPadding is true). Setting clipToPadding="false" on the card's root fixed it. I only found it because I zoomed into screenshots of every card instead of glancing at the whole screen.
What I would do again
- Test at the extremes first, not at the end.
- Zoom into each card. Whole-screen screenshots hide small clipping.
- Write down which layouts must be changed together.
What I'd like to hear
How do you handle fixed-size cards and large system fonts? If you keep sp, do you let cards grow instead? I'd like to compare approaches.
Top comments (0)