Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 3

Slide 3 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 4

Slide 4 text

Everything you see resides on a paper   meet   MATERIAL DESIGN  

Slide 5

Slide 5 text

Paper   Ink   The material on which ink is drawn.   Every pixel drawn by an app on a piece of paper  

Slide 6

Slide 6 text

Paper   Ink   The material on which ink is drawn.   Every pixel drawn by an app on a piece of paper   A  very  good  a+ernoon  to   you  

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Material as a   Tangible Surface  

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

https://www.youtube.com/watch?v=YaG_ljfzeUw  

Slide 16

Slide 16 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

App bar A bar that provides: •  Information of where you are •  Important actions

Slide 19

Slide 19 text

App bar A bar that provides: •  Information of where you are •  Important actions

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

App bar Implementing

Slide 22

Slide 22 text

Toolbar Generalization of action bars for use within application layouts.

Slide 23

Slide 23 text

Toolbar Two ways to use toolbar •  Use toolbar as an actionbar •  Use it as a standalone toolbar

Slide 24

Slide 24 text

widget_toolbar.xml

Slide 25

Slide 25 text

activity_my_layout.xml

Slide 26

Slide 26 text

@Override public void onCreate(Bundle savedInstanceState) { ... toolbar = (Toolbar) findViewById(R.id.toolbar); setActionBar(toolbar); }

Slide 27

Slide 27 text

Toolbar Two ways to use toolbar •  Use toolbar as an actionbar •  Use it as a standalone toolbar

Slide 28

Slide 28 text

Toolbar Two ways to use toolbar •  Use toolbar as an actionbar •  Use it as a standalone toolbar •  Not as an actionbar •  You need to populate the Toolbar with content/ actions manually

Slide 29

Slide 29 text

Full width, default height app bar Full-width, extended height app bar

Slide 30

Slide 30 text

Flexible toolbar and card toolbar

Slide 31

Slide 31 text

Floating toolbar

Slide 32

Slide 32 text

References … Android Docs http://goo.gl/KuQZMq Google Design Guidelines http://goo.gl/dSA09g

Slide 33

Slide 33 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 34

Slide 34 text

BOLD COLORS

Slide 35

Slide 35 text

Appcompat // include the library in your project dependencies { compile 'com.android.support:appcompat- v7:21.+' }

Slide 36

Slide 36 text

Primary Color Accent Color colorPrimary colorAccent colorPrimaryDark

Slide 37

Slide 37 text

<!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item>

Slide 38

Slide 38 text

<!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item>

Slide 39

Slide 39 text

<!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item>

Slide 40

Slide 40 text

<!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item>

Slide 41

Slide 41 text

<!-- Used as the action bar background --> <item name="colorPrimary">@color/ color_primary</item> <!-- Used in the status bar --> <item name="colorPrimaryDark">@color/ color_primary_dark</item> <!-- colorAccent used to tint widgets--> <item name="colorAccent">@color/accent</item> <!-- disable the window action bar --> <item name="windowActionBar">false</item>

Slide 42

Slide 42 text

Appcompat android.support.v7.widget.Toolbar setSupportActionBar(toolbar) Toolbar is also a part of this toolbar

Slide 43

Slide 43 text

Content can provide color! Meet Palette  

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

VIBRANT MUTED DARK VIBRANT DARK MUTED LIGHT VIBRANT LIGHT MUTED

Slide 46

Slide 46 text

Palette also lets you extract   Colors for Title and Body   Vibrant   Title color generated from Vibrant   Body text color generated from Vibrant  

Slide 47

Slide 47 text

// include the library in your project dependencies { compile 'com.android.support:palette- v7:21.+' }

Slide 48

Slide 48 text

// initialization Palette.generate(Bitmap bitmap); Palette.generateAsync(Bitmap bitmap, PaletteAyncListener listener); // fetch color int vibrant = palette.getVibrantColor(DEFAULT_COLOR); // set color myView.setBackgroundColor(vibrant);

Slide 49

Slide 49 text

// fetch Swatch vibrantSwatch = palette.getVibrantSwatch(); // fetch colors from Swatch int color = vibrantSwatch.getRgb(); int titleColor = vibrantSwatch.getTitleTextColor(); Int bodyColor = vibrantSwatch.getBodyTextColor();

Slide 50

Slide 50 text

and hence,   You can do this  

Slide 51

Slide 51 text

References … Chris Banes http://goo.gl/h2on88 http://goo.gl/pu0dXa Android Docs http://goo.gl/BMmhW0 http://goo.gl/VCHQIK

Slide 52

Slide 52 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 53

Slide 53 text

CARDS

Slide 54

Slide 54 text

Cards Implementing

Slide 55

Slide 55 text

CardView

Slide 56

Slide 56 text

// include the library in your project dependencies { compile 'com.android.support:cardview- v7:21.+' } CardView

Slide 57

Slide 57 text

CardView

Slide 58

Slide 58 text

RecyclerView

Slide 59

Slide 59 text

// include the library in your project dependencies { compile 'com.android.support:recyclerview- v7:21.+' } RecyclerView

Slide 60

Slide 60 text

RecyclerView

Slide 61

Slide 61 text

private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { ... mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new MyAdapter(dataset); mRecyclerView.setAdapter(mAdapter); } RecyclerView

Slide 62

Slide 62 text

private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { ... mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new MyAdapter(dataset); mRecyclerView.setAdapter(mAdapter); } RecyclerView

Slide 63

Slide 63 text

private RecyclerView mRecyclerView; private RecyclerView.LayoutManager mLayoutManager; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { ... mRecyclerView.setLayoutManager(mLayoutManager); mAdapter = new MyAdapter(dataset); mRecyclerView.setAdapter(mAdapter); } RecyclerView

Slide 64

Slide 64 text

class MyAdapter extends RecyclerView.Adapter RecyclerView

Slide 65

Slide 65 text

class MyAdapter extends RecyclerView.Adapter class ViewHolder extends RecyclerView.ViewHolder { ... } RecyclerView

Slide 66

Slide 66 text

