SlideShare une entreprise Scribd logo
1  sur  18
Télécharger pour lire hors ligne
Android UI Components
Walk-through
Patrick Yin
Activity
Each page(screen) is an Activity
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
Navigation
Bottom navigation
Navigation
Navigation view + Drawer layout
Bottom sheets
Modal bottom sheets Persistent bottom sheetsGrid modal bottom sheets
Floating action button
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
Tabs
Fixed tab bar Scrollable tab bar Fixed tab bar with icons
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.
Recycler View
Built-in layout manager
Custom
layout
manager
Linear Layout Grid Layout
Staggered Grid
Layout
Wearable Linear
Layout
…
Recycler View with Linear Layout
FYI: the colour of the system status bar can be changed
Recycler View with Grid Layout
Recycler View with Staggered Layout
Text field (EditText)
Snackbar
Snackbar with 1 action Two consecutive snackbars with different content
Dialog
Alert without title Simple menuSimple dialog
Thank you!

Contenu connexe

Similaire à Android UI components walkthrough

Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design TipsLuis Abreu
 
Adaptive UI for Android and iOS using Material and Cupertino.pptx
Adaptive UI for Android and iOS using Material and Cupertino.pptxAdaptive UI for Android and iOS using Material and Cupertino.pptx
Adaptive UI for Android and iOS using Material and Cupertino.pptxFlutter Agency
 
Creating a Great Navigation Bar with MUI AppBar Component - Blogs
Creating a Great Navigation Bar with MUI AppBar Component - BlogsCreating a Great Navigation Bar with MUI AppBar Component - Blogs
Creating a Great Navigation Bar with MUI AppBar Component - BlogsRonDosh
 
Android ui patterns
Android ui patternsAndroid ui patterns
Android ui patternsMobile March
 
Android ui patterns
Android ui patternsAndroid ui patterns
Android ui patternsvpulec
 
Chapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barChapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barKalluri Vinay Reddy
 
Introduction to UiAutomation EMEA APAC.pdf
Introduction to UiAutomation EMEA APAC.pdfIntroduction to UiAutomation EMEA APAC.pdf
Introduction to UiAutomation EMEA APAC.pdfCristina Vidu
 
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Michael Shrove
 
Android design patterns
Android design patternsAndroid design patterns
Android design patternsPlatty Soft
 
Lecture 5 _ Building Layouts (1).pptx
Lecture 5 _ Building Layouts (1).pptxLecture 5 _ Building Layouts (1).pptx
Lecture 5 _ Building Layouts (1).pptxssuser0ee7de1
 
User experience and interactions design
User experience and interactions design User experience and interactions design
User experience and interactions design Rakesh Jha
 
Designing native android apps
Designing native android appsDesigning native android apps
Designing native android appsRyan Harter
 
Session 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab barSession 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab barVu Tran Lam
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to androidShrijan Tiwari
 
Android Setting Basic
Android Setting BasicAndroid Setting Basic
Android Setting BasicHosuk Shin
 
Infinum Android Talks #13 - Design Support Library by Ivan Markusi
Infinum Android Talks #13 - Design Support Library by Ivan MarkusiInfinum Android Talks #13 - Design Support Library by Ivan Markusi
Infinum Android Talks #13 - Design Support Library by Ivan MarkusiInfinum
 

Similaire à Android UI components walkthrough (20)

Android UI Design Tips
Android UI Design TipsAndroid UI Design Tips
Android UI Design Tips
 
Adaptive UI for Android and iOS using Material and Cupertino.pptx
Adaptive UI for Android and iOS using Material and Cupertino.pptxAdaptive UI for Android and iOS using Material and Cupertino.pptx
Adaptive UI for Android and iOS using Material and Cupertino.pptx
 
Creating a Great Navigation Bar with MUI AppBar Component - Blogs
Creating a Great Navigation Bar with MUI AppBar Component - BlogsCreating a Great Navigation Bar with MUI AppBar Component - Blogs
Creating a Great Navigation Bar with MUI AppBar Component - Blogs
 
Android ui patterns
Android ui patternsAndroid ui patterns
Android ui patterns
 
Android ui patterns
Android ui patternsAndroid ui patterns
Android ui patterns
 
Chapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barChapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action bar
 
Toolbarexample
ToolbarexampleToolbarexample
Toolbarexample
 
Introduction to UiAutomation EMEA APAC.pdf
Introduction to UiAutomation EMEA APAC.pdfIntroduction to UiAutomation EMEA APAC.pdf
Introduction to UiAutomation EMEA APAC.pdf
 
Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)Android and IOS UI Development (Android 5.0 and iOS 9.0)
Android and IOS UI Development (Android 5.0 and iOS 9.0)
 
Android design patterns
Android design patternsAndroid design patterns
Android design patterns
 
Lecture 5 _ Building Layouts (1).pptx
Lecture 5 _ Building Layouts (1).pptxLecture 5 _ Building Layouts (1).pptx
Lecture 5 _ Building Layouts (1).pptx
 
Material design
Material designMaterial design
Material design
 
Using android's action bar
Using android's action barUsing android's action bar
Using android's action bar
 
User experience and interactions design
User experience and interactions design User experience and interactions design
User experience and interactions design
 
Designing native android apps
Designing native android appsDesigning native android apps
Designing native android apps
 
Session 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab barSession 13 - Working with navigation and tab bar
Session 13 - Working with navigation and tab bar
 
Android UI Patterns
Android UI PatternsAndroid UI Patterns
Android UI Patterns
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
 
Android Setting Basic
Android Setting BasicAndroid Setting Basic
Android Setting Basic
 
Infinum Android Talks #13 - Design Support Library by Ivan Markusi
Infinum Android Talks #13 - Design Support Library by Ivan MarkusiInfinum Android Talks #13 - Design Support Library by Ivan Markusi
Infinum Android Talks #13 - Design Support Library by Ivan Markusi
 

Dernier

Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312wphillips114
 
Mobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsMobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsChandrakantDivate1
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesChandrakantDivate1
 
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...nishasame66
 
Mobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsMobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsChandrakantDivate1
 

Dernier (6)

Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312Mobile App Penetration Testing Bsides312
Mobile App Penetration Testing Bsides312
 
Mobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s ToolsMobile Application Development-Android and It’s Tools
Mobile Application Development-Android and It’s Tools
 
Android Application Components with Implementation & Examples
Android Application Components with Implementation & ExamplesAndroid Application Components with Implementation & Examples
Android Application Components with Implementation & Examples
 
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
Satara Call girl escort *74796//13122* Call me punam call girls 24*7hour avai...
 
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
Obat Penggugur Kandungan Di Apotik Kimia Farma (087776558899)
 
Mobile Application Development-Components and Layouts
Mobile Application Development-Components and LayoutsMobile Application Development-Components and Layouts
Mobile Application Development-Components and Layouts
 

Android UI components walkthrough