SlideShare a Scribd company logo
Xavier Yin
2015/04/28
Material Design
Widgets and Sample code
Outline
 Getting Started
 Material Theme
 Tool Bar
 RecyclerView and CardView
 References
Getting Started
 To create apps with material design:
– Review the material design specification.
– Apply the material theme to your app.
– Create your layouts following material design guidelines.
– Specify the elevation of your views to cast shadows.
– Use system widgets for lists and cards.
– Customize the animations in your app.
App/build.gradle settings
Material Theme
Tool Bar and Drawer
 Tool Bar
– A Toolbar is a generalization of action bars for use within application
layouts.
– An application may choose to designate a Toolbar as the action bar for
an Activity using the setActionBar() method.
– Toolbar supports a more focused feature set than ActionBar.
 A navigation button.
 A branded logo image.
 A title and subtitle.
 One or more custom views.
 An action menu.
Tool Bar and Drawer
 Tool Bar
– Toolbar supports a more focused
feature set than ActionBar.
 A navigation button.
 A branded logo image.
 A title and subtitle.
 One or more custom views.
 An action menu.
Tool Bar and Drawer
Creating Lists and Cards
 RecyclerView widget
– a more advanced and flexible version of ListView
– for displaying large data sets
 The RecyclerView class simplifies the display and handling
of large data sets by providing:
– Layout managers for positioning items
– Default animations for common item operations, such as removal or
addition of items
Creating Lists and Cards
Creating Lists and Cards
 CardView
– show information inside cards that
have a consistent look across the
platform.
– have shadows and rounded
corners
References & Sample Code
 Reference - Google
– http://www.google.com/design/spec/material-
design/introduction.html
 PPT & Sample Code
– https://www.slideshare.net/secret/F6B0NsI9WpX5aI
– https://github.com/xavier0507/MaterialDesignBasicWidgets.git

More Related Content

What's hot

Android ui layout
Android ui layoutAndroid ui layout
Android ui layout
Krazy Koder
 
android layouts
android layoutsandroid layouts
android layouts
Deepa Rani
 
Ch6 file, saving states, and preferences
Ch6 file, saving states, and preferencesCh6 file, saving states, and preferences
Ch6 file, saving states, and preferences
Shih-Hsiang Lin
 

What's hot (14)

Android Training (Android UI)
Android Training (Android UI)Android Training (Android UI)
Android Training (Android UI)
 
Android ui layout
Android ui layoutAndroid ui layout
Android ui layout
 
Android UI Patterns
Android UI PatternsAndroid UI Patterns
Android UI Patterns
 
Best Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue SolutionsBest Practices for Android UI by RapidValue Solutions
Best Practices for Android UI by RapidValue Solutions
 
Android layouts
Android layoutsAndroid layouts
Android layouts
 
01 08 - graphical user interface - layouts
01  08 - graphical user interface - layouts01  08 - graphical user interface - layouts
01 08 - graphical user interface - layouts
 
android layouts
android layoutsandroid layouts
android layouts
 
Ui 5
Ui   5Ui   5
Ui 5
 
01 09 - graphical user interface - basic widgets
01  09 - graphical user interface - basic widgets01  09 - graphical user interface - basic widgets
01 09 - graphical user interface - basic widgets
 
Android app development lesson 1
Android app development lesson 1Android app development lesson 1
Android app development lesson 1
 
Chapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barChapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action bar
 
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
 
Ch6 file, saving states, and preferences
Ch6 file, saving states, and preferencesCh6 file, saving states, and preferences
Ch6 file, saving states, and preferences
 
MDC - Material Design Components & Theming
MDC - Material Design Components & ThemingMDC - Material Design Components & Theming
MDC - Material Design Components & Theming
 

Viewers also liked

Avient interview questions and answers
Avient interview questions and answersAvient interview questions and answers
Avient interview questions and answers
molliejohnson663
 
Facebook powerpoint
Facebook powerpointFacebook powerpoint
Facebook powerpoint
UlrikeHoho
 
Avanta enterprise interview questions and answers
Avanta enterprise interview questions and answersAvanta enterprise interview questions and answers
Avanta enterprise interview questions and answers
molliejohnson663
 
Axminster carpets interview questions and answers
Axminster carpets interview questions and answersAxminster carpets interview questions and answers
Axminster carpets interview questions and answers
molliejohnson663
 
Axminster power tools interview questions and answers
Axminster power tools interview questions and answersAxminster power tools interview questions and answers
Axminster power tools interview questions and answers
molliejohnson663
 
Avm interview questions and answers
Avm interview questions and answersAvm interview questions and answers
Avm interview questions and answers
molliejohnson663
 

Viewers also liked (20)

Tku-行動app開發管理實務-如何開發Android應用程式
Tku-行動app開發管理實務-如何開發Android應用程式Tku-行動app開發管理實務-如何開發Android應用程式
Tku-行動app開發管理實務-如何開發Android應用程式
 
Test automation
Test automationTest automation
Test automation
 
Application for contract labour license
Application for contract labour licenseApplication for contract labour license
Application for contract labour license
 
機器學習與資料探勘:決策樹
機器學習與資料探勘:決策樹機器學習與資料探勘:決策樹
機器學習與資料探勘:決策樹
 
Avient interview questions and answers
Avient interview questions and answersAvient interview questions and answers
Avient interview questions and answers
 
Facebook powerpoint
Facebook powerpointFacebook powerpoint
Facebook powerpoint
 
Triunfa en internet en 6 pasos
Triunfa en internet en 6 pasosTriunfa en internet en 6 pasos
Triunfa en internet en 6 pasos
 
Polecane miejsce ILAWA
Polecane miejsce ILAWAPolecane miejsce ILAWA
Polecane miejsce ILAWA
 
Avanta enterprise interview questions and answers
Avanta enterprise interview questions and answersAvanta enterprise interview questions and answers
Avanta enterprise interview questions and answers
 
Axminster carpets interview questions and answers
Axminster carpets interview questions and answersAxminster carpets interview questions and answers
Axminster carpets interview questions and answers
 
Triunfa en Internet en 6 pasos
Triunfa en Internet en 6 pasosTriunfa en Internet en 6 pasos
Triunfa en Internet en 6 pasos
 
Axminster power tools interview questions and answers
Axminster power tools interview questions and answersAxminster power tools interview questions and answers
Axminster power tools interview questions and answers
 
Avm interview questions and answers
Avm interview questions and answersAvm interview questions and answers
Avm interview questions and answers
 
Tku-網路資料的串接與資料儲存
Tku-網路資料的串接與資料儲存Tku-網路資料的串接與資料儲存
Tku-網路資料的串接與資料儲存
 
TKU行動APP開發管理實務 - ListView & Custom Adapter
TKU行動APP開發管理實務 - ListView & Custom AdapterTKU行動APP開發管理實務 - ListView & Custom Adapter
TKU行動APP開發管理實務 - ListView & Custom Adapter
 
Tku-行動app開發管理實務-Android應用程式開發基礎
Tku-行動app開發管理實務-Android應用程式開發基礎Tku-行動app開發管理實務-Android應用程式開發基礎
Tku-行動app開發管理實務-Android應用程式開發基礎
 
Introduction To Open Water Swimming Course in the Lake District
Introduction To Open Water Swimming Course in the Lake DistrictIntroduction To Open Water Swimming Course in the Lake District
Introduction To Open Water Swimming Course in the Lake District
 
THỰC TẾ TÀI NGUYÊN THIÊN NHIÊN
THỰC TẾ TÀI NGUYÊN THIÊN NHIÊNTHỰC TẾ TÀI NGUYÊN THIÊN NHIÊN
THỰC TẾ TÀI NGUYÊN THIÊN NHIÊN
 
Quản lý tổng hợp vùng bờ tỉnh sóc Trang
Quản lý tổng hợp vùng bờ tỉnh sóc TrangQuản lý tổng hợp vùng bờ tỉnh sóc Trang
Quản lý tổng hợp vùng bờ tỉnh sóc Trang
 
Material design introduction
Material design introductionMaterial design introduction
Material design introduction
 

Similar to Material design - widgets and sample code

Saphelp erp2004 en_9d_76563cc368b60fe10000000a114084_content
Saphelp erp2004 en_9d_76563cc368b60fe10000000a114084_contentSaphelp erp2004 en_9d_76563cc368b60fe10000000a114084_content
Saphelp erp2004 en_9d_76563cc368b60fe10000000a114084_content
mgassperera
 

Similar to Material design - widgets and sample code (20)

09 material design
09 material design09 material design
09 material design
 
What’s new for Android Developers in 2015 - Material Design, Android Studio, ...
What’s new for Android Developers in 2015 - Material Design, Android Studio, ...What’s new for Android Developers in 2015 - Material Design, Android Studio, ...
What’s new for Android Developers in 2015 - Material Design, Android Studio, ...
 
A Comprehensive Guide of Flutter AppBar Widget.pdf
A Comprehensive Guide of Flutter AppBar Widget.pdfA Comprehensive Guide of Flutter AppBar Widget.pdf
A Comprehensive Guide of Flutter AppBar Widget.pdf
 
Android Material Design
Android Material DesignAndroid Material Design
Android Material Design
 
Material Theme
Material ThemeMaterial Theme
Material Theme
 
Diving deep in compose.pdf
Diving deep in compose.pdfDiving deep in compose.pdf
Diving deep in compose.pdf
 
All the support you need. Support libs in Android
All the support you need. Support libs in AndroidAll the support you need. Support libs in Android
All the support you need. Support libs in Android
 
Real-Time Recommendations with Hopsworks and OpenSearch - MLOps World 2022
Real-Time Recommendations  with Hopsworks and OpenSearch - MLOps World 2022Real-Time Recommendations  with Hopsworks and OpenSearch - MLOps World 2022
Real-Time Recommendations with Hopsworks and OpenSearch - MLOps World 2022
 
Actionview
ActionviewActionview
Actionview
 
3-SamplePresentation.ppt
3-SamplePresentation.ppt3-SamplePresentation.ppt
3-SamplePresentation.ppt
 
