resolution for android app design

If you are just getting started with UI Design, you may have these questions in mind:

What should be the size of my screen when I am designing for iOS, Android, or Web?
What icon size should I use?
What are DP and PT and what is their relationship with Pixel (Px)?
Why my design looks inconsistent and unbalanced!

Well, you are not alone.

Every new designer goes through these confusions. When new UI Designers tell me to give feedback on their design, inappropriate dimensions and lack of white space are the most common problems I see.

Other problems include poor use of color and bad Typography. But that will be a separate discussion of its own.

In this article, I will discuss how to get started with the basics of the measurements. It's going to be a bit long! So please bear with me.

The answer is Yes, but not necessary to understand this discussion.

Different platforms have different measurement units. Pt (Point) in iOS, DP/DIP (Density-Independent Pixel) in Android, and Px (Pixel) in the Web platform.

But those days are gone and 2020 is a great time to be a UI Designer because you don't need to memorize them all.

You just need to know your numbers! When you hand-off your design to the developers, most of the time they will know whether to use DP, Pt, or Px. Again, as a beginner, you just need to know your numbers and enter them in your favorite design tool (Please don't use Photoshop for UI Design. I beg you!). Eventually, you will learn what those units mean.

Now, what is the platform you are designing for? Android, iOS, or Desktop? Depending on the platform, target the most widely used and possibly the smallest screen size.

From the chart above, you can see that 360x640 is the most widely used Mobile Screen Resolution.

That's because Android is the dominant Mobile OS in the world and all (early) Android Devices with 16:9 aspect ratio have 360x640 dp screens. And between iPhone 5 and iPhone X, every regular iPhone Model had a screen resolution of 375x667 pt.

I recommend designing at 360x640 for Android and 375x667 for iOS. Unless you want to showcase your design in a modern and trendy Device Mockup, for example, iPhone 11 Pro or Samsung Galaxy S10+, or your target userbase has a different screen size.

On the other hand, 1366x768 is still the most dominant screen resolution for Desktop. So I recommend targeting this screen size when designing for Desktop.

Are we done with screen dimen… I mean your artboard sizes? Let's move on.

Have you ever heard of 8 Point Grid? If not, read this 👇 article by Vitsky:

4 and 8 dp Scale. Source: material.io

Now that you know what 8pt Grid is and why it's important, let's break down the Android UI Components.

An Android App UI screen usually consists of 4 parts:

Status Bar
App Bar
Content Area
Bottom Navigation Bar

What do we call the Bars?

We will discuss the App Bar and Bottom Navigation Bar in detail. The Content Area is where you put the main contents. For example, text, images, illustrations, videos, etc. We will briefly talk about buttons, spacing, and margins as well.

How "High" they are? Well, now you know!

The App Bar usually consists of a title and some icons. If we break it down, it looks like this:

18 is Material Design's Default Title Text Size

So… we are done with the App Bar. Let's have a look at the Bottom Navigation Bar.

Simple, isn't it?

The Bottom Navigation bar can have 2–5 tabs. Do NOT use more than 5 tabs. Oh, Facebook uses 6? They do not use Icon Labels either, so they can accommodate more than 5 tabs.

And Icons without Labels are known as Ghost Icons. As a designer, you would know what every icon means but your average users won't. So always use Labels with Navigation Icons.

Probably you already noticed that 16dp is the standard value for the left and right margin. Sometimes people use 8 and sometimes 24. But in most cases, less than 16 is not recommended.

However, when you are placing text/image contents inside a card, you can get away with 8dp margins without making the UI look busy but you need to make sure that you are leaving at least a 12dp margin between the contents inside the card and the edges of it.

As a beginner, just leave 16 dp on both sides. You will learn to utilize spaces better as you gain more experience.

When using buttons, make them 48dp high. Google Material Design Guidelines recommend that any tappable area should be at least 48x48 dp. Less than that will reduce the accuracy of the tap. When using 2 buttons side by side, keep at least a 16 dp gap between them.

However, you can use smaller or larger buttons depending on your project but make sure there are no other tappable UI Elements in the 48 dp radius.

I do not recommend using any button less than 32 dp high. And that 32 dp button should not be your Primary Action Button. For Primary Action Buttons, keep them between 40–56 dp.

In a 48 dp high button, the labels look best at 14–16, when using Capitalized labels, you can make them 12. But less than that is not recommended.

DO NOT stretch an icon. Never do that, please!
DO NOT stretch a Text Layer (I am talking to you, PS and AI users 😉 )
DO NOT drag and scale a group of layers. In most cases, it will give you broken pixels, and probably you won't even notice. But your developers will.
DO NOT use broken pixels. For example 44.23, 39.97. Round them to full pixels. And again, follow the 8dp Scale.
DO NOT use multiple styles for different instances of the same UI Element. Use Symbols / Components as much as possible. It will save you a lot of time.

To learn some Typography stuff, head over to this article by Dorjan Vulaj: