Status Bar, Tool Bar, Search Bar , Tab bar , STATAE

It is recommended to include the status bar in as many places as you can. Users rely on it for important information such as signal, time and battery. The text and icons can be white or black, but the background can be customized into any color and merge with the Navigation Bar.

Navigation Bar

The Navigation Bar is used for quick information about the screen. The left portion can be used for placing Back, Profile, Menu buttons whereas the right portion is generally used for action buttons like Add, Edit, Done. Note that if you use any of these system icons, you don’t need to create assets for them.

Just like the Status Bar, the background can be customized to any color and typically has a subtle blur to ensure that the text is always readable. When the Status Bar is present, both backgrounds are merged.

Search Bar

When you have a lot of content, it is always wise to make it searchable.

Toolbar

When you need more real estate to place your action buttons and screen status, you’ll want to use the Toolbar.

Tab Bar

The Tab Bar is the main navigation between multiple screens. Avoid the Hamburger menu if you have few items. Menus that are always visible will increase usage since obvious always win. Additionally, it is encouraged to add text next to your icons as most people won’t instantly recognize symbols, especially when they’re not universally known.

STATES

When they’re not active, icons will be gray. Like this, they attract less attention.