Android Design Support Library

Slide 1

Slide 1 text

ANDROID DESIGN SUPPORT LIBRARY Overview of current state and usage recommendataions October 28, 2015 Vasya Drobushkov

Slide 2

Slide 2 text

HISTORY ● Google I/O 2014 – Material design concept was introduced ● AppCompat-v7 library (with AppCompat theme and Toolbar widget) was released (also recycler-view, card-view, pallete support libraries were released) ● Google I/O 2015 – Android Design Support library was released

Slide 3

Slide 3 text

ANDROID DESIGN SUPPORT LIBRARY ● Components to easier build Material applications ● Compatible to API 7 (but actually 15 and even 16 is recommended) ● To be used with appcompat library

Slide 4

Slide 4 text

INSTALLATION Add to your project build.gradle file

Slide 5

Slide 5 text

NAVIGATION VIEW

Slide 6

Slide 6 text

NAVIGATION VIEW Represents a standard navigation menu for application. Features: ● Selectable/clickable items ● Icons ● Paddings ● Fonts ● Header layout ● Subtitles Design Specs: http://goo.gl/5wFoPO

Slide 7

Slide 7 text

NAVIGATION VIEW The menu contents can be populated by a menu resource file. R.menu.drawer_menu drawer_menu.xml To create Divider one should have two groups with different ids.

Slide 8

Slide 8 text

NAVIGATION VIEW Add to activity/fragment layout file:

Slide 9

Slide 9 text

NAVIGATION VIEW Add listeners:

Slide 10

Slide 10 text

NAVIGATION VIEW How to customize Create action_layout.xml

Slide 11

Slide 11 text

NAVIGATION VIEW Add layout to menu item as app:actionLayout

Slide 12

Slide 12 text

NAVIGATION VIEW Set listeners, change texts etc. MenuItemCompat#getActionView

Slide 13

Slide 13 text

TEXT INPUT LAYOUT

Slide 14

Slide 14 text

TEXT INPUT LAYOUT Layout which wraps an EditText to show floating label when the hint is hidden due to user inputting text. TextInputLayout extends LinearLayout. Design Specs: http://goo.gl/Ltv8JQ

Slide 15

Slide 15 text

TEXT INPUT LAYOUT ● Code Example

Slide 16

Slide 16 text

TEXT INPUT LAYOUT Errors textInputLayout#setError (NOT editText#setError !!)

Slide 17

Slide 17 text

TEXT INPUT LAYOUT Char Counters

Slide 18

Slide 18 text

FLOATING ACTION BUTTON

Slide 19

Slide 19 text

FLOATING ACTION BUTTON ● Floating action buttons are used for a promoted action. ● FAB extends ImageView. ● Default background color is colorAccent. ● Two sizes: (Default 56dp, Small 40dp) ● Button-like interface Design Specs: http://goo.gl/NFCJ35

Slide 20

Slide 20 text

FLOATING ACTION BUTTON ● Code Example

Slide 21

Slide 21 text

SNACKBAR

Slide 22

Slide 22 text

SNACKBAR ● Use instead of Toast (has toast- like interface) ● View is used instead of Context ● Can have action (retry, undo etc.) ● Can be dismissed by swipe ● Show time: LENGTH_SHORT, LENGTH_LONG, LENGTH_INDEFINITE ● Might be difficult to use in nested fragments Design Specs: http://goo.gl/oQjwgO

Slide 23

Slide 23 text

SNACKBAR ● Code Example

Slide 24

Slide 24 text

TAB LAYOUT

Slide 25

Slide 25 text

TAB LAYOUT Horizontal layout to display tabs. ● Binding to ViewPager ● Manually created tabs ● Scrollable/Fixed tabs Design Specs: http://goo.gl/dIHEf6

Slide 26

Slide 26 text

TAB LAYOUT ● Integration with ViewPager, Fixed tabs

Slide 27

Slide 27 text

TAB LAYOUT ● Integration with ViewPager, Scrollable tabs

Slide 28

Slide 28 text

TAB LAYOUT ● Manually created tabs

Slide 29

Slide 29 text

TAB LAYOUT Listeners Before: tabStrip#setOnPageChangeListener viewPager#addOnPageChangeListener

Slide 30

Slide 30 text

TAB LAYOUT Listeners Now: viewPager#addOnPageChangeListener Use tabLayout#setOnTabSelectedListener carefully. It has its own implementation when using with ViewPager

Slide 31

Slide 31 text

APP BAR LAYOUT

Slide 32

Slide 32 text

APP BAR LAYOUT AppBarLayout extends LinearLayout Style for TabLayout is applied automatically

Slide 33

Slide 33 text

COORDINATOR LAYOUT

Slide 34

Slide 34 text

COORDINATOR LAYOUT ● CoordinatorLayout is super-powered FrameLayout © ● Container for specific interaction with one or more child views (BEHAVIOR) ● Anchor Views to other Coordinator layout’s children

Slide 35

Slide 35 text

COORDINATOR LAYOUT AND FAB ● No extra code required!

Slide 36

Slide 36 text

COORDINATOR LAYOUT AND FAB ● Code Example

Slide 37

Slide 37 text

COORDINATOR LAYOUT AND APP BAR CoordinatorLayout app:layout_behavior @string/appbar_scrolling_view_behavior Design Specs: http://goo.gl/AYvtRI

Slide 38

Slide 38 text

COORDINATOR LAYOUT AND APP BAR

Slide 39

Slide 39 text

COORDINATOR LAYOUT AND APP BAR AppBarLayout app:layout_scrollFlags scroll

Slide 40

Slide 40 text

COORDINATOR LAYOUT AND APP BAR AppBarLayout app:layout_scrollFlags scroll|enterAlways

Slide 41

Slide 41 text

COORDINATOR LAYOUT AND APP BAR AppBarLayout app:layout_scrollFlags scroll|enterAlways|snap

Slide 42

Slide 42 text

COORDINATOR LAYOUT Scrolling behavior is available when using: ● Recycler View ● NestedScrollView (extends FrameLayout) ● ViewPager with RecyclerView or NestedScrollView ● View (API 21+) view#setNestedScrollingEnabled(Boolean) Otherwise you have to implement required callbacks by yourself!

Slide 43

Slide 43 text

COORDINATOR LAYOUT ● Anchoring

Slide 44

Slide 44 text

COORDINATOR LAYOUT ● Custom Behavior

Slide 45

Slide 45 text

COORDINATOR LAYOUT ● Custom Behavior

Slide 46

Slide 46 text

COORDINATOR LAYOUT ● Custom Behavior

Slide 47

Slide 47 text

COORDINATOR LAYOUT ● Custom Behavior. Result

Slide 48

Slide 48 text

COORDINATOR LAYOUT Scroll Aware FAB Behavior More difficult example by Ian Lake https://goo.gl/GJUnfM (show/hide FAB on list scroll)

Slide 49

Slide 49 text

COLLAPSING TOOLBAR LAYOUT

Slide 50

Slide 50 text

COLLAPSING TOOLBAR LAYOUT Collapsing Toolbar Layout is a wrapper for Toolbar. Features ● Collapsing title ● Content/Status bar scrim ● Parallax scrolling

Slide 51

Slide 51 text

COLLAPSING TOOLBAR LAYOUT ● Code Example

Slide 52

Slide 52 text

COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags scroll

Slide 53

Slide 53 text

COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags scroll|exitUntilCollapsed

Slide 54

Slide 54 text

COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags scroll|enterAlways|enterAlwaysCollapsed

Slide 55

Slide 55 text

COLLAPSING TOOLBAR LAYOUT AppBarLayout app:layout_scrollFlags ISSUE scroll|enterAlways|enterAlwaysCollapsed Look at the arrow

Slide 56

Slide 56 text

COLLAPSING TOOLBAR LAYOUT ● Attributes Overview

Slide 57

Slide 57 text

COLLAPSING TOOLBAR LAYOUT Limitation Has no subtitle, only title Feature Tricky title setting

Slide 58

Slide 58 text

COLLAPSING TOOLBAR LAYOUT Collapsing Toolbar Layout ● extends FrameLayout ● contains Toolbar ● contains ImageView Overdraw?

Slide 59

Slide 59 text

COLLAPSING TOOLBAR LAYOUT White text on white image Problem with font on white image in toolbar layout Look here when text goes through it

Slide 60

Slide 60 text

COLLAPSING TOOLBAR LAYOUT ● Text protection (scrims) Design Specs: https://goo.gl/d3c71N Implementation: http:// stackoverflow.com/a/318 38291/1533933

Slide 61

Slide 61 text

COLLAPSING TOOLBAR LAYOUT Think about overdraw. Use transparency carefully!

Slide 62

Slide 62 text

COLLAPSING TOOLBAR LAYOUT Issues Scrolling to top from collapsed, doesn’t expand toolbar, overflow is shown Not responsive scrolling on fling (http:// stackoverflow.com/a/32454407/1533933, https://goo.gl/oEYnKj)

Slide 63

Slide 63 text

CONCLUSION

Slide 64

Slide 64 text

CONCLUSION

Slide 65

Slide 65 text

CONCLUSION What to do ● Use “AS IS”. Wait for update and fixes. ● Do not use. Wait for update and fixes. ● Use third party libraries https://android-arsenal.com/ ● Fix bugs by yourself https://android.googlesource.com/platform/frameworks/support/ https://android.googlesource.com/platform/frameworks/support/+/master/design/ ● Create everything by yourself

Slide 66

Slide 66 text

THANK YOU!

Slide 67

Slide 67 text

REFERENCES • Sample app: https://github.com/chrisbanes/cheesesquare • CodeLabs Tutorial http://www.code-labs.io/codelabs/material-design-style/index.html#0 • Blog post: http:// android-developers.blogspot.com.by/2015/05/android-design-support-library.html • Blog post about 23.1.0: http:// android-developers.blogspot.com.by/2015/10/android-support-library-231.html?linkId=17977963 • Docs, package summary: http:// developer.android.com/reference/android/support/design/widget/package-summary.html • Release Notes: https://developer.android.com/tools/support-library/index.html • Issue tracker: https:// code.google.com/p/android/issues/list?can=2&q=android+design+support+library&colspec=ID +Type+Status+Owner+Summary+Stars&cells=tiles • Material Design Specs: https://www.google.com/design/spec/material-design/introduction.html • Text Protection: https:// www.google.com/design/spec/style/imagery.html#imagery-ui-integration • ListView scrolling behavior: http://stackoverflow.com/q/30612453/1533933 • CollapsingToolbarLayout bug on fling: http://stackoverflow.com/a/32454407/1533933