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
From Material Design to Android Wear
Search
Saul Molinero
March 20, 2015
Programming
5
580
From Material Design to Android Wear
These are the slides about the talk: 'From Material Design to Android Wear' at the RITSI event.
Saul Molinero
March 20, 2015
Tweet
Share
More Decks by Saul Molinero
See All by Saul Molinero
Hidden gems and wats for the Modern android Developer
saulmm
0
150
Hidden gems and wats for modern Android Development
saulmm
8
840
Android Dev Tools & Workflows
saulmm
3
420
Espresso Workshop, UI Testing en Android
saulmm
2
110
Android Dev Tools & Workflows
saulmm
0
210
Design & be reactive on Android with Iron Man in a clean way
saulmm
16
880
Tools & tips of the trade for the Android Developer
saulmm
31
5.8k
Android Wear vs. Tizen (Apr. 2015)
saulmm
3
1.3k
A glance to android wear
saulmm
3
260
Other Decks in Programming
See All in Programming
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
【Go言語】ジェネリクス
tomo1227
0
170
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
20240706_CDKConf
takuyay0ne
0
1.2k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
유연한 Composable 설계
l2hyunwoo
0
380
Jetpack for KMP
fornewid
1
290
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
How STYLIGHT went responsive
nonsquared
93
5k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Unsuck your backbone
ammeep
666
57k
Optimizing for Happiness
mojombo
373
69k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Code Reviewing Like a Champion
maltzj
517
39k
Faster Mobile Websites
deanohume
303
30k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Agile that works and the tools we love
rasmusluckow
325
20k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Transcript
From Material Design to android wear @_saulmm @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
android wear all you need to be a fancy wear
developer - Concepts - Environment - Notification API - Wearable apps - Node Api - Message Api - Watchfaces @Mr_esti
Concepts @Mr_esti
Real life Get phone Use phone @Mr_esti
Five seconds per interaction Wear @Mr_esti
All in a glance…
@Mr_esti
Conectivity
!= @Mr_esti
What is not an android wear
@Mr_esti
Smartwatchs?
Unsupported APIs - android.webkit - android.print - android.app.backup android.appwidget -
android.hardware.usb
@_saulmm Environment
Demo Connecting to wear
Notifications Apps
https://github.com/saulmm/android-wear-basics
Demo Enriched notifications
@_saulmm Don’t stop the user Design for big gestures Design
principles
@_saulmm UX
BoxInsetLayout CardFragment CircledImageView ConfirmationActivity DismissOverlayView GridViewPager GridPagerAdapter FragmentGridPagerAdapter WatchViewSub User
interface widgets
Demo User interface
@_saulmm Installation
Structure mobile / build.gradle @_saulmm
@_saulmm Wearable.{wear_api}.addListener(mGoogleApiClient, this); WearableListenerService
Node NodeApi @_saulmm
Message Api, send Message @_saulmm
Message Api, receive Message @_saulmm
Node Data Message Watchface @_saulmm
Data Watch faces assets & data @_saulmm
https://github.com/saulmm
Useful resources Introduction to Android Wear - Cyril Mottier https://speakerdeck.com/cyrilmottier/introduction-to-android-wear-a-glimpse-into-the-future
Building apps for wearables - Android developers https://developer.android.com/training/building-wearables.html Android wear developers - Google+ Community https://plus.google.com/u/0/communities/113381227473021565406 @_saulmm
None