Android UI components walkthrough (material design)

1. Android UI Components
Walk-through
Patrick Yin

2. Activity
Each page(screen) is an Activity

3. Fragment
• Fragment is a container
• Content area(Blank) is the Fragment
• The whole screen is an Activity
• The Navigation bar is in the Activity
• Change selected nav item replaces the
Fragment

4. Navigation
Bottom navigation

5. Navigation
Navigation view + Drawer layout

6. Bottom sheets
Modal bottom sheets Persistent bottom sheetsGrid modal bottom sheets

7. Floating action button

8. App Bar
Beginning with Android 3.0 (API level 11), all
activities that use the default theme have an
ActionBar as an app bar. However, app bar
features have gradually been added to the native
ActionBar over various Android releases. As a
result, the native ActionBar behaves differently
depending on what version of the Android system
a device may be using. By contrast, the most
recent features are added to the support library's
version of Toolbar, and they are available on any
device that can use the support library.
ActionBar / ToolBar
Title

9. Tabs
Fixed tab bar Scrollable tab bar Fixed tab bar with icons

10. Menu
Menus display a list of choices on a
transient sheet of material.
It should not be used as a primary
method for navigation within an app.

11. Recycler View
Built-in layout manager
Custom
layout
manager
Linear Layout Grid Layout
Staggered Grid
Layout
Wearable Linear
Layout
…

12. Recycler View with Linear Layout
FYI: the colour of the system status bar can be changed

13. Recycler View with Grid Layout

14. Recycler View with Staggered Layout

15. Text field (EditText)

16. Snackbar
Snackbar with 1 action Two consecutive snackbars with different content

17. Dialog
Alert without title Simple menuSimple dialog

18. Thank you!