Material Design
Tushar Choudhary
Agenda
Why, How & What.Principles.APIs.Example apps & demo.
WHAT, WHY & HOW
The situation
Device VarietyBrandingUsability
Development & Design effort
Variety
Branding & Usability
Development Effort
Enter … Material Design
Principles
1.Material is the metaphor
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.
Surfaces & shadows [cues]
Light, surfaces, movement[convey]
Real but not restricted
1.Bold, graphic, intentional
Bold, graphic, intentional
ColorSpaceTypographyImageryLayout
Color
Color
Typography
Icons
bold, symmetrical - geomteric
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
3.Motion provides meaning
Motion provides meaning
Don’t break the continuity of UX
Reinforces the user as the prime mover
Serving to focus attention
Animations
Authentic Motion
Responsive Interactions
Meaningful Interactions
Delightful Details
Authentic motionResponsive Interaction
Delightful details
Meaningful interactions
APIs
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>
Defining additional styles to theme
Baseline grids
Keylines
Spacing
Touch target size
Layout structure
Api : UI widgets
Recycler View
Card View
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>
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" />
Api: Animations
Activities (transitions)Views (entry, exit , shared)
Touch feed backReveal animationsPath based Animations
// inside your activity
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
Ditto it...discreetly
TopekaCalculatorWallyGoogle+
Take away
Guidelines.Lean on the framework.
Material Application = Design impl + Framework APIs
Look forward to.
Android LJSBranding
Resources
design/specDesignBytes
Thank You.
Recommended
