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
Material Design in Android
Search
Esteban Dorado Roldan
May 12, 2015
Programming
0
220
Material Design in Android
Seminary "Material Design in Android" in University of Granada.
Esteban Dorado Roldan
May 12, 2015
Tweet
Share
More Decks by Esteban Dorado Roldan
See All by Esteban Dorado Roldan
Codemotion Spain Meetup -Microservices: gRPC vs Rest
mresti
0
230
PyConES2018: Python & gRPC, el conquistador de microservicios
mresti
0
440
Microservices: grpc vs rest
mresti
0
570
T3chFest 2018: Crea una API REST con Go
mresti
0
94
Build REST API with Golang
mresti
0
140
Firebase aventures - cloud based real time database
mresti
0
59
Material Design in Android
mresti
0
100
Android Wear
mresti
0
140
Android Wear
mresti
0
53
Other Decks in Programming
See All in Programming
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
WebDriver BiDiとは何なのか
yotahada3
1
140
CI改善もDatadogとともに
taumu
0
110
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
ARA Ansible for the teams
kksat
0
150
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Ruby on cygwin 2025-02
fd0
0
140
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
GraphQLとの向き合い方2022年版
quramy
44
13k
Writing Fast Ruby
sferik
628
61k
Producing Creativity
orderedlist
PRO
343
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Cult of Friendly URLs
andyhume
78
6.2k
Done Done
chrislema
182
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Visualization
eitanlees
146
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
Material Design In Android @Mr_Esti @Mr_Esti
Material Design implementing & compatibilizing - Concepts - Animations -
Style - Layout - Components - Patterns - Compatibility
None
Concepts Material is the metaphor
Print-like design
None
Constrained depth
None
<android.support.v7.widget.Toolbar android:layout_height="wrap_content" android:layout_width="match_parent" android:background="?android:colorPrimary" android:minHeight="?attr/actionBarSize" android:elevation="5dp" /> <android.support.v7.widget.CardView android:layout_width="100dp" android:layout_height=“96dp"
android:layout_gravity="center" android:stateListAnimator="@drawable/translation_selector" android:clickable=“true" android:elevation="2dp" card_view:cardCornerRadius="4dp" />
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="10dp" android:valueType="floatType"/>
</set> </item> <item android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@android:integer/config_shortAnimTime" android:valueTo="2dp" android:valueType="floatType"/> </set> </item> </selector>
None
None
Concepts Motion provides meaning
// After transition mFab.animate() .scaleX(1).scaleY(1) .start(); // After fab mToolbar.animate()
.scaleX(0).scaleY(1) .start(); // After toolbar mContent.animate() .scaleX(0).scaleY(1) .start();
None
// Slide awesomeTransition = new Slide (Gravity.BOTTOM); // Fade awesomeTransition
= new Fade (); Explode awesomeTransition = new Explode(); awesomeTransition.excludeTarget(android.R.id.navigationBarBackground, true); awesomeTransition.excludeTarget(android.R.id.statusBarBackground, true); awesomeTransition.excludeTarget(R.id.activity_transition_header, true); getWindow().setExitTransition(awesomeTransition); Slide Explode Fade
public void onFabPressed(View view) { Intent i = new Intent
(TransitionFirstActivity.this, TransitionSecondActivity.class); ActivityOptions transitionActivityOptions = ActivityOptions .makeSceneTransitionAnimation(mContext, Pair.create(mFabButton, "fab"), Pair.create(mHeader, "holder1")); startActivity(i, transitionActivityOptions.toBundle()); } <View ... android:transitionName="holder1" /> <Button ... android:transitionName=“fab" />
Concepts Bold, graphic, intentional
<style name=“AwesomeTheme" parent=“AppTheme"> <item name=“android:colorPrimary”>@color/my_primary</item> <item name=“android:colorAccent">@color/my_accent</item> </style> <style name=“AwesomeTheme"
parent=“AppTheme"> <item name=“colorPrimary”>@color/my_primary</item> <item name=“colorAccent">@color/my_accent</item> </style>
None
public class MovieDetailActivity extends Activity implements Palette.PaletteAsyncListener { ... @Override
public void onGenerated(Palette palette) { if (palette != null) { Palette.Swatch vibrantSwatch = palette .getVibrantSwatch(); Palette.Swatch darkVibrantSwatch = palette .getDarkVibrantSwatch(); Palette.Swatch lightSwatch = palette .getLightVibrantSwatch(); if (lightSwatch != null) { // awesome palette code } } } }
None
None
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setStatusBarColor(mAwesomeStatusColor); getWindow().setNavigationBarColor(mAwesomeNavColor); }
None
https://github.com/saulmm/Android-Material-Examples
https://github.com/saulmm/Curved-Fab-Reveal-Example
Practice on Paper
Further reading Support Libraries v22.1.0 https://chris.banes.me/2015/04/22/support-libraries-v22-1-0/ Material Design Guidelines http://www.google.com/design/spec/material-design/introduction.html
From Holo to Material http://novoda.com/blog/from-holo-to-material Paper prototyping https://www.youtube.com/watch?v=07xPF7L6klY From Material Design to Android Wear https://speakerdeck.com/saulmm/from-material-design-to-android-wear
None
Material Design
Holo App
RecyclerView API Documentation: “A Flexible view for providing a limited
window into a large data set”
RecyclerView API Recycler API: • Adapter • ViewHolder • Layaout
Manayer • Item Decoration • Item Animation
Adapter Recycler API: • Defines what gets displayed and how
one item is displayed • No default implementations • ViewHolder pattern
Adapter code
ViewHolder code
LayoutManager • Defines: The placement of items • One predefined
layoutmanager: LinearLayoutManager
Item Decorations • Defines how items are separated from each
other • No default implementation • Called once per onDraw()
Animations The ItemAnimator class: Defines the animations for addition, removal
or the moving of items
Examples: Animations
https://github.com/mresti/Materialize-Android-App/
Further reading A First Glance at Android’s RecyclerView http://www.grokkingandroid.com/first-glance-androids-recyclerview/ RecyclerView-Demo
https://github.com/saulmm/RecyclerView-demo
None