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
Immutable ActiveRecord
megane42
0
130
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
最近のVS Codeで気になるニュース 2025/01
74th
1
250
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
時計仕掛けのCompose
mkeeda
1
280
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Open source software: how to live long and go far
gaelvaroquaux
0
620
Honoをフロントエンドで使う 3つのやり方
yusukebe
4
2.1k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
RailsConf 2023
tenderlove
29
1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Docker and Python
trallard
44
3.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Code Reviewing Like a Champion
maltzj
521
39k
A Tale of Four Properties
chriscoyier
158
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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