Tweet
Tweet

Slide 1

Slide 1 text

Materialize your App with Design Support Library Antonio Leiva @lime_cl [email protected]

Slide 2

Slide 2 text

http://plex.tv

Slide 3

Slide 3 text

http://antonioleiva.com

Slide 4

Slide 4 text

http://devexperto.com

Slide 5

Slide 5 text

http://antonioleiva.com/book/ Kotlin for Android Developers • Create App from scratch • Step by step • Complete Kotlin coverage • Updated to latest version

Slide 6

Slide 6 text

http://antonioleiva.com/book/ Kotlin for Android Developers • Create App from scratch • Step by step • Complete Kotlin coverage • Updated to latest version

Slide 7

Slide 7 text

http://materialdoc.es http://materialdoc.com

Slide 8

Slide 8 text

What is Material Design? Material is the metaphor graphic and bold Meaningful motion

Slide 9

Slide 9 text

What is Material Design? Paper and Ink

Slide 10

Slide 10 text

What is Material Design? Elevation and shadows

Slide 11

Slide 11 text

What is Material Design? Tools for Android • Material Theme (5.0+ y AppCompat) • Design Support Library • Otras librerías útiles

Slide 12

Slide 12 text

Goal • Create an App using all the tools from Design Support Library

Slide 13

Slide 13 text

Material Theme colorPrimary colorPrimaryDark colorAccent

Slide 14

Slide 14 text

Material Theme 
 <item name="colorPrimary">@color/primary</item>
 <item name="colorPrimaryDark">@color/primary_dark</item>
 <item name="colorAccent">@color/accent</item>
 <item name="android:textColorPrimary">@color/primary_text</item>
 <item name="android:textColorSecondary">@color/secondary_text</item>
 <item name="colorControlHighlight">@color/primary_light</item>


Slide 15

Slide 15 text

Toolbar http://www.google.com/design/spec/layout/structure.html#structure-toolbars

Slide 16

Slide 16 text

Toolbar 
 …
 Theme without ActionBar (we’ll add it manually)

Slide 17

Slide 17 text

Toolbar Include Toolbar in your layout

Slide 18

Slide 18 text

Toolbar Themes for Toolbar and menus 
 


Slide 19

Slide 19 text

Toolbar Assign Toolbar as the Action Bar @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 } Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

Slide 20

Slide 20 text

Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9.TextInputLayout 10. Custom Behaviors

Slide 21

Slide 21 text

Introduction

Slide 22

Slide 22 text

Introduction dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile ‘com.android.support:appcompat-v7:23.1.1' compile ‘com.android.support:design:23.1.1’
 }

Slide 23

Slide 23 text

Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9.TextInputLayout 10. Custom Behaviors

Slide 24

Slide 24 text

FloatingActionButton

Slide 25

Slide 25 text

FloatingActionButton

Slide 26

Slide 26 text

FloatingActionButton

Slide 27

Slide 27 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 28

Slide 28 text

SnackBar • Toast substitution • More contextual • A message • An optional action button • Fixed or hides automatically

Slide 29

Slide 29 text

SnackBar Snackbar.make(container, "Fab Clicked", Snackbar.LENGTH_LONG).show(); Snackbar.make(container, "Fab Clicked", Snackbar.LENGTH_INDEFINITE) .setAction(…) .show(); Snack that hides automatically Indefinite snack with an action

Slide 30

Slide 30 text

SnackBar

Slide 31

Slide 31 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 32

Slide 32 text

NavigationView • Simplifies side navigation • Header • Menu • Actions that can be selected

Slide 33

Slide 33 text

NavigationView • Drawer Layout 
 
 
 
 
 
 drawer.openDrawer(gravity); drawer.closeDrawer(gravity); drawer.closeDrawers();

Slide 34

Slide 34 text

NavigationView • Menu: an XML menu can be used

Slide 35

Slide 35 text

NavigationView 
 
 
 
 
 
 
 
 
 
 


Slide 36

Slide 36 text

NavigationView 
 
 
 
 
 
 Selectable items Section with title

Slide 37

Slide 37 text

NavigationView Header

Slide 38

Slide 38 text

NavigationView 
 <item name="android:windowDrawsSystemBarBackgrounds">true</item>
 <item name="android:statusBarColor">@android:color/transparent</item>
 Translucent status bar values-v21

Slide 39

Slide 39 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 40

Slide 40 text

TabLayout // Listener for the pager
 pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));
 
 // Tabs titles based on pager
 tabs.setupWithViewPager(pager);

Slide 41

Slide 41 text

TabLayout app:tabMode=“fixed” (default) app:tabMode=“scrollable”

Slide 42

Slide 42 text

3 Design Support Library 1. Introducción 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 43

Slide 43 text

CoordinatorLayout • Coordinates its children through behaviors

Slide 44

Slide 44 text

CoordinatorLayout 
 
 …
 
 
 


Slide 45

Slide 45 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 46

Slide 46 text

AppBarLayout • Works like a Linear Layout with complex configurations for scroll 
 
 
 
 
 


Slide 47

Slide 47 text

AppBarLayout “layout_scrollFlags” coordinates what view will do on scroll • scroll: follows the scroll. • enterAlways: reappears on scroll up. • snap: animates view when partially hidden. • exitUntilCollapsed: with CollapsingToolbarLayout, collapses until is out. • enterAlwaysCollapsed: like enterAlways, with CollapsingToolbarLayout.

Slide 48

Slide 48 text

AppBarLayout Behaviour on the view we want to observe scroll from.

Slide 49

Slide 49 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 50

Slide 50 text

CollapsingToolbarLayout • Collapses a big Toolbar up to the regular size. • Parallax mode can be used for background images.

Slide 51

Slide 51 text

CollapsingToolbarLayout 
 
 
 
 
 
 
 
 
 


Slide 52

Slide 52 text

CollapsingToolbarLayout 
 
 
 
 
 


Slide 53

Slide 53 text

CollapsingToolbarLayout NestedScrollView es a ScrollView ready to work with CoordinatorLayout (support-v4)

Slide 54

Slide 54 text

CollapsingToolbarLayout

Slide 55

Slide 55 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 56

Slide 56 text

TextInputLayout 
 
 
 


Slide 57

Slide 57 text

3 Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4. NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9. TextInputLayout 10. Custom Behaviors

Slide 58

Slide 58 text

3.10 Custom Behaviors Define how a View behaves inside a CoordinatorLayout on scroll events.

Slide 59

Slide 59 text

3.10 Custom Behaviors • onStartNestedScroll: When scroll starts, it decides whether we’ll consume the event. • onNestedScroll: if we returned true on previous, this will be called during scroll. • layoutDependsOn: return true if this behaviour depends on the view received as parameter. For instance, FAB depends on Snackbar. • onDependentViewChanged: if we returned true on previous, this will be called when those views change. Most important methods on Custom Behaviours

Slide 60

Slide 60 text

3.10 Custom Behaviors public final class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
 
 public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
 }
 
 @Override
 public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
 return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
 }
 
 @Override
 public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
 if (dyConsumed > 0) {
 child.hide();
 } else if (dyConsumed < 0) {
 child.show();
 }
 }
 }

Slide 61

Slide 61 text

3.10 Custom Behaviors

Slide 62

Slide 62 text

Animations Luis G. Valle http://lgvalle.xyz/2015/06/07/material-animations/ https://speakerdeck.com/lgvalle/material-animations-show-me-the-code-codemotion-2015

Slide 63

Slide 63 text

?