Awesome
Awesome-MaterialDesign
A curated list of awesome Android MaterialDesign res and libraries. Feel free to contrubute.
##Other Awesome List
- awesome
- awesome-android
- awesome-android-ui
- awesome-java
- awesome-ios-ui
- awesome-swift
- awesome-svg
- awesome-resources
- awesome-awesomeness
List of Awesome-MaterialDesign
###Doc and Res Some google and personal doc , design res and samples.
- Doc
- Google Samples
- [Google Material Design App](#Google Material Design App)
- [Google Design-Support-Library](#Google Design-Support-Library)
- Blog
- [Design Res](#Design Res)
###MaterialDesign Libraries Libraries on the github.
- Libraries
- Showcase
- FAB
- [Menu & Drawer](#Menu & Drawer)
- View
- Widget
- EditText
- SnackBar
- Palette
- Transition
- Ripple
- Reveal
- Tricks
- [Vector & SVG & path-view](#Vector & SVG & path-view)
- Dialog
- Project
<a name="doc">Doc</a>
<a name="Google Samples">Google Samples</a>
- SwipeRefreshMultipleViews
- SwipeRefreshListFragment
- SwipeRefreshLayoutBasic
- RevealEffectBasic
- android-Interpolator
- FloatingActionButtonBasic
- ElevationBasic
<a name="Google Material Design App">Google Material Design App</a>
<a name="Google Design-Support-Library">Google Design-Support-Library</a>
android-design-support-library Demo
<a name="Blog">Blog</a>
Google Blog
- AppCompat v21 — Material Design for Pre-Lollipop Devices!
- Implementing material design in your Android app
- Material Design on Android Checklist
- android-design-support-library
Translate
Personal Blog
- How to upgrade your app’s design from Holo to Material Design — A case study
- My Journey to Lollipop Transitions: part 1
- Content Transitions In-Depth (part 2)
- Material design in the 2014 Google I/O app
- MaterialDesigh 学习笔记
<a name="Design Res">Design Res</a>
- www.materialup.com
- www.materialpalette.com
- TextDrawable
- material-design-icons
- android-material-icons
- material-design-iconic-font
- material-design-icons-adt-template
- Design resources for Material Design
<a name="Video">Video</a>
- Material design & implementation
- Google I/O 2014 - Material witness: How Android material applications work
<a name="Material Libs">Material Libs</a>
<a name="Libraries">Libraries</a>
| Name | Demo |
|---|---|
| android-design-support-library | <img src="/demoRes/design-support-library-b.png" width="250" height="60" alt="Screenshot"/> <img src="/demoRes/design-support-library-c.png" width="250" height="60" alt="Screenshot"/> <img src="/demoRes/design-support-library-f.png" width="250" height="100" alt="Screenshot"/> <img src="/demoRes/design-support-library-a.png" width="220" height="280" alt="Screenshot"/> <img src="/demoRes/material-design-library-e.gif" width="430" height="320" alt="Screenshot"/> |
| MaterialDesignLibrary | <img src="/demoRes/MaterialDesignLibrary-a.png" width="160" height="100" alt="Screenshot"/> <img src="/demoRes/MaterialDesignLibrary-b.png" width="120" height="60" alt="Screenshot"/> <img src="/demoRes/MaterialDesignLibrary-c.png" width="130" height="60" alt="Screenshot"/> <img src="/demoRes/MaterialDesignLibrary-d.png" width="130" height="60" alt="Screenshot"/> <img src="/demoRes/MaterialDesignLibrary-e.png" width="130" height="60" alt="Screenshot"/> <img src="/demoRes/MaterialDesignLibrary-h.png" width="180" height="290" alt="Screenshot"/> |
| material | <img src="/demoRes/material-a.gif" width="70" height="70" alt="Screenshot"/> <img src="/demoRes/material-d.gif" width="70" height="70" alt="Screenshot"/> <img src="/demoRes/material-e.gif" width="70" height="70" alt="Screenshot"/> <img src="/demoRes/material-f.gif" width="120" height="40" alt="Screenshot"/> <img src="/demoRes/material-g.gif" width="100" height="30" alt="Screenshot"/> <img src="/demoRes/material-h.gif" width="80" height="30" alt="Screenshot"/> <img src="/demoRes/material-i.gif" width="200" height="40" alt="Screenshot"/> <img src="/demoRes/material-b.gif" width="220" height="40" alt="Screenshot"/> <img src="/demoRes/material-c.gif" width="220" height="40" alt="Screenshot"/> <img src="/demoRes/material-j.gif" width="230" height="120" alt="Screenshot"/> <img src="/demoRes/material-j.png" width="180" height="290" alt="Screenshot"/> |
| material-design-library | <img src="/demoRes/material-design-library-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/material-design-library-b.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/material-design-library-c.png" width="180" height="290" alt="Screenshot"/> |
| MaterialWidget | <img src="/demoRes/MaterialWidget.png" width="340" height="290" alt="Screenshot"/> |
| Material Design In XAML Toolkit | <img src="/demoRes/MaterialDesignInXamlToolkit.gif" width="340" height="217" alt="Screenshot"/> |
<a name="Showcase">Showcase</a>
| Name | Demo |
|---|---|
| Curved-Fab-Reveal-Example | <img src="/demoRes/Curved-Fab-Reveal-Example.gif" width="180" height="300" alt="Screenshot"/> |
| Android-LollipopShowcase | <img src="/demoRes/Android-LollipopShowcase-a.jpg" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/Android-LollipopShowcase-b.jpg" width="180" height="290" alt="Screenshot"/> |
| google-io-2014-compat | <img src="/demoRes/google-io-2014-compat-a.gif" width="180" height="290" alt="Screenshot"/><img src="/demoRes/google-io-2014-compat-b.gif" width="180" height="290" alt="Screenshot"/> |
| google-io-2014 | <img src="/demoRes/google-io-2014-a.png" width="180" height="290" alt="Screenshot"/><img src="/demoRes/google-io-2014-b.png" width="180" height="290" alt="Screenshot"/> |
| MaterialList | <img src="/demoRes/MaterialList-a.png" width="300" height="150" alt="Screenshot"/> <img src="/demoRes/MaterialList-b.png" width="300" height="150" alt="Screenshot"/> |
| AndroidMaterialDesignToolbar | <img src="/demoRes/AndroidMaterialDesignToolbar-a.gif" width="180" height="290" alt="Screenshot"/> |
| Android-L-Preview-Concepts | <img src="/demoRes/Android-L-Preview-Concepts.gif" width="180" height="290"/> |
| OpenLibra-Material | <img src="/demoRes/openlibra-material.gif" width="180" height="290" alt="Screenshot"/> |
| MaterialEverywhere | <img src="/demoRes/MaterialEverywhere.gif" width="180" height="290" alt="Screenshot"/> |
| Android-Material-Example | <img src="/demoRes/Android-Material-Example-a.gif" width="280" height="160" alt="Screenshot"/> <img src="/demoRes/Android-Material-Example-b.gif" width="180" height="260" alt="Screenshot"/> |
| MaterialDesignSample | <img src="/demoRes/MaterialDesignSample-d.gif" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialDesignSample-a.png" width="540" height="290" alt="Screenshot"/> |
| Material-Action-Bar-Sample | <img src="/demoRes/Material-Action-Bar-Sample-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/Material-Action-Bar-Sample-b.png" width="180" height="290" alt="Screenshot"/> |
| MaterialDesignSupport | <img src="/demoRes/MaterialDesignSupport-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialDesignSupport-b.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialDesignSupport-c.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialDesignSupport-d.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialDesignSupport-e.png" width="180" height="290" alt="Screenshot"/> |
<a name="FAB">FAB</a>
| Name | Demo |
|---|---|
| FloatingActionButton | |
| android-floating-action-button | <img src="/demoRes/android-floating-action-button-a.gif" width="80" height="200" alt="Screenshot"/> <img src="/demoRes/android-floating-action-button-b.png" width="80" height="80" alt="Screenshot"/> |
| FloatingActionButton | <img src="/demoRes/FloatingActionButton.gif" width="180" height="290" alt="Screenshot"/> |
| tickplusdrawable | <img src="/demoRes/tickplusdrawable.gif" width="180" height="290" alt="Screenshot"/> |
| Android-Material-circular-button | <img src="/demoRes/Android-Material-circular-button-a.gif" width="180" height="290" alt="Screenshot"/> |
| FloatingActionButton | <img src="/demoRes/FloatingActionButton-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/FloatingActionButton-b.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/FloatingActionButton-c.png" width="180" height="290" alt="Screenshot"/> |
| RapidFloatingActionButton | <img src="/demoRes/RapidFloatingActionButton-a.gif" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/RapidFloatingActionButton-b.gif" width="180" height="290" alt="Screenshot"/> |
<a name="Menu & Drawer">Menu & Drawer</a>
| Name | Demo |
|---|---|
| android-ui | <img src="/demoRes/android-ui-a.gif" width="70" height="70" alt="Screenshot"/> |
| material-menu | <img src="/demoRes/material-menu.gif" width="290" height="50" alt="Screenshot"/> |
| DrawerArrowDrawable | <img src="/demoRes/DrawerArrowDrawable.gif" width="290" height="110" alt="Screenshot"/> |
| LDrawer | <img src="/demoRes/LDrawer.gif" width="180" height="290" alt="Screenshot"/> |
| MaterialDrawer | <img src="/demoRes/MaterialDrawer-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialDrawer-b.png" width="180" height="290" alt="Screenshot"/> |
| android-material-drawer-template | <img src="/demoRes/android-material-drawer-template.gif" width="180" height="290" alt="Screenshot"/> |
| MaterialTabs | <img src="/demoRes/MaterialTabs-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialTabs-b.png" width="180" height="290" alt="Screenshot"/> |
| L-Navigation-Drawer | <img src="/demoRes/L-Navigation-Drawer-a.png" width="180" height="290" alt="Screenshot"/> |
| MaterialNavigationDrawer | <img src="/demoRes/MaterialNavigationDrawer-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialNavigationDrawer-b.png" width="180" height="290" alt="Screenshot"/> |
| NavigationDrawer-MaterialDesign | <img src="/demoRes/navigationdrawer-materialdesign.png" width="180" height="290" alt="Screenshot"/> |
| MenuAnimation | <img src="/demoRes/MenuAnimation-b.gif" width="180" height="290" alt="Screenshot"/> |
| Material_Navigationdrawer | |
| MaterialNavigation | |
| material-drawer |
<a name="View">View</a>
| Name | Demo |
|---|---|
| MaterialImageView | <img src="/demoRes/MaterialImageView.jpg" width="180" height="290" alt="Screenshot"/> |
| MaterialViewPager | <img src="/demoRes/MaterialViewPager-a.gif" width="180" height="290" alt="Screenshot"/> |
| Android-MaterialPreference | <img src="/demoRes/Android-MaterialPreference.png" width="180" height="290" alt="Screenshot"/> |
| SwipeableCard | <img src="/demoRes/SwipeableCard.gif" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/SwipeableCard1.gif" width="180" height="290" alt="Screenshot"/> |
<a name="Widget">Widget</a>
| Name | Demo |
|---|---|
| materialish-progress | <img src="/demoRes/materiallish-progress.gif" width="210" height="160" alt="Screenshot"/> |
| MaterialLoadingProgressBar | <img src="/demoRes/MaterialLoadingProgressBar.gif" width="180" height="290" alt="Screenshot"/> |
| SwipyRefreshLayout | <img src="/demoRes/SwipyRefreshLayout.gif" width="180" height="290" alt="Screenshot"/> |
| MaterialSettings | <img src="/demoRes/MaterialSettings.png" width="180" height="290" alt="Screenshot"/> |
| SwitchButton | <img src="/demoRes/SwitchButton-a.jpg" width="260" height="260" alt="Screenshot"/> <img src="/demoRes/SwitchButton-b.png" width="180" height="290" alt="Screenshot"/> |
| discreteSeekBar | <img src="/demoRes/discreteSeekBar-a.gif" width="450" height="160" alt="Screenshot"/> <img src="/demoRes/discreteSeekBar-b.gif" width="350" height="220" alt="Screenshot"/> |
| material-range-bar | <img src="/demoRes/material-range-bar.gif" width="180" height="290" alt="Screenshot"/> |
| material-calendarview | <img src="/demoRes/material-calendarview.gif" width="230" height="290" alt="Screenshot"/> |
| BetterSpinner | <img src="/demoRes/BetterSpinner.gif" width="180" height="290" alt="Screenshot"/> |
<a name="EditText">EditText</a>
| Name | Demo |
|---|---|
| MaterialEditText | <img src="/demoRes/MaterialEditText-a.png" width="250" height="170" alt="Screenshot"/> |
| MaterialTextField | <img src="/demoRes/MaterialTextField-a.jpg" width="250" height="170" alt="Screenshot"/> |
<a name="SnackBar">SnackBar</a>
| Name | Demo |
|---|---|
| SnackBar | <img src="/demoRes/SnackBar.gif" width="180" height="290" alt="Screenshot"/> |
| snackbar | <img src="/demoRes/snackbar-a.png" width="180" height="290" alt="Screenshot"/> |
<a name="Palette">Palette</a>
| Name | Demo |
|---|---|
| material-painter | <img src="/demoRes/material-painter.gif" width="180" height="290" alt="Screenshot"/> |
<a name="Transition">Transition</a>
| Name | Demo |
|---|---|
| transitions-everywhere | <img src="/demoRes/transitions-everywhere.gif" width="180" height="290" alt="Screenshot"/> |
| PreLollipopTransition | <img src="/demoRes/PreLollipopTransition-a.gif" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/PreLollipopTransition-b.gif" width="180" height="290" alt="Screenshot"/> |
| Material-Animations | <img src="/demoRes/Material-Animations.gif" width="180" height="290" alt="Screenshot"/> |
<a name="Ripple">Ripple</a>
| Name | Demo |
|---|---|
| RippleEffect | <img src="/demoRes/RippleEffect.gif" width="260" height="150" alt="Screenshot"/> |
| RippleView | <img src="/demoRes/RippleView.gif" width="180" height="290" alt="Screenshot"/> |
| android-ripple-background | <img src="/demoRes/android-ripple-background-a.gif" width="180" height="290" alt="Screenshot"/> |
| material-ripple | <img src="/demoRes/material-ripple-a.gif" width="180" height="290" alt="Screenshot"/> |
| PaperStyleWidgets | <img src="/demoRes/PaperStyleWidgets-a.gif" width="220" height="170" alt="Screenshot"/> |
| material-design-toolkit |
<a name="Reveal">Reveal</a>
| Name | Demo |
|---|---|
| android-ui | <img src="/demoRes/android-ui-ripple.gif" width="180" height="290" alt="Screenshot"/> |
| CircularReveal | <img src="/demoRes/CircularReveal.gif" width="180" height="290" alt="Screenshot"/> |
| RevealLayout | <img src="/demoRes/RevealLayout.gif" width="180" height="290" alt="Screenshot"/> |
| CircularRevealFragment | <img src="/demoRes/Android-CircularRevealFragment.gif" width="180" height="290" alt="Screenshot"/> |
| ViewRevealAnimator | <img src="/demoRes/ViewRevealAnimator.gif" width="180" height="290" alt="Screenshot"/> |
<a name="Tricks">Tricks</a>
| Name | Demo |
|---|---|
| Android-ObservableScrollView | <img src="/demoRes/Android-ObservableScrollView-a.gif" width="220" height="180" alt="Screenshot"/> <img src="/demoRes/Android-ObservableScrollView-c.gif" width="220" height="280" alt="Screenshot"/> |
| ViewPagerHeaderScrollDemo | <img src="/demoRes/viewpagerheaderdemo.gif" width="180" height="290" alt="Screenshot"/> |
| MaterialTextScaleToolbarDemo | <img src="/demoRes/MaterialTextScaleToolbarDemo.gif" width="180" height="290"/> |
| Scrollable | <img src="/demoRes/Scrollable.gif" width="180" height="290"/> |
<a name="Vector & SVG & path-view">Vector & SVG & path-view</a>
| Name | Demo |
|---|---|
| vector-compat | <img src="/demoRes/vector-compat-a.gif" width="80" height="80" alt="Screenshot"/> <img src="/demoRes/vector-compat-b.gif" width="110" height="80" alt="Screenshot"/> <img src="/demoRes/vector-compat-c.gif" width="110" height="80" alt="Screenshot"/> |
| animated-vector-drawable | <img src="/demoRes/animated-vector-drawable.gif" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/animated-vector-drawable-b.gif" width="180" height="290" alt="Screenshot"/> |
| android-pathview | <img src="/demoRes/android-pathview-a.gif" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/android-pathview-b.gif" width="180" height="290" alt="Screenshot"/> |
| SVG-Loaders | SVG-Loaders-Previewed |
<a name="Dialog">Dialog</a>
| Name | Demo |
|---|---|
| MaterialDialog | <img src="/demoRes/MaterialDialog.png" width="180" height="290" alt="Screenshot"/> |
| material-dialogs | <img src="/demoRes/material-dialogs-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/material-dialogs-b.png" width="180" height="290" alt="Screenshot"/> |
| PostOffice | <img src="/demoRes/PostOffice.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/PostOffice-b.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/PostOffice-c.png" width="180" height="290" alt="Screenshot"/> |
| L-Dialogs | <img src="/demoRes/L-Dialogs.jpg" width="1000" height="350" alt="Screenshot"/> |
| MaterialStuffLibrary | <img src="/demoRes/MaterialStuffLibrary-a.png" width="180" height="290" alt="Screenshot"/> <img src="/demoRes/MaterialStuffLibrary-b.png" width="180" height="290" alt="Screenshot"/> |
| AlertDialogPro | <img src="/demoRes/AlertDialogPro-a.png" width="250" height="180" alt="Screenshot"/> <img src="/demoRes/AlertDialogPro-b.png" width="250" height="180" alt="Screenshot"/> <img src="/demoRes/AlertDialogPro-c.png" width="250" height="180" alt="Screenshot"/> <img src="/demoRes/AlertDialogPro-d.png" width="250" height="180" alt="Screenshot"/> |
<a name="Project">Project</a>
| Name | Demo |
|---|---|
| philm | <img src="/demoRes/philm.gif" width="180" height="290" alt="Screenshot"/> |
| InstaMaterial | <img src="https://github.com/inferjay/MaterialDesignCenter/blob/master/demoRes/InstaMaterial.png" width="180" height="290" alt="Screenshot"/> |
| Material-Movies | <img src="/demoRes/Material-Movies.png" width="520" height="300" alt="Screenshot"/> |
| WaniKani-for-Android | <img src="/demoRes/WaniKani-for-Android.png" width="480" height="240" alt="Screenshot"/> |
| GitLabAndroid | <img src="https://github.com/inferjay/MaterialDesignCenter/blob/master/demoRes/GitLabAndroid.png" alt="Screenshot"/> |
#Thanks to
inferjay
QichaoChen
miao1007
yueban
lsjwzh
#About Me
Weibo: light_sky
Twitter: lightSkyStreet
Blog: lightskystreet.com
Email: lightsky.cn@gmail.com