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
660
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
190
Hidden gems and wats for modern Android Development
saulmm
8
890
Android Dev Tools & Workflows
saulmm
3
480
Espresso Workshop, UI Testing en Android
saulmm
2
130
Android Dev Tools & Workflows
saulmm
0
220
Design & be reactive on Android with Iron Man in a clean way
saulmm
16
900
Tools & tips of the trade for the Android Developer
saulmm
31
5.9k
Android Wear vs. Tizen (Apr. 2015)
saulmm
3
1.4k
A glance to android wear
saulmm
3
290
Other Decks in Programming
See All in Programming
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
Six and a half ridiculous things to do with Quarkus
hollycummins
0
210
contribution to astral-sh/uv
shunsock
0
540
Software Architecture
hschwentner
6
2.3k
Google Opalで使える37のライブラリ
mickey_kubo
3
150
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
670
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.5k
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
One Enishi After Another
snoozer05
PRO
0
160
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Language of Interfaces
destraynor
162
25k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Side Projects
sachag
455
43k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making Projects Easy
brettharned
120
6.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
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