material design - widgets and sample code
TRANSCRIPT
![Page 1: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/1.jpg)
Xavier Yin
2015/04/28
Material DesignWidgets and Sample code
![Page 2: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/2.jpg)
Outline
Getting Started
Material Theme
Tool Bar
RecyclerView and CardView
References
![Page 3: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/3.jpg)
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.
![Page 4: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/4.jpg)
App/build.gradle settings
![Page 5: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/5.jpg)
Material Theme
![Page 6: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/6.jpg)
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.
![Page 7: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/7.jpg)
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.
![Page 8: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/8.jpg)
Tool Bar and Drawer
![Page 9: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/9.jpg)
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
![Page 10: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/10.jpg)
Creating Lists and Cards
![Page 11: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/11.jpg)
Creating Lists and Cards
CardView – show information inside cards
that have a consistent look across the platform.
– have shadows and rounded corners
![Page 12: Material design - widgets and sample code](https://reader034.vdocuments.net/reader034/viewer/2022052509/55c9342fbb61eb12178b47bc/html5/thumbnails/12.jpg)
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