Android Design Guidelines

www.designboatschool.in
+91 - 91644 47999 designboatschool.in

Material Design
Material Design (originally referred to as and codenamed “Quantum Paper”) was
developed by Google and is a design language used for interfaces. The idea, is to
provide a design language which mimics the feel of pen and paper. Material design
offers the user physical edges and surfaces to work with seams and shadows giving
context to what parts of a digital design can be touched.

Screen Sizes

Categories
MDPI HDPI XHDPI (360x640) XXHDPI XXXHDPI

Examples
Following are the few examples for layout structure in android.

Light Dark Colored

+91 - 91644 47999 designboatschool.in

Status Bar
On Android, the status bar contains notification icons and system icons. Different
types of status bars are as follows,

Color is based on a sample taken Translucent status bar, 20%

from the content Black #000000

Status bar color in a darker tone of Light status bar color is based on
the app bar color sample taken from content

App Bars: Top

v

The top app bar provides content and actions related to the current screen. It's used
for branding, screen titles, navigation, and actions.

Regular Top app bar Prominent Top app bar

+91 - 91644 47999 designboatschool.in

App Bars: Bottom

A bottom app bar displays navigation and key actions at the bottom of mobile
screens. It provides access to a bottom navigation drawer and up to four actions,
including the floating action button.

Centered FAB End FAB No FAB

Navigation Bar
The navigation bar in Android consists of following controls: Back, Home, and
Overview.

Dark Light

Translucent over complex image Transparent over even-toned image

+91 - 91644 47999 designboatschool.in

Bottom Navigation
Bottom navigation provides quick navigation between top-level views of an app. It
is primarily designed for use on mobile. Minimum and maximum number of
destinations are 3 and 5 respectively.

Type 1 Type 2

Tabs
Tabs enable content organization at a high level, such as switching between views,
data sets, or functional aspects of an app. There are two types of Tabs, that is
Fixed Tab and Scrollable Tab.

Fixed Tab Scrollable Tab

+91 - 91644 47999 designboatschool.in

Buttons
Buttons communicate the action that will occur when the user touches them.

Text Button Outlined Button

Contained Button Toggle Button

Floating Action Button

A floating action button (FAB) performs the primary, or most common, action on a
screen. FABs come in three types: regular, mini, and extended.

Mini Extended

Regular
+91 - 91644 47999 designboatschool.in

Navigation Drawers
Navigation drawers provide access to destinations and app functionality, such as
switching accounts.

Modal Drawer Bottom Drawer

+91 - 91644 47999 designboatschool.in

Cards
Cards are surfaces that display content and actions on a single topic. They should
be easy to scan for relevant and actionable information.

Headline 4
Body 2
Headline 6
Headline 6 BUTTON BUTTON
Body 2
Body 2

Greyhound divisively hello coldly wonderfully marginally far…

Card Layout : Full Image List -2 Up

BUTTON BUTTON

Card Layout : Image Top

Snackbar
Snackbars inform users of a process that an app has performed or will perform.
They appear temporarily, towards the bottom of the screen. They shouldn’t
interrupt the user experience, and they don’t require user input to disappear.

Condition 1 : Only one snackbar may be displayed at a time.

Condition 2 : A snackbar can contain a single action. Because they disappear
automatically, the action shouldn’t be “Dismiss” or “Cancel.”

Greyhound divisively hello Greyhound divisively hello coldly wonderfully

marginally far upon excluding. BUTTON

Text Only
Text with Action

Greyhound divisively hello

Text & Icon

+91 - 91644 47999 designboatschool.in

Banners
A banner displays a prominent message and related optional actions. Banners
should be displayed at the top of the screen, below a top app bar. They are
persistent and allowing the user to ignore them or interact with them at any time.

Greyhound divisively hello coldly wonderfully marginally far

Greyhound divisively hello coldly wonderfully upon excluding.

BUTTON BUTTON BUTTON BUTTON

Banner - One Line Banner - Two Line

Greyhound divisively hello coldly wonderfully

Greyhound divisively hello coldly marginally far upon

BUTTON BUTTON BUTTON BUTTON

Banner - Text/Image Banner - Two line text/Image

Dialogs
A dialog is a type of modal window that appears in front of app content to provide
critical information or ask for a decision. Dialogs disable all app functionality when
they appear, and remain on screen until confirmed, dismissed, or a required action
has been taken.

Headline 6 Headline 6
Alert dialog prompt
Apparently we had reached a Apparently we had reached a
great height in the nature great height in the nature for
for the... the...
BUTTON BUTTON

Alert - Dialog BUTTON BUTTON Simple Dialogs

Alert - Confirmation
+91 - 91644 47999 designboatschool.in

Text Fields
Text fields allow users to enter text into a UI. They typically appear in forms and
dialogs.

Filled Text Fields Outlined Text Fields

Label Label

Assistive text Assistive text

Label
Label
Input text Input text

Assistive text Assistive text

 +91 - 91644 47999 designboatschool.in

Status Bar
App Bar

Tab Bar

Bottom Navigation Bar

Navigation Bar
+91 - 91644 47999 designboatschool.in

Color Palette
In Material Design, a primary color refers to a color that appears most frequently
in your app. A secondary color refers to a color used to accent key parts of your
UI. Google suggests using the 500 colors as the primary colors in your app and
the other colors as accents colors.
Using colors from the Material Design palette is optional.

This color scheme contains a primary

color, plus darker and lighter versions of
that color.

This primary color is applied to the toolbar

and status bar, while also being used to
accent the floating button.

Credits: www.material.io