Android Design Guidelines
Today, we are going to discuss The Android Design (UI) Guidelines for Layout and App Bar. For an app, the design is essential. It provides you a visually balanced interface for your app. Designing is a task that you can learn by playing with it. You need to understand when what margin, padding colors, texts, etc. are used.
In this blog, we are going to see some guidelines that you need to be followed.
Layout
The layout is the screen that users see when an app started. It is the place where we set all our views. So it should be consistent in the use of grids, paddings, and margins.
Example:
Here notice, we applied a margin of 16 DP from each side of the layout. 16 DP is the correct amount of margin, more than that, or less than that will unbalance your layout visually.
Make sure if your Pixel Density is 160 DPI then, 1 DP = 1 Pixel
App Bar: Top
The Top app bar provides the information or content about the current activity or screen. Here we displayed the screen titles, navigation control, actions, logos, etc.
Types of Top App Bar:
- Regular App Bar: Normal app bar that provides information on the current screen.
- Contextual Action Bar: A Regular app bar can transform into a contextual action bar to provide contextual actions to selected items.
Regular App Bar
Normal app Bar that provides information on the current screen, where we generally provide the information on the screen title, logos, actions, navigation control, etc.
Example:
Here we displayed a navigation control, title, action item, and an overflow menu.
Make sure that the navigation control on the left, the title is next to the navigation control, actions are right to the title, and the overflow menu is in the extreme right.
Contextual Action Bar:
A Regular app bar can transform into a contextual action bar to provide contextual actions to selected items.
For example: when a user selects an image from the gallery, the top app bar transforms into a contextual action bar.
Changes that occur when an image is selected:
- top app bar color changes
- navigation control of app bar changes to close button or icon
- title changes to contextual action bar
- top app bar actions replaced with other actions like share, delete, etc.
Bottom Navigation
This bar allows us to move between the destinations of the app internally from one destination to another.
It can display only 3 to 5 destinations or tabs. Each destination has its icon and text label. When the user clicked on a bottom navigation icon, the user is taken to the destination screen associate with that icon.
Bottom navigation States:
- Active
- Inactive
- Focused/Pressed
Active destination states have shown full opacity as the bottom navigation uses the opacity to show a destination is active or not.
Inactive destinations are represented with less opacity than active destinations.
Quick Recap:
- For an app, the design is essential. It provides you a visually balanced interface for your app.
- The layout is the screen that users see when an app started. It is the place where we set all our views.
- 16 DP is the correct amount of margin, more than that, or less than that will unbalance your layout visually.
- if your Pixel Density is 160 DPI then, 1 DP = 1 Pixel
- The Top app bar provides the information or content about the current activity or screen. Here we displayed the screen titles, navigation control, actions, logos, etc.
- Regular App Bar and Contextual Action Bar are the two types of App bars.
- The bottom app bar allows us to move between the destinations of the app internally from one destination to another.
- Bottom navigation states: Active, Inactive, and Focused/Pressed.
You can also read:
Thank you!
Happy Coding.
