AIPostMockup
Back to Blog
Android App Mockup: Material Design 3 Tutorial (2026)
Android
Material Design
Tutorial
App Mockup

Android App Mockup: Material Design 3 Tutorial (2026)

Mustafa Bilgic

Mustafa Bilgic

Founder and operator, AIPostMockup

12 min read

Quick Answer

To design an Android app mockup compliant with Material Design 3 (Material You) in 2026: use the Material 3 typography scale (Roboto or product sans-serif), apply dynamic color (a generated palette derived from a seed color), respect Android safe areas (top status bar ~24dp, bottom navigation gesture bar ~16dp), follow the Material 3 component spec (Filled buttons, Outlined buttons, FAB, Chips, Cards), test in both light and dark themes, and preview Play Store screenshots in the actual store-listing context.

Table of Contents

Why Material 3 compliance matters

Material Design 3 (also called Material You), launched with Android 12 in 2021, is the current Android design system. Apps that follow Material 3 feel native; apps that use older Material 2 patterns feel dated.

The Material Design 3 documentation is the source of truth.

Step 1: Choose device and resolution

For 2026 marketing mockups, design at common Pixel/Samsung resolutions:

  • Pixel 9 Pro: 1280 x 2856 px (logical 411 x 916 dp at 3.06x density).
  • Pixel 9: 1080 x 2400 px (logical 360 x 800 dp at 3x density).
  • Samsung Galaxy S24: 1080 x 2340 px.

    • The "dp" (density-independent pixel) unit is what Android designers use for layout. 1 dp = 1 pixel at 1x density.

    Step 2: Apply the Material 3 type scale

    Material 3's type scale uses semantic roles:

  • Display Large: 57sp / 64sp line-height.
  • Display Medium: 45sp / 52sp.
  • Display Small: 36sp / 44sp.
  • Headline Large: 32sp / 40sp.
  • Headline Medium: 28sp / 36sp.
  • Headline Small: 24sp / 32sp.
  • Title Large: 22sp / 28sp.
  • Title Medium: 16sp / 24sp.
  • Title Small: 14sp / 20sp.
  • Body Large: 16sp / 24sp.
  • Body Medium: 14sp / 20sp.
  • Body Small: 12sp / 16sp.
  • Label Large: 14sp / 20sp.
  • Label Medium: 12sp / 16sp.
  • Label Small: 11sp / 16sp.

    • Default typeface: Roboto (free from Google Fonts).

    Step 3: Apply Dynamic Color

    Material 3's signature feature: the color palette is derived from a "seed" color. The system generates roles (Primary, Secondary, Tertiary, Surface) algorithmically.

    For mockups, use Material Theme Builder to generate a palette from your brand color. The output: a complete light theme + dark theme palette.

    The roles you'll use most:

  • Primary: brand accent color.
  • On Primary: text/icons on Primary background.
  • Surface: card and sheet backgrounds.
  • On Surface: text on Surface.

    • Step 4: Respect Android safe areas

    Android safe areas:

  • Top status bar: ~24 dp (taller on devices with cutouts).
  • Bottom gesture/navigation bar: ~16 dp on gesture nav, ~48 dp on three-button nav.

    • Place no critical content within these areas.

    Step 5: Use Material 3 components

    The Material 3 component library:

  • Filled Button: primary action.
  • Outlined Button: secondary action.
  • Text Button: tertiary action.
  • FAB (Floating Action Button): most-prominent action.
  • Top App Bar: title and primary navigation.
  • Bottom Navigation Bar / Navigation Rail: tab navigation.
  • Cards: containers for related content.
  • Chips: small selections.

    • Using Material 3 components rather than custom controls is the strongest signal of compliance.

    Step 6: Apply the 8 dp grid

    Material 3 uses an 8 dp grid for most spacing. Common values: 4, 8, 12, 16, 24, 32 dp.

    Step 7: Test light and dark themes

    Material 3 supports both. Use the Material Theme Builder to generate both themes from the same seed color.

    Common dark theme issues:

  • Hardcoded colors that don't adapt.
  • Text on Surface that is too low contrast in dark mode.
  • Icons that disappear on dark backgrounds.

    • Step 8: Design Play Store screenshots

    Google Play screenshots are 16:9 or 9:16 (with several supported aspect ratios). The recommended set:

  • 8 screenshots minimum.
  • First 2-3 are most important.
  • Combine product screenshots with overlay text.

    • Step 9: Test on Android Emulator or device

    The closest test to the real rendered app: Android Studio's emulator with the target API level. Mockups built in Figma can be exported and viewed on a real device for validation.

    Common mistakes

  • Using Material 2 patterns (rounded cards from 2018, top app bar without expressive elevation).
  • Custom typography where Roboto would be appropriate.
  • Hardcoded colors instead of dynamic color roles.
  • Ignoring Dynamic Color theming.
  • Skipping the dark theme test.

    • What we noticed during testing

    We built three Android app mockups during May 4-5, 2026. The mockups that used Material 3 dynamic color + the standard type scale + Material 3 components were indistinguishable from production Android apps; the mockups that mixed Material 2 patterns looked dated. Material 3 compliance is the most reliable shortcut to making a mockup look real.

    Disclaimer

    Material Design updates regularly. Verify against Material Design 3 documentation before high-value work. AIPostMockup is not affiliated with Google or Material Design.

    Content Creator Essentials

    Editor's picks for creating stunning social media content

    Neewer Ring Light Kit for Content Creators

    Neewer 10" Ring Light Kit

    Professional ring light for content creation. Adjustable brightness, phone holder, tripod stand. Perfect for social media mockups and product photography.

    Check Price on Amazon
    Content Inc. by Joe Pulizzi

    Content Inc. by Joe Pulizzi

    Build a profitable content business from scratch. Learn the six-step strategy to attract an audience and monetize your content.

    Check Price on Amazon
    UBeesize Phone Tripod for Content Creation

    UBeesize Phone Tripod & Stand

    Flexible tripod with wireless remote for phones and cameras. Ideal for creating social media content and mockup photos.

    Check Price on Amazon

    As an Amazon Associate, we may earn from qualifying purchases. This does not affect our editorial recommendations.

    Frequently Asked Questions

    What is Material Design 3?

    Material Design 3 (also called Material You) is Google's current Android design system, launched with Android 12 in 2021. Its signature feature is Dynamic Color (a palette generated from a seed color). The full documentation is at m3.material.io.

    What typeface should I use in Android app mockups?

    Roboto is the default Material 3 typeface, free from Google Fonts. Use the Material 3 type scale (Display, Headline, Title, Body, Label) for typography hierarchy. Custom typefaces are allowed but should follow the same scale.

    What is Dynamic Color in Material 3?

    Dynamic Color generates a complete color palette (Primary, Secondary, Tertiary, Surface, etc.) algorithmically from a single 'seed' color. Use the Material Theme Builder at m3.material.io/theme-builder to generate the palette for your brand color. The output works in both light and dark themes.

    What is the difference between dp and px in Android design?

    dp (density-independent pixels) is the layout unit; 1 dp = 1 px at 1x density (160 ppi). On a Pixel 9 Pro at 3.06x density, 1 dp = 3.06 px. Designers work in dp because dp values translate consistently across different device densities; px values do not.

    Should Android app mockups support dark theme?

    Yes. Material Design 3 supports light and dark themes; users in 2026 split roughly 60/40. Use the Material Theme Builder to generate both themes from the same seed color, and test the mockup in both.

    Share this article

    Content Creator Reading List

    Affiliate
    Everybody Writes

    Everybody Writes

    by Ann Handley

    โ˜…โ˜…โ˜…โ˜…โ˜†(3,456)

    Your go-to guide to creating ridiculously good content. Updated and expanded for today's marketers.

    View on Amazon โ†’
    This Is Marketing

    This Is Marketing

    by Seth Godin

    โ˜…โ˜…โ˜…โ˜…โ˜†(9,127)

    You can't be seen until you learn to see. Modern marketing strategy from a legendary thought leader.

    View on Amazon โ†’
    Hooked: Build Habit-Forming Products

    Hooked: Build Habit-Forming Products

    by Nir Eyal

    โ˜…โ˜…โ˜…โ˜…โ˜†(7,892)

    The blueprint for building products users return to repeatedly. Essential reading for content creators.

    View on Amazon โ†’
    Building a StoryBrand

    Building a StoryBrand

    by Donald Miller

    โ˜…โ˜…โ˜…โ˜…โ˜†(12,847)

    A 7-part framework to clarify your brand message so customers actually listen.

    View on Amazon โ†’

    As an Amazon Associate, we earn from qualifying purchases.

    Related Articles

    LinkedIn Carousel PDF Mockup Tutorial (2026)
    LinkedIn
    Carousel

    LinkedIn Carousel PDF Mockup Tutorial (2026)

    How to design a LinkedIn carousel document (the high-performing PDF format) with cover frame, slide consistency, mobile feed mockup, and approval workflow.

    2026-05-08ยท13 min read
    Mustafa Bilgic