Mobile App Chat Screen Design
Chat is technically one of the most complex screens to design. Not because there are many elements, but because it is asynchronous, real-time, and works with content of unpredictable size. Most chat UI issues appear not at design stage, but during implementation—when it turns out the design did not account for all message states, and the developer improvises.
Message Bubbles: Much More Complex Than It Seems
User message (outgoing) and peer message (incoming) are two different components, though visually similar. Different offsets, different backgrounds, different alignment.
Message types that must be refined in design before development:
- Text (short single-line vs long multi-line—bubble behavior differs)
- Single image / gallery (2–4 photos in mosaic layout)
- Voice message with waveform and timer
- File (pdf, docx) with type icon and size
- System message ("User joined chat")
- Message with reply (quote of incoming + text)
- Deleted message ("Message deleted")
Each type is a separate component in Figma with variants for incoming/outgoing.
Delivery and Read Statuses
Message statuses below text: sending (clock), sent (one checkmark), delivered (two gray checkmarks), read (two blue checkmarks). This is WhatsApp/Telegram pattern, user knows it. Deviating without reason is not recommended.
Interesting detail: message time. Show it always or only on tap? Telegram shows always on right of last line, iMessage by swipe left. Both approaches are valid, but choice must be made in design, not left to developer.
Input Bar
The most often-reworked chat component. Standard states:
- Empty field + action icons (attach, microphone)
- Field with text (send button appears, microphone disappears)
- Voice recording (special mode with waveform and cancel button)
- Reply mode (banner with quoted message above input)
- Field locked (readonly mode, e.g., archived chat)
Input bar height changes on multi-line input—this must be explicitly shown in design. On iOS textView expands upward to maxHeight, then scroll appears inside. On Android Compose BasicTextField with maxLines behaves similarly.
Media attachment opens bottom sheet with gallery, camera, files access. Permissions: NSPhotoLibraryUsageDescription (iOS) and READ_MEDIA_IMAGES (Android 13+)—design should show permission request screen if not yet granted.
Chat List (if Needed)
Dialog list screen: avatar, name, last message (cut to one line), time, unread counter. Unread counter—badge with number, hidden on zero. Swipe on cell: mute notifications, delete, pin.
Online status: green dot on avatar. Only if presence is implemented in app (Socket.io, Centrifuge, Firebase Realtime Database, Supabase Realtime). If not—do not show, it misleads user.
Real-Time and Offline
Chat design must show what happens with no network. Message is sent—goes to queue (local optimistic update)—appears in chat with "sending" status—on connection restore goes to server. This is not just a pretty clock icon, it is a specific UX pattern that must be shown in design.
Timeline
| Scope | Timeline |
|---|---|
| Chat screen, basic message types | 1.5–2 days |
| Chat + dialog list + voice | 2–3 days |
| Full messenger with channels/groups | 4–5 days |
Cost is calculated individually after reviewing requirements.