Material design in android lollipop
-
Upload
tushar-choudhary -
Category
Design
-
view
1.102 -
download
1
description
Transcript of Material design in android lollipop
![Page 1: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/1.jpg)
Material Design
Tushar Choudhary
![Page 2: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/2.jpg)
Agenda
Why, How & What.Principles.APIs.Example apps & demo.
![Page 3: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/3.jpg)
WHAT, WHY & HOW
![Page 4: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/4.jpg)
The situation
Device VarietyBrandingUsability
Development & Design effort
![Page 5: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/5.jpg)
Variety
![Page 6: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/6.jpg)
Branding & Usability
![Page 7: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/7.jpg)
Development Effort
![Page 8: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/8.jpg)
Enter … Material Design
![Page 10: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/10.jpg)
Principles
![Page 11: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/11.jpg)
1.Material is the metaphor
![Page 12: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/12.jpg)
A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
![Page 13: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/13.jpg)
Surfaces & shadows [cues]
Light, surfaces, movement[convey]
Real but not restricted
![Page 14: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/14.jpg)
![Page 15: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/15.jpg)
1.Bold, graphic, intentional
![Page 16: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/16.jpg)
Bold, graphic, intentional
ColorSpaceTypographyImageryLayout
![Page 17: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/17.jpg)
Color
![Page 18: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/18.jpg)
Color
![Page 19: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/19.jpg)
Typography
![Page 20: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/20.jpg)
Icons
bold, symmetrical - geomteric
![Page 21: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/21.jpg)
Establish themes
Do far more than please the eye.
Make core functionality immediately apparent , way points for the user.
Graphic interface that immerses the user in the experience
![Page 22: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/22.jpg)
3.Motion provides meaning
![Page 23: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/23.jpg)
Motion provides meaning
Don’t break the continuity of UX
Reinforces the user as the prime mover
Serving to focus attention
![Page 24: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/24.jpg)
Animations
Authentic Motion
Responsive Interactions
Meaningful Interactions
Delightful Details
![Page 25: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/25.jpg)
Authentic motionResponsive Interaction
![Page 26: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/26.jpg)
Delightful details
Meaningful interactions
![Page 27: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/27.jpg)
APIs
![Page 28: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/28.jpg)
Api : material theme
<!-- res/values/styles.xml -->
<resources>
<!-- your app's theme inherits from the Material theme
-->
<style name="AppTheme"
parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>
![Page 29: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/29.jpg)
Defining additional styles to theme
Baseline grids
Keylines
Spacing
Touch target size
Layout structure
![Page 30: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/30.jpg)
Api : UI widgets
Recycler View
Card View
![Page 31: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/31.jpg)
Using the new widgets
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>
![Page 32: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/32.jpg)
Api: Surfaces & Shadows
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />
![Page 33: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/33.jpg)
Api: Animations
Activities (transitions)Views (entry, exit , shared)
Touch feed backReveal animationsPath based Animations
![Page 34: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/34.jpg)
// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
![Page 35: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/35.jpg)
Ditto it...discreetly
TopekaCalculatorWallyGoogle+
![Page 36: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/36.jpg)
Take away
Guidelines.Lean on the framework.
Material Application = Design impl + Framework APIs
![Page 37: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/37.jpg)
Look forward to.
Android LJSBranding
![Page 38: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/38.jpg)
Resources
design/specDesignBytes
![Page 39: Material design in android lollipop](https://reader035.fdocuments.net/reader035/viewer/2022062319/557d581dd8b42ae1438b47cf/html5/thumbnails/39.jpg)
Thank You.