Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to Material Design
Search
Harsh Dattani
December 14, 2014
Design
3
160
Introduction to Material Design
Delivered a session on Introduction to Material Design at DevFest Ahmedabad 2014.
Harsh Dattani
December 14, 2014
Tweet
Share
More Decks by Harsh Dattani
See All by Harsh Dattani
Whats new in Android N
harshdattani
0
50
Developing Secure Android Application
harshdattani
2
360
Guard your Android
harshdattani
0
130
Other Decks in Design
See All in Design
逆向きUIの世界〜AndroidアプリのRTL言語対応〜
akatsuki174
1
510
役立つシステムを作るためのAI活用
kanzaki
0
110
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
190
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
700
minpaku-community-scrum-patterns
norinity1103
1
470
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
280
株式会社バクタム 会社説明資料
bactum
0
360
「UXとUIの違い」v2
shirasu3
0
250
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
230
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
200
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
RailsConf 2023
tenderlove
30
1.3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
It's Worth the Effort
3n
187
28k
The Cult of Friendly URLs
andyhume
79
6.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Transcript
Introduction to Material Design Harsh Dattani
About Me M.Tech Cyber Security Gujarat Forensic Sciences University, Gandhinagar
Principle Styling the Material Components Maintaining Compatibility Agenda
A great product experience starts with UX followed by UI.
Both are essential for the product’s success.
Cross-Platform Experience Material: A Metaphor
Cross-Platform Experience Elements Have Depth & Shadow Material: A Metaphor
Cross-Platform Experience Elements Have Depth & Shadow User Motion, Interaction,
Bold & Visual Design Material: A Metaphor
Cross Platform
Elements Have Depth Elements have depth
• A key light creates directional shadows. • An ambient
light creates consistent, soft shadows from all angles. Shadow cast by key light Shadow cast by ambient light Shadow cast by both lights Elements have shadow
Color Icon Imagery Material: Implementation Typography
values-v21/styles.xml Accent color for primary action buttons and components like
switches or sliders. Style: Theme and Color <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Material.Light"> <item name="android:colorPrimary">@color/primary</item> <item name="android:colorPrimaryDark">@color/primary_dark</item> <item name="android:colorAccent">@color/accent</item> <item name="android:textColorPrimary">@color/text_primary</item> <item name="android:textColor">@color/text_secondary</item> <item name="android:navigationBarColor">@color/primary_dark</item> </style> </resources>
Primary Secondary Style: Color Palette
Do Don't Style: Best practice
Style: Icon Do Don't
Style: Imagery Do Don't
Style: Best practice Do Don't
Style: Typography
Style: Typography
Style: Typography
Toolbar Appbar Menus Layout: Structure
Structure: Toolbar
Structure: Appbar • Formerly known as Action bar. • Special
kind of toolbar, for branding, navigation and important user actions
Structure: Appbar Matrics • Mobile Landscape: 48dp • Mobile Portrait:
56dp • Tablet/Desktop: 64dp
Structure: Menus • Overlaps App Bar • Not an extension
to App Bar
Buttons Cards Dialog Layout: Components Tabs Switch
Button: Flat <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Flat Button" style="?android:attr/borderlessButtonStyle" />
Button: Raised <Button android:layout_width="@dimen/btn_size" android:layout_height="wrap_content" android:text="Ripple Effect" android:textColor="@color/text_primary" android:elevation="8dp" android:background="@drawable/ripple"
android:stateListAnimator="@anim/raise" />
Button: Floating Action Button <ImageButton android:id="@+id/add_button" android:layout_width="@dimen/round_button_diameter" android:layout_height="@dimen/round_button_diameter" android:layout_gravity="end|bottom" android:layout_marginBottom="@dimen/add_button_margin"
android:layout_marginEnd="@dimen/add_button_margin" android:src="@android:drawable/ic_input_add" android:tint="@android:color/white" android:background="@drawable/ripple_float" android:elevation="@dimen/elevation_low" android:stateListAnimator="@anim/raise" />
UI Widget: CardView <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_margin="@dimen/activity_horizontal_margin" android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="4dp"> <TextView
android:textSize="@dimen/abc_text_size_display_1_material" android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </android.support.v7.widget.CardView> dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile "com.android.support:appcompat-v7:21.0.+" compile “com.android.support:cardview-v7:21.0.+” }
Preferably use flat button Do Not use FAB Component: Dialog
Extended App bar + Tab bar Inset search + App
bar + Tab bar Default App bar + Tab bar Component: Tabs
Radio Switch Checkbox Component: Switch
User Input Surface Reaction Animation: Responsive Interaction Meaningful Transition
Maintaining Compatibility values/styles.xml <!-- extend one of the Theme.AppCompat themes
--> <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- customize the color palette --> <item name="colorPrimary">@color/material_blue_500</item> <item name="colorPrimaryDark">@color/material_blue_700</item> <item name="colorAccent">@color/material_green_A200</item> </style>
Maintaining Compatibility build.gradle dependencies { compile fileTree(dir: 'libs', include: ['*.jar'])
compile "com.android.support:appcompat-v7:21.0.+" compile “com.android.support:cardview-v7:21.0.+” compile “com.android.support:recyclerview-v7:21.0.+” }
Thank You Harsh Dattani @dattaniharsh Google.com/+harshdattani Github.com/harshdattani