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
43
Developing Secure Android Application
harshdattani
2
350
Guard your Android
harshdattani
0
110
Other Decks in Design
See All in Design
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
ネットワークセキュリティ科 学科紹介
sklbj_unz
0
160
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
190
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
780
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
発表資料テンプレート / My slide template
thatblue
0
200
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Docker and Python
trallard
44
3.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Rails Girls Zürich Keynote
gr2m
94
13k
Speed Design
sergeychernyshev
25
780
Automating Front-end Workflow
addyosmani
1367
200k
BBQ
matthewcrist
86
9.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Into the Great Unknown - MozCon
thekraken
35
1.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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