Skip to content

Instantly share code, notes, and snippets.

@jinqian
Last active October 25, 2022 19:24
Show Gist options
  • Save jinqian/5814865 to your computer and use it in GitHub Desktop.
Save jinqian/5814865 to your computer and use it in GitHub Desktop.
android UI guidlines

Android Assets

Basic conceptions

Apply the main stream ratio 16:9, here are the screen sizes:

  • mdpi: ~160dpi, 640 x 360 px
  • hdpi: ~240dpi, 960 x 540 px
  • xhdpi: ~320dpi, 1280 x 720 px
  • xxhdpi: ~higher, 1920 x 1080 px

A visual example of how the design mock up should look like. Normally an android app's screen is composed with:

  • A status bar, the height is:
    • mdpi: 25 px
    • hdpi: 38 px
    • xhdpi: 50 px
    • xxhdpi: 76 px
  • An action bar with control buttons, the height is:
    • mdpi: 48 px
    • hdpi: 64 px
    • xhdpi: 96 px
    • xxhdpi: 128 px
  • The main part of the app: background image, buttons, texts & other widgets
  • A virtual navigation bar (for certain devices) with the same height as the action bar.

Note: the ratio 1280 x 720 (16:9) is currently the main stream android screen ratio so we choose to base on this. Considering there are also ratio like 1280 x 800 (Galaxy Note), 1280 x 768 (Nexus 4), try to set the asset to fit the screen programmatically with relative attributes, match_parent, adjustViewBounds.

In-app images

Other

  • App icon
    • mdpi: 48 x 48 px
    • hdpi: 72 x 72 px
    • xhdpi: 96 x 96 px
    • xxhdpi: 144 x 144 px

Android assets name convention

  • Name the assets only with lower case letters or underscore
    • example: scan_button.png
  • Put assets in mdpi/hdpi/xdpi/xxhdpi folders separately.
@Hachib
Copy link

Hachib commented Nov 8, 2017

How is it possible to use xxhdpi: 144 x 144 px icon into xxhdpi: 128 px action bar where icon is larger than action bar ? please.I am a new UI designer and this is very confusing for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment