How to Design Mobile UI for Android Devices

Page 1

How to Design Mobile UI for Android Devices

Every operating system consists of a global UI, where all UI elements and components are displayed according to it. If you’re a Windows user, you may have noticed that all applications open in a similar “window” interface, the dialog boxes, the minimize, maximize and close buttons are all identical across different applications within Windows. The same goes for Mac OS as well. In the case of mobile UI (Android), that global UI which structures all of the components for familiar usability across different apps, is called “System UI”.

Design Guidelines for Components

Every operating system has a set of rules and principles that govern how interactive elements and components are displayed on screen. These rules are also called “Design Language” or “Design Guidelines”. Following is a summary of how UI components are rendered in Android.

Navigation Layout of Mobile UI

In Android, the page title is displayed on the left. If it is a top-level page, then there’s usually a Side Menu next to it, which lets you navigate sub-level features within the app. The Search function is on the right, and displayed as an icon. To navigate similar data within the page, there are Tab Buttons below the Navigation Bar. The primary function is displayed as a Floating CTA button. For example, in the Messages app, this button lets you compose a new text message.

Three-Dot Menus

In Android, secondary functions in an app are either displayed as an Action Menu at the bottom of the screen or as a more compact Dropdown Menu, when obstruction is to be reduced. The button by which it is accessed is also called the Kebab Menu because of how it is shaped (i.e. three dots).

Single Choice Options

Selection

Single Choice Options is a list of options where you can only select one of them. They are often displayed next to a “Radio Button” in all sorts of operating systems, including Android. A smaller list can be displayed as a drop down menu or inside a “Modal” (a floating window), center aligned to the screen.

Date Picker In Android, the “Date Picker” appears inside of a “Modal”.

Typography for Mobile UI

The default typeface in Android is Roboto. It has been implemented since 2011, when Google released Android 4.0 Ice Cream Sandwich.

Text Styles

Fonts on a display are usually measured in “Points”. Android uses the term “Scalable Pixel (sp)” for “Point”. The base font size is 16sp.

App Icons

The minimum icon size in Android is 48 x 48 px, as that is the ideal tap size for a human finger. An icon can be scaled in multiples of 48px, therefore design software like Figma and Illustrator have 1x, 2x, 3x and 4x export options.

THANK YOU

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.