Tweet
Tweet

Slide 1

Slide 1 text

Android Design Library +marcospaulosd @marcospaulosd

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Why a design library? "Design is all about finding solutions within constraints; if there were no constraints, it's not design - it's art." Matias Duarte Design God @Google

Slide 4

Slide 4 text

Bring Material Design to Pre-Lollipop devices. Reference implementation of Material design. Encourage the adoption of Material. Simplify the implementation of motion coordination. Why a design library?

Slide 5

Slide 5 text

Components

Slide 6

Slide 6 text

Snackbar

Slide 7

Slide 7 text

Snackbar It inherits most of Toast methods.

Slide 8

Slide 8 text

Floating Action Button

Slide 9

Slide 9 text

Floating Action Button 56dp - Normal Size 40dp - Mini Size Customizable fabSize backgroundTint borderWidth rippleColor

Slide 10

Slide 10 text

EditText Floating Labels

Slide 11

Slide 11 text

EditText Floating Labels When an EditText has focus, the assigned hint will ‘float’ above the view to the top-left hand side

Slide 12

Slide 12 text

Navigation View

Slide 13

Slide 13 text

Navigation View Simpler and easier way to implement Navigation Drawer

Slide 14

Slide 14 text

Navigation View Simpler and easier way to implement Navigation Drawer Customizable itemBackground itemIconTint itemTextColor OnNavigationItemSelectedListener

Slide 15

Slide 15 text

TabLayout

Slide 16

Slide 16 text

TabLayout Provides a scrollable tab bar component for use in applications

Slide 17

Slide 17 text

TabLayout Provides a scrollable tab bar component for use in applications Attributes tabMode tabGravity setText setIcon

Slide 18

Slide 18 text

TabLayout Provides a scrollable tab bar component for use in applications Attributes tabMode tabGravity setText setIcon Listeners OnTabSelectedListener TabLayoutOnPageChangeListener

Slide 19

Slide 19 text

CoordinatorLayout

Slide 20

Slide 20 text

CoordinatorLayout

Slide 21

Slide 21 text

CoordinatorLayout The CoordinatorLayout builds on-top of the motion effects already provided by adding the ability to transition views based on the motion of others. Floating Action Button

Slide 22

Slide 22 text

CoordinatorLayout Floating Action Button

Slide 23

Slide 23 text

CoordinatorLayout Floating Action Button layoutAnchor layoutAnchorGravity

Slide 24

Slide 24 text

CoordinatorLayout Floating Action Button layoutAnchor layoutAnchorGravity

Slide 25

Slide 25 text

CoordinatorLayout Floating Action Button layoutAnchor layoutAnchorGravity

Slide 26

Slide 26 text

CoordinatorLayout

Slide 27

Slide 27 text

CoordinatorLayout App Bar Let us adapt our layouts based on different scroll events that may take place.

Slide 28

Slide 28 text

CoordinatorLayout layout_scrollFlags Used to declare wether views should scroll off screen or remain pinned at the top.

Slide 29

Slide 29 text

CoordinatorLayout enterAlways Collapses the toolbar, but keeps the tabs in view

Slide 30

Slide 30 text

CoordinatorLayout enterAlwaysCollapsed Collapses the toolbar completely, includes any ‘flexible space’ within the view

Slide 31

Slide 31 text

CoordinatorLayout exitUntilCollapsed Collapses the toolbars ‘flexible space’, but keeps the toolbar itself in view

Slide 32

Slide 32 text

CoordinatorLayout enterAlways

Slide 33

Slide 33 text

CoordinatorLayout enterAlways android.support.design.widget.AppBarLayout$ ScrollingViewBehavior

Slide 34

Slide 34 text

CoordinatorLayout enterAlways

Slide 35

Slide 35 text

CoordinatorLayout Toolbars CollapsingToolbarLayout allow us to collapse the toolbar as the user scrolls the screen content

Slide 36

Slide 36 text

CoordinatorLayout layout_collapseMode = Pin

Slide 37

Slide 37 text

CoordinatorLayout layout_collapseMode = Paralax

Slide 38

Slide 38 text

CoordinatorLayout Understanding Behavior CoordinatorLayout is important cause it looks for Views that have a behavior. You can set a behavior using app:layout_behavior or by using the annotation @DefaultBehavior in a Custom View

Slide 39

Slide 39 text

CoordinatorLayout Behavior methods public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) Verifies if it should dispatch the DependentViewChanged Called every time there is a change on the dependency

Slide 40

Slide 40 text

CoordinatorLayout Behavior methods - child View that will change based on another view. - dependency View that will trigger the behavior, it can be a NestedView, RecyclerView, ViewPager and some others.

Slide 41

Slide 41 text

CoordinatorLayout Floating Action Button Behavior The translate animation of the FAB when a snack bar appears and the shrink animation inside a AppBar when it collapses are part of FloatingActionButton Behavior

Slide 42

Slide 42 text

CoordinatorLayout Floating Action Button Behavior

Slide 43

Slide 43 text

CoordinatorLayout Floating Action Button Behavior

Slide 44

Slide 44 text

CoordinatorLayout Floating Action Button Behavior

Slide 45

Slide 45 text

CoordinatorLayout Creating a custom Behavior

Slide 46

Slide 46 text

CoordinatorLayout Creating a custom Behavior What if we want our FAB to hide when we scroll down and appear when we scroll up?

Slide 47

Slide 47 text

CoordinatorLayout Creating a custom Behavior

Slide 48

Slide 48 text

CoordinatorLayout Creating a custom Behavior

Slide 49

Slide 49 text

CoordinatorLayout Creating a custom Behavior

Slide 50

Slide 50 text

CoordinatorLayout Creating a custom Behavior

Slide 51

Slide 51 text

CoordinatorLayout Advantage over implementing it on a ScrollListener The code is unaware of who is scrolling. It can be a defaultBehavior for your app. Meaning every time you have a FAB inside a CoordinatorLayout, it will automatically hide. Cleaner code. Can be used for any view, not only for a FAB.

Slide 52

Slide 52 text

Android Design Library It’s time for Developers start caring more about UI and Design! https://plus.google.com/+IanLake/posts/haQL1mnTzaw tps://medium.com/ribot-labs/exploring-the-new-android-design-support-library-b7cda56d2c32 References:

Slide 53

Slide 53 text

Thank you!! +marcospaulosd @marcospaulosd