UI mockups · Mobile app
Android mail app UI mockup
A Material 3 (Material You) email client: search bar, filter chips, inbox list, FAB, navigation drawer, message view, compose with a dialog, a schedule-send bottom sheet, and a tablet layout with a navigation rail and date/time pickers.
The 6 screens
Android mail app: Inbox, Navigation drawer, Message, Compose, Schedule send, Tablet · schedule send. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Inbox Inbox
Phone screen with 3 chips, 2 labels, 2 lists, an extended FAB, a navigation bar, a search bar and a snackbar.
- Navigation
- Mail · Chat · Meet
- Fields
- Search in mail
- Buttons and actions
- Compose · Undo
- Lists and columns
- Priya Shah — Q4 offsite: travel details · Dev Team — Sprint 42 retro notes · Calendar — Design review moved to 3 PM · Marco Rossi — Invoice #4821 · Lena Park — Photos from Saturday · Stripe — Your October payout is on its way
- Text and labels
- Unread · Starred · Attachments · Today · Yesterday · Conversation archived
2Navigation drawer Navigation drawer
Phone screen with a label, a list and a navigation drawer.
- Headings
- Northwind Mail
- Navigation
- Inbox · Starred · Snoozed · Sent · Drafts · Trash
- Lists and columns
- Travel · Receipts · Family
- Text and labels
- Labels
3Message Message
Phone screen with 4 chips, 2 icons, 2 labels, 2 paragraphs, an avatar, a card, a circular progress, a FAB and 4 more component types.
- Headings
- Q4 offsite: travel details
- Lists and columns
- Mark unread · Move to · Snooze · Delete
- Text and labels
- Inbox · Priya Shah · to me · 9:41 AM · Hi all - flights are booked for Thursday at 7:10 AM. The hotel confirmation and the agenda are attached; shout if anything clashes with your calendar. · Downloading · Reply · Reply all · Forward
4Compose Compose
Phone screen with 2 chips, 2 dividers, 2 labels, a dialog, a paragraph, a text area, a text input and a top app bar.
- Headings
- Compose · Discard draft?
- Fields
- Re: Q4 offsite: travel details · Thanks Priya - Thursday works for me. I’ll book the airport transfer for the team…
- Buttons and actions
- Cancel · Discard
- Text and labels
- From · alex@northwind.io · To · Priya Shah · Dev Team · Your message and its attachments will not be saved.
5Schedule send Schedule send
Phone screen with 3 paragraphs, a bottom sheet, a button, a heading, a list, a segmented button, a switch and a top app bar.
- Headings
- Compose · Schedule send
- Navigation
- Tomorrow · Monday · Custom
- Buttons and actions
- Pick date & time
- Lists and columns
- Tomorrow morning · Oct 9, 8:00 AM · Tomorrow afternoon · Oct 9, 1:00 PM
- Text and labels
- To: Priya Shah, Dev Team · Re: Q4 offsite: travel details · Thanks Priya - Thursday works for me. I’ll book the airport transfer for the team… · Remind me if nobody replies in 3 days
6Tablet · schedule send Tablet · schedule send
Tablet screen with 2 buttons, a card, a date picker, a heading, a list, a navigation rail, a paragraph, a search bar and 1 more component types.
- Headings
- Schedule send
- Navigation
- Mail · Chat · Meet · Spaces
- Fields
- Search in mail
- Buttons and actions
- Cancel · Schedule
- Lists and columns
- Priya Shah · Dev Team · Calendar · Marco Rossi · Lena Park · Stripe
- Text and labels
- Pick when “Q4 offsite: travel details” goes out. · Select date · Select time
Open and edit it
The android mail app mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Social feed UI mockup - A photo-sharing app - stories and a post feed, a new-post composer and a profile with stats and a photo grid.
- Music player UI mockup - A mobile music app: a library with playlists and recently played tracks, and a now-playing screen with album art, progress and playback controls.
- iOS fitness app UI mockup - An iPhone activity tracker in the iOS 17/18 look: large-title navigation, activity rings, widgets, inset grouped lists, a tab bar, a settings sheet, an action sheet and an alert over the keyboard.
- Ride hailing app UI mockup - A mobile ride app: pick up and destination over a map, a choice of ride types with prices, and a live driver-on-the-way screen.