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
630
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
180
Hidden gems and wats for modern Android Development
saulmm
8
860
Android Dev Tools & Workflows
saulmm
3
460
Espresso Workshop, UI Testing en Android
saulmm
2
110
Android Dev Tools & Workflows
saulmm
0
220
Design & be reactive on Android with Iron Man in a clean way
saulmm
16
890
Tools & tips of the trade for the Android Developer
saulmm
31
5.8k
Android Wear vs. Tizen (Apr. 2015)
saulmm
3
1.4k
A glance to android wear
saulmm
3
280
Other Decks in Programming
See All in Programming
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
本当だってば!俺もTRICK 2022に入賞してたんだってば!
jinroq
0
240
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
1k
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.5k
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
7
6.5k
ベクトル検索システムの気持ち
monochromegane
30
8.8k
生産性アップのためのAI個人活用
kunoyasu
0
620
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
450
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
170
AI時代のプログラミング教育 / programming education in ai era
kishida
22
20k
Devinのメモリ活用の学びを自社サービスにどう組み込むか?
itarutomy
0
1.6k
マルチアカウント環境での、そこまでがんばらない RI/SP 運用設計
wa6sn
0
540
Featured
See All Featured
Fireside Chat
paigeccino
37
3.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
How GitHub (no longer) Works
holman
314
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
470
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Building Your Own Lightsaber
phodgson
104
6.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
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