Building Material Apps on Android
-
Upload
akshay-chordiya -
Category
Technology
-
view
64 -
download
0
Transcript of Building Material Apps on Android
![Page 1: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/1.jpg)
![Page 2: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/2.jpg)
Building Material Apps on Android
Get relaxed, the fun is about to begin!
![Page 3: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/3.jpg)
Quick Intro
~3.5 years of Android Development Experience
Akshay Chordiya
+AkshayChordiya
Solutions Pvt. Ltd
![Page 4: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/4.jpg)
Material DesignMaterial Design is a Google’s design philosophy or guidelines that outlines how apps should provide a
coherent cross-platform experience
![Page 5: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/5.jpg)
Huh….? Confused
![Page 7: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/7.jpg)
Material Design
● Material Design, when done right, could help your app to become more friendly to your users.
● Aimed to deliver a clean, modern, unified solution
● It defines the way that apps should look and behave
![Page 8: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/8.jpg)
Material is Metaphor Bold, graphic, intentional
Motion provides Meaning
![Page 9: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/9.jpg)
Material is Metaphor Bold, graphic, intentional
Motion provides Meaning
![Page 10: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/10.jpg)
Material is Metaphor Bold, graphic, intentional
Motion provides Meaning
![Page 11: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/11.jpg)
Material is Metaphor Bold, graphic, intentional
Motion provides Meaning
![Page 12: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/12.jpg)
Material is the Metaphor
Bold, graphic, intentional
Motion provides meaning
![Page 13: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/13.jpg)
Benefits of using Material DesignConsistency across different platforms and
devices
Enriched end user’s experience
Gives user a sense of familiarity
![Page 14: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/14.jpg)
Still not convinced?
![Page 15: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/15.jpg)
VS
![Page 16: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/16.jpg)
google.com/design
Read more about Material Design
![Page 17: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/17.jpg)
Building Material Apps
![Page 18: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/18.jpg)
Using Android LibrariesFirst party
![Page 19: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/19.jpg)
Using AppCompat
![Page 20: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/20.jpg)
Major delights of AppCompat
1.Easier theming and tinting
2.Support Widgets. (Toolbar, a lot more custom widgets)
3.Elevation
4.Backward compatibility
![Page 21: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/21.jpg)
Dependency
dependencies {
compile 'com.android.support:appcompat-v7:25.0.1'
}
![Page 22: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/22.jpg)
Demo
![Page 23: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/23.jpg)
Using Design Library
![Page 24: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/24.jpg)
UI Components in Design Library
Navigation Drawer
Floating Text Field
Tabs Floating Button
![Page 25: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/25.jpg)
Snack barScrolling App Bar Collapsing App Bar
![Page 26: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/26.jpg)
Newly added components
Bottom Sheet Bottom Navigation
![Page 27: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/27.jpg)
Dependency
dependencies {
compile 'com.android.support:design:25.0.1'
}
![Page 28: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/28.jpg)
Demo
![Page 29: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/29.jpg)
Using 3rd Party Libraries
![Page 30: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/30.jpg)
Using Material Dialog library
![Page 31: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/31.jpg)
Demo
![Page 32: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/32.jpg)
And a lot more 3rd party libraries..
![Page 33: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/33.jpg)
Bunch of
![Page 34: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/34.jpg)
#ProTipReplace
android.app.AlertDialog
With..android.support.v7.app.AlertDialog
![Page 35: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/35.jpg)
Material Design is guideline for design not rules so you can go out of the box
Always search for library before reinventing the wheel
#ProTip
![Page 36: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/36.jpg)
Further LinksAll the images and logos used are trademarks of respective
companies.
Material Design
Material IO
Material Design Video
Android Support Library Blog
Android Support Library Docs
Material Dialog Library
Material Intro Library
The Ultimate Guide to Material Design
![Page 37: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/37.jpg)
Questions?
![Page 38: Building Material Apps on Android](https://reader035.fdocuments.us/reader035/viewer/2022062412/589b9df81a28abd63e8b5ad1/html5/thumbnails/38.jpg)
Thank You!#HappyDevelopment