Getting Your Act Together with CoordinatorLayout

Learn the basics of how Android's CoordinatorLayout behaviors are used, and methodologies for creating custom behaviors.

Transcript

1. Getting Your Act Together with CoordinatorLayout Dave Smith NewCircle, Inc. @devunwired • +DaveSmithDev
2. "CoordinatorLayout is a super-powered FrameLayout"
4. AppBarLayout RecyclerView FloatingActionButton SnackbarLayout
5. @CoordinatorLayout.DefaultBehavior(FooterBarBehavior.class)
 public class FooterBarLayout extends FrameLayout {
 public FooterBarLayout(Context context) {
 super(context);
 } …
 }
6. @CoordinatorLayout.DefaultBehavior(FooterBarBehavior.class)
 public class FooterBarLayout extends FrameLayout {
 public FooterBarLayout(Context context) {
 super(context);
 } …
 }
7. <android.support.design.widget.CoordinatorLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <com.example.android.coordinatedeffort.widget.FooterBarLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom” app:layout_behavior=“.behaviors.FooterBarBehavior”/>
 
 </android.support.design.widget.CoordinatorLayout>
8. <android.support.design.widget.CoordinatorLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 <com.example.android.coordinatedeffort.widget.FooterBarLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom” app:layout_behavior=“.behaviors.FooterBarBehavior”/>
 
 </android.support.design.widget.CoordinatorLayout>
9. Basic Behaviors public class FooterBarBehavior extends CoordinatorLayout.Behavior<FooterBarLayout> {
 
 public FooterBarBehavior() {
 //Used when attached to a view class as the default behavior
 }
 
 public FooterBarBehavior(Context context, AttributeSet attrs) {
 super(context, attrs);
 //Used when attached to a view via XML
 } …
 }
10. Basic Behaviors public class FooterBarBehavior extends CoordinatorLayout.Behavior<FooterBarLayout> {
 
 public FooterBarBehavior() {
 //Used when attached to a view class as the default behavior
 }
 
 public FooterBarBehavior(Context context, AttributeSet attrs) {
 super(context, attrs);
 //Used when attached to a view via XML
 } …
 } Type of Attached View
11. Layout Behaviors layoutDependsOn() onLayoutChild() onDependentViewChanged() onMeasureChild() onDependentViewRemoved()
12. @Override
 public boolean layoutDependsOn(CoordinatorLayout parent,
 FloatingActionButton child, View dependency) { 
 return dependency instanceof Snackbar.SnackbarLayout;
 }
 
 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { 
 if (dependency instanceof Snackbar.SnackbarLayout) {
 updateFabTranslationForSnackbar(parent, child, dependency);
 } else if (dependency instanceof AppBarLayout) {
 updateFabVisibility(parent, (AppBarLayout) dependency, child);
 } 
 return false;
 }
13. @Override
 public boolean layoutDependsOn(CoordinatorLayout parent,
 FloatingActionButton child, View dependency) { 
 return dependency instanceof Snackbar.SnackbarLayout;
 }
 
 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { 
 if (dependency instanceof Snackbar.SnackbarLayout) {
 updateFabTranslationForSnackbar(parent, child, dependency);
 } else if (dependency instanceof AppBarLayout) {
 updateFabVisibility(parent, (AppBarLayout) dependency, child);
 } 
 return false;
 }
14. @Override
 public boolean layoutDependsOn(CoordinatorLayout parent,
 FloatingActionButton child, View dependency) { 
 return dependency instanceof Snackbar.SnackbarLayout;
 }
 
 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { 
 if (dependency instanceof Snackbar.SnackbarLayout) {
 updateFabTranslationForSnackbar(parent, child, dependency);
 } else if (dependency instanceof AppBarLayout) {
 updateFabVisibility(parent, (AppBarLayout) dependency, child);
 } 
 return false;
 }
15. @Override
 public boolean layoutDependsOn(CoordinatorLayout parent,
 FloatingActionButton child, View dependency) { 
 return dependency instanceof Snackbar.SnackbarLayout;
 }
 
 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { 
 if (dependency instanceof Snackbar.SnackbarLayout) {
 updateFabTranslationForSnackbar(parent, child, dependency);
 } else if (dependency instanceof AppBarLayout) {
 updateFabVisibility(parent, (AppBarLayout) dependency, child);
 } 
 return false;
 }
16. @Override
 public boolean layoutDependsOn(CoordinatorLayout parent,
 FloatingActionButton child, View dependency) { 
 return dependency instanceof Snackbar.SnackbarLayout;
 }
 
 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { 
 if (dependency instanceof Snackbar.SnackbarLayout) {
 updateFabTranslationForSnackbar(parent, child, dependency);
 } else if (dependency instanceof AppBarLayout) {
 updateFabVisibility(parent, (AppBarLayout) dependency, child);
 } 
 return false;
 } Where did this come from?
17. Anchor Views
18. Anchor Views FAB anchored to AppBarLayout
19. AppBarLayout RecyclerView FloatingActionButton SnackbarLayout layoutDependsOn() app:layout_anchor
20. Nested Scrolling RecyclerView CoordinatorLayout Touch Events Scroll Events
21. Nested Scrolling NestedScrollingChild NestedScrollingParent Touch Events Scroll Events
22. Nested Scrolling NestedScrollingChild NestedScrollingParent Touch Event Pre-Scroll Scroll Consumed
23. Scrolling Behaviors onStartNestedScroll() onNestedPreScroll() onNestedScroll() Behavior consumes scroll distance before child. Behavior reacts to unconsumed scroll distance after child. Behavior declares interest in scrolling event.
24. Scrolling Behaviors onStartNestedScroll() onNestedPreFling() onNestedFling() Behavior consumes fling before child. Behavior reacts to unconsumed fling after child. Behavior declares interest in scrolling event.
25. Resources • Example CoordinatorLayout Behaviors • http://milehighandroid.com/ • Android Design Support Library • https://youtu.be/32i7ot0y78U • https://github.com/chrisbanes/cheesesquare