Material design for developers
Material design for developersMaterial design for developers
Material design for developers
 
6. safe users-guide
6.  safe users-guide6.  safe users-guide
6. safe users-guide
 
14 asp.net session20
14 asp.net session2014 asp.net session20
14 asp.net session20
 
70 357 practice test
70 357 practice test70 357 practice test
70 357 practice test
 
Saphelp erp2004 en_9d_76563cc368b60fe10000000a114084_content
Saphelp erp2004 en_9d_76563cc368b60fe10000000a114084_contentSaphelp erp2004 en_9d_76563cc368b60fe10000000a114084_content
Saphelp erp2004 en_9d_76563cc368b60fe10000000a114084_content
 
Data modelling tool in CASE
Data modelling tool in CASEData modelling tool in CASE
Data modelling tool in CASE
 
VaranResume
VaranResume VaranResume
VaranResume
 
Material Design Android
Material Design AndroidMaterial Design Android
Material Design Android
 
Material Design - Høgskolen Ringerike 2017
Material Design - Høgskolen Ringerike 2017Material Design - Høgskolen Ringerike 2017
Material Design - Høgskolen Ringerike 2017
 
Android ui with xml
Android ui with xmlAndroid ui with xml
Android ui with xml
 

Recently uploaded

Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 

Recently uploaded (20)

MARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptxMARUTI SUZUKI- A Successful Joint Venture in India.pptx
MARUTI SUZUKI- A Successful Joint Venture in India.pptx
 
Basic Civil Engineering Notes of Chapter-6, Topic- Ecosystem, Biodiversity G...
Basic Civil Engineering Notes of Chapter-6,  Topic- Ecosystem, Biodiversity G...Basic Civil Engineering Notes of Chapter-6,  Topic- Ecosystem, Biodiversity G...
Basic Civil Engineering Notes of Chapter-6, Topic- Ecosystem, Biodiversity G...
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.pptBasic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
 
Jose-Rizal-and-Philippine-Nationalism-National-Symbol-2.pptx
Jose-Rizal-and-Philippine-Nationalism-National-Symbol-2.pptxJose-Rizal-and-Philippine-Nationalism-National-Symbol-2.pptx
Jose-Rizal-and-Philippine-Nationalism-National-Symbol-2.pptx
 
Basic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumersBasic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumers
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
Advances in production technology of Grapes.pdf
Advances in production technology of Grapes.pdfAdvances in production technology of Grapes.pdf
Advances in production technology of Grapes.pdf
 
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & EngineeringBasic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
 
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxStudents, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
 
Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"
Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"
Mattingly "AI & Prompt Design: Limitations and Solutions with LLMs"
 
Sectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdfSectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdf
 
How to Create Map Views in the Odoo 17 ERP
How to Create Map Views in the Odoo 17 ERPHow to Create Map Views in the Odoo 17 ERP
How to Create Map Views in the Odoo 17 ERP
 
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptxMatatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
 
Palestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptxPalestine last event orientationfvgnh .pptx
Palestine last event orientationfvgnh .pptx
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
Home assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdfHome assignment II on Spectroscopy 2024 Answers.pdf
Home assignment II on Spectroscopy 2024 Answers.pdf
 
Introduction to Quality Improvement Essentials
Introduction to Quality Improvement EssentialsIntroduction to Quality Improvement Essentials
Introduction to Quality Improvement Essentials
 
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 

Material design - widgets and sample code

  • 2. Outline  Getting Started  Material Theme  Tool Bar  RecyclerView and CardView  References
  • 3. Getting Started  To create apps with material design: – Review the material design specification. – Apply the material theme to your app. – Create your layouts following material design guidelines. – Specify the elevation of your views to cast shadows. – Use system widgets for lists and cards. – Customize the animations in your app.
  • 6. Tool Bar and Drawer  Tool Bar – A Toolbar is a generalization of action bars for use within application layouts. – An application may choose to designate a Toolbar as the action bar for an Activity using the setActionBar() method. – Toolbar supports a more focused feature set than ActionBar.  A navigation button.  A branded logo image.  A title and subtitle.  One or more custom views.  An action menu.
  • 7. Tool Bar and Drawer  Tool Bar – Toolbar supports a more focused feature set than ActionBar.  A navigation button.  A branded logo image.  A title and subtitle.  One or more custom views.  An action menu.
  • 8. Tool Bar and Drawer
  • 9. Creating Lists and Cards  RecyclerView widget – a more advanced and flexible version of ListView – for displaying large data sets  The RecyclerView class simplifies the display and handling of large data sets by providing: – Layout managers for positioning items – Default animations for common item operations, such as removal or addition of items
  • 11. Creating Lists and Cards  CardView – show information inside cards that have a consistent look across the platform. – have shadows and rounded corners
  • 12. References & Sample Code  Reference - Google – http://www.google.com/design/spec/material- design/introduction.html  PPT & Sample Code – https://www.slideshare.net/secret/F6B0NsI9WpX5aI – https://github.com/xavier0507/MaterialDesignBasicWidgets.git