class ViewHolder extends RecyclerView.ViewHolder { // override the superclass implementation public ViewHolder(View v) { super(v); ... } } RecyclerView

Slide 67

Slide 67 text

class ViewHolder extends RecyclerView.ViewHolder { // override the superclass implementation public ViewHolder(View v) { super(v); // do your findViewById's here } } RecyclerView

Slide 68

Slide 68 text

Class MyAdapter extends RecyclerView.Adapter { @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { return null; } @Override public void onBindViewHolder(ViewHolder viewHolder, int i) { } @Override public int getItemCount() { return 0; } } RecyclerView

Slide 69

Slide 69 text

class BaseAdapter extends RecyclerView.Adapter { @Override public ViewHolder onCreateViewHolder(ViewGroup group, int i) { // set layout and return the ViewHolder View v = LayoutInflater.from(context).inflate(layout, group, false); ViewHolder vh = new ViewHolder(v); return vh; } ... } RecyclerView

Slide 70

Slide 70 text

class BaseAdapter extends RecyclerView.Adapter { @Override public void onBindViewHolder(ViewHolder vh, int i) { // load appropriate data into views vh.getBody().setText(data.get(i)); } ... } RecyclerView

Slide 71

Slide 71 text

class BaseAdapter extends RecyclerView.Adapter { @Override public int getItemCount() { // return your dataset size return data.size(); } ... } RecyclerView

Slide 72

Slide 72 text

References … Grokking Android http://goo.gl/LSXySl Antonio Leiva http://goo.gl/DQIpYv BigNerdRanch http://goo.gl/YFvI4Z Android docs http://goo.gl/ZqGD2v Android Developers Backstage http://goo.gl/k4Wpsd

Slide 73

Slide 73 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 74

Slide 74 text

Activity Transitions

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

// Communicate between Activity A and B Activity Transitions

Slide 77

Slide 77 text

// Communicate between Activity A and B // Activity A pair = new Pair(commonView, IMG); ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(activit y, pair)); startActivity(intent, options.toBundle()); Activity Transitions

Slide 78

Slide 78 text

// Communicate between Activity A and B // Activity B Activity Transitions

Slide 79

Slide 79 text

// Communicate between Activity A and B // Activity B ViewCompat.setTransitionName(commonView, IMG); Activity Transitions

Slide 80

Slide 80 text

Ripple

Slide 81

Slide 81 text

Ripple

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

Ripple

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

Ripple

Slide 86

Slide 86 text

Reveal

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

// use static method to generate required reveal Animator reveal = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius) Reveal

Slide 89

Slide 89 text

// use static method to generate required reveal Animator reveal = ViewAnimationUtils.createCircularReveal(view, x, y, startRadius, endRadius) // register a listener to hide/unhide view reveal.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { view.setVisibility(VISIBILITY); } }); Reveal

Slide 90

Slide 90 text

Vector Drawables

Slide 91

Slide 91 text

Vector Drawables •  This lets you create a drawable based on an XML vector graphic. •  It can be defined in an XML file with the element, which wasn't previously available.

Slide 92

Slide 92 text

Vector Drawables Define an object geometrically •  Points •  Lines •  Curves •  Color information

Slide 93

Slide 93 text

Vector Drawables

Slide 94

Slide 94 text

Vector Drawables

Slide 95

Slide 95 text

Vector Drawables

Slide 96

Slide 96 text

Vector Drawables

Slide 97

Slide 97 text

AnimatedVectorDrawables

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

AnimatedVectorDrawables

Slide 100

Slide 100 text

AnimatedVectorDrawables

Slide 101

Slide 101 text

AnimatedVectorDrawables

Slide 102

Slide 102 text

AnimatedVectorDrawables

Slide 103

Slide 103 text

References … Android Docs http://goo.gl/UCB6Nx http://goo.gl/IG7qre http://goo.gl/0z2Qys Roman Guy http://goo.gl/irAKpI Square Island http://goo.gl/mvVP8X Vector Drawable Generator http://goo.gl/F6TRlg

Slide 104

Slide 104 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 105

Slide 105 text

FAB Floating Action Button The primary action of your app +

Slide 106

Slide 106 text

Floating Action Button The primary action of your app

Slide 107

Slide 107 text

FAB Implementing

Slide 108

Slide 108 text

FAB Shape with an elevation

Slide 109

Slide 109 text

References … Use Libraries J Chris Basha http://goo.gl/jIQAht

Slide 110

Slide 110 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

What’s new with notifications?

Slide 113

Slide 113 text

Floating Action Button The primary action of your app Material Theme

Slide 114

Slide 114 text

Floating Action Button The primary action of your app Notiication Color Notification.Builder.setColor()

Slide 115

Slide 115 text

Floating Action Button The primary action of your app Small icon badging When your app has a large icon and small icon

Slide 116

Slide 116 text

Floating Action Button The primary action of your app Head's up notifications FullScreen activity (fullScreenIntent) Notification has high priority and uses ringtones or vibrations

Slide 117

Slide 117 text

Lock screen notifications VISIBILITY_PUBLIC // lock screen notifications VISIBILITY_SECRET // doesn't show any part of this notification on the lock screen VISIBILITY_PRIVATE // shows basic information, such as the notification's icon and the content title, but hides the notification's full content.

Slide 118

Slide 118 text

// set builder visibility and public notification notificationBuilder .setVisibility(Notification.VISIBILITY_PRIVATE) .setPublicVersion(publicNotification.build());

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

References … Android docs http://goo.gl/q1I1U

Slide 121

Slide 121 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

What’s new with overview?

Slide 124

Slide 124 text

What’s new in overview? Configurable overview cards xml (manifest) Icon - android:icon Label text - android:label Top Bar Color - colorPrimary value of android:theme

Slide 125

Slide 125 text

What’s new in overview? Configurable overview cards Programmatically ActivityManager.TaskDescription td = new ActivityManager.TaskDescription(caption, bitmap, color); setTaskDescription(td);

Slide 126

Slide 126 text

Label Text   Icon   Top Bar Color  

Slide 127

Slide 127 text

What’s new in overview? Support for multi-tasking // Done with intent flags Intent.FLAG_ACTIVITY_NEW_DOCUMENT Intent.FLAG_ACTIVITY_RETAIN_IN_RECENTS

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

Slide 130

Slide 130 text

References … Android docs http://goo.gl/2Sd7xg Big nerd ranch http://goo.gl/FIdaVn

Slide 131

Slide 131 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 132

Slide 132 text

Project Svelte Project Butter

Slide 133

Slide 133 text

Project Volta

Slide 134

Slide 134 text

Project Volta •  batterystats

Slide 135

Slide 135 text

Project Volta •  batterystats •  Battery historian

Slide 136

Slide 136 text

Project Volta •  batterystats •  Battery historian •  JobScheduler

Slide 137

Slide 137 text

Jobscheduler An API for scheduling various types of jobs against the framework that will be executed in your application's own process.

Slide 138

Slide 138 text

Jobscheduler •  Configurable •  Persists across reboot (Yayyy !!!) •  Easy to use API •  Easy to handle failures and retries

Slide 139

Slide 139 text

JobScheduler Implementing

Slide 140

Slide 140 text

Implementing Jobscheduler Configurable components: •  JobInfo •  JobService

Slide 141

Slide 141 text

JobInfo Unit of Job

Slide 142

Slide 142 text

JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();

Slide 143

Slide 143 text

JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();

Slide 144

Slide 144 text

JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();

Slide 145

Slide 145 text

JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();

Slide 146

Slide 146 text

JobInfo jobInfo = new JobInfo.Builder(JOB_ID, new ComponentName(this,MyJobService.class)) .setOverrideDeadline(MAX_TIME) .setMinimumLatency(LATENCY) .setRequiredNetworkType(JobInfo.NETWORK_UNMETE RED) .setRequiresCharging(true) .setExtras(bundle) .setPersisted(true) .setPeriodic(TIME) .build();

Slide 147

Slide 147 text

JobService Entry point for the callback from the JobScheduler.

Slide 148

Slide 148 text

public class MyJobService extends JobService { @Override public boolean onStartJob(JobParameters jobParameters) { ... } @Override public boolean onStopJob(JobParameters jobParameters) { ... } }

Slide 149

Slide 149 text

JobService Write a JobService •  Add to manifest •  Requires android.permission.BIND_JOB_SERVICE •  Override onStartJob() •  Override onStopJob()

Slide 150

Slide 150 text

JobService – onStartJob() Override this method with the callback logic for your job Call jobFinised() after your job is done Return true if your service needs to process the work (on a separate thread). false if there's no more work to be done for this job.

Slide 151

Slide 151 text

JobService – onStopJob() Called by the system before you've had a chance to call jobFinished() When the conditions you defined no longer persists Free up resources held by your logic Return true to indicate to reschedule this job based on the retry criteria provided at job creation-time. false to drop the job.

Slide 152

Slide 152 text

Finally, run the job jobScheduler.schedule(jobInfo);

Slide 153

Slide 153 text

References … Android docs http://goo.gl/Z1AqSn http://goo.gl/dNqUBj http://goo.gl/R18l1d Mark Murphy's talk on Droidcon London http://goo.gl/dluNts

Slide 154

Slide 154 text

1.  Intro 2.  App bar 3.  Color 4.  Cards 5.  Animations 6.  FAB 7.  Notifications 8.  Overview 9.  Project Volta 10.  Resources

Slide 155

Slide 155 text

Follow (Material) Design Patterns http://www.google.com/design/ spec/material-design/ introduction.html

Slide 156

Slide 156 text

Material Up http://www.materialup.com/

Slide 157

Slide 157 text

Android App Design Showcase http:// androidniceties.tumblr.com/

Slide 158

Slide 158 text

YouTube Android Developers Channel http://www.youtube.com/user/ androiddevelopers

Slide 159

Slide 159 text

Roman Nurik

Slide 160

Slide 160 text

Nick Butcher

Slide 161

Slide 161 text

Matias Duarte

Slide 162

Slide 162 text

Download PhoStory from GitHub https://github.com/rakeeb11/phostory

Slide 163

Slide 163 text

Follow the user And all else will follow