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
140
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
40
Developing Secure Android Application
harshdattani
2
330
Guard your Android
harshdattani
0
89
Other Decks in Design
See All in Design
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
0
970
文化に寄りそうデザイン
recruitengineers
PRO
3
840
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo
yasuhiroyokota
2
1k
Resolving text accessibility dilemmas in UIs
romanshamin
0
110
3D空間を扱うUI表現とユーザビリティ
akinen
0
410
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
2
360
プロダクトデザインは子育て/Product design is parenting
medley
0
190
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
730
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
0
150
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
220
実案件でのFigmaデータの作り方
xxxkinu
2
200
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
470
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
Done Done
chrislema
178
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Become a Pro
speakerdeck
PRO
8
4.4k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Embracing the Ebb and Flow
colly
78
4.1k
Building Effective Engineering Teams - LeadDev
addyosmani
25
1.8k
GitHub's CSS Performance
jonrohan
1023
450k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
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