Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Materialize Your App with Design Support Library

Materialize Your App with Design Support Library

In this talk, I do a quick look at Material design basic concepts and explain what you need to create Android Apps based on these guidelines, by using the Material Theme. After that, I talk about all the components you can find inside de Design Support Library and how to use them.

This talk was given to Madrid Android Developers Group.

Antonio Leiva

March 03, 2016
Tweet

More Decks by Antonio Leiva

Other Decks in Programming

Transcript

  1. http://antonioleiva.com/book/ Kotlin for Android Developers • Create App from scratch

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

    • Step by step • Complete Kotlin coverage • Updated to latest version
  3. What is Material Design? Tools for Android • Material Theme

    (5.0+ y AppCompat) • Design Support Library • Otras librerías útiles
  4. Material Theme <style name="AppTheme" parent="Theme.AppCompat">
 <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>
 </style>
  5. Toolbar Include Toolbar in your layout <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"


    android:background="?attr/colorPrimary"
 android:theme="@style/AppTheme.ToolbarOverlay"
 app:popupTheme="@style/AppTheme.PopupOverlay"/>
  6. 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);
  7. Design Support Library 1. Introduction 2. FloatingActionButton 3. SnackBar 4.

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

    NavigationView 5. TabLayout 6. CoordinatorLayout 7. AppBarLayout 8. CollapsingToolbarLayout 9.TextInputLayout 10. Custom Behaviors
  9. 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
  10. SnackBar • Toast substitution • More contextual • A message

    • An optional action button • Fixed or hides automatically
  11. 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
  12. NavigationView • Drawer Layout <android.support.v4.widget.DrawerLayout
 android:id="@+id/drawer"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true">
 


    <include layout="@layout/activity_main_content"/>
 
 <android.support.design.widget.NavigationView
 … />
 
 </android.support.v4.widget.DrawerLayout> drawer.openDrawer(gravity); drawer.closeDrawer(gravity); drawer.closeDrawers();
  13. NavigationView <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 
 <item
 android:id="@+id/item1"
 android:icon="@android:drawable/ic_popup_reminder"


    android:title="@string/item1"/>
 
 <item
 android:id="@+id/item2"
 android:icon="@android:drawable/ic_dialog_dialer"
 android:title="@string/item2"/>
 
 <item
 android:id="@+id/item3"
 android:icon="@android:drawable/ic_dialog_map"
 android:title="@string/item3"/>
 
 <item
 android:id="@+id/settings"
 android:icon="@android:drawable/ic_dialog_info"
 android:title="@string/settings"/>
 
 </menu>
  14. NavigationView <group android:checkableBehavior="single">
 <item …/> <item …/> <item …/>
 </group>

    <item android:title="@string/settings">
 <menu>
 <item …/> <item …/>
 </menu>
 </item> Selectable items Section with title
  15. 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
  16. TabLayout <android.support.design.widget.TabLayout
 android:id="@+id/tabs"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:theme="@style/AppTheme.DarkOverlay"/> // Listener for the

    pager
 pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));
 
 // Tabs titles based on pager
 tabs.setupWithViewPager(pager);
  17. 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
  18. CoordinatorLayout <android.support.design.widget.CoordinatorLayout
 android:id="@+id/container"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
 
 …
 
 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"


    android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom|end"
 android:layout_margin="@dimen/spacing_large"
 android:src="@android:drawable/ic_dialog_email"
 app:fabSize="normal"/>
 
 </android.support.design.widget.CoordinatorLayout>
  19. 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
  20. AppBarLayout • Works like a Linear Layout with complex configurations

    for scroll <android.support.design.widget.AppBarLayout
 android:id="@+id/toolbar_layout"
 …>
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 style="@style/AppTheme.Widget.Toolbar"
 app:layout_scrollFlags="scroll|enterAlways"/>
 
 <android.support.design.widget.TabLayout
 android:id="@+id/tabs"
 …/>
 
 </android.support.design.widget.AppBarLayout>
  21. 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.
  22. AppBarLayout Behaviour on the view we want to observe scroll

    from. <android.support.v4.view.ViewPager
 android:id="@+id/pager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
  23. 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
  24. CollapsingToolbarLayout • Collapses a big Toolbar up to the regular

    size. • Parallax mode can be used for background images.
  25. CollapsingToolbarLayout <android.support.design.widget.CollapsingToolbarLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:contentScrim="?attr/colorPrimary"
 app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
 <ImageView …
 android:fitsSystemWindows="true"


    app:layout_collapseMode="parallax"/>
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 tools:src="@mipmap/ic_launcher"/>
 
 </android.support.design.widget.CollapsingToolbarLayout>
  26. 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
  27. 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
  28. 3.10 Custom Behaviors Define how a View behaves inside a

    CoordinatorLayout on scroll events.
  29. 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
  30. 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();
 }
 }
 }
  31. ?