Text to Tiles: The Day StreamBox Went Visual — Image Loading
Context: This post is part of the StreamBox branch‑by‑branch series.
Each branch adds one architecture concept and stops.
The UI Didn’t Change Early — On Purpose
The original Home screen was intentionally boring: a text list in a column. That was enough to validate the architecture without locking in any visual choices. Reducers, use cases, repositories, and DI were stabilized first so UI could evolve without stress.
Streaming apps are visual-first. A column of text was a placeholder; it wasn’t the destination. Once the architecture was solid, the UI was finally allowed to become what the domain demanded: a catalog.
Why a 2:3 Poster Grid
A streaming catalog lives and dies by artwork. Posters are the primary visual asset, and the industry standard is 2:3 portrait.
A grid of 2:3 tiles does three things immediately:
- mirrors how content is marketed,
- increases scan speed,
- keeps density high without overwhelming the eye.
Landscape tiles are better for hero rails and playback states — not for browsing a large library.
The Tile Is a Composable, Not a Feature
The tile is a UI primitive: a reusable, scalable building block. It is responsible for layout and rendering only, and it never pulls data or performs logic.
This separation keeps the tile portable — Home today, Search tomorrow — without coupling it to any feature decisions.
@Composable
fun TwoByThreeTile(
title: String,
imageUrl: String?,
modifier: Modifier = Modifier
)Image Loading Lives in the UI Layer
Image loading is not business logic. Reducers, use cases, repositories stay image-agnostic.
The UI decides how to display content, not what to fetch.
Get Manish Dubey’s stories in your inbox
Join Medium for free to get updates from this writer.
That keeps layers clean:
- Domain models carry URLs only
- UI renders them with a centralized image component
- No data layer knows or cares how the bitmap is produced
End‑to‑End URL Flow (No Leaks, No Shortcuts)
The API already provides image URLs. The mistake was dropping them before they reached UI. The fix is to keep the pipeline intact:
DTO → Domain → UI → Tile → Image Loader
This avoids coupling UI to network models and preserves clean mapping boundaries.
Image Loading Integration (UI Infrastructure)
A production‑grade image loader is used, but it’s wrapped in a shared UI component so rendering is consistent across screens.
Loading, placeholder, and error states are handled once — not reimplemented per feature.
StreamBoxImage(
imageUrl = imageUrl,
contentDescription = title
)What Did NOT Change
- No reducer changes
- No use case changes
- No repository/mediator changes
- No navigation changes
The UI evolved on top of stable architecture — nothing below it moved.
Outcome
The Home screen now looks like a real streaming app while staying faithful to clean architecture.
This upgrade proves the point: UI fidelity can improve dramatically after architecture is stable, without breaking responsibilities or layering.
If You Want to See It
Series Links
Previous: feature/di-wiring — Dependency Injection
Next: feature/ui-improvement — Home Screen UX Design
