Tutorial on design support library

To understand design support library we will create a simple weather application. In the navigation view we will have a list of city names and if the user clicks on any of them then a detailed weather information for the city will be displayed.

Weather data will be retrieved from openweathermap.org. To use the application you would need to get an appID and set it to the member variable AppId in the class WeatherClient.java.

The complete application can be found at https://github.com/trsquarelab/androidexamples/tree/master/DesignSupportLibrary

Dependency

To add design support library support add the following dependency in your app's build.gradle file.

dependencies {
 compile 'com.android.support:design:23.1.0'
}

Navigation View

Represents a standard navigation menu for application. The menu contents usually are populated from a menu resource.

NavigationView is used as DrawerLayout’s drawer content view. Our main layout file will have the NavigationView added as,

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/weather_info"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/city_list"/>
</android.support.v4.widget.DrawerLayout >

Here the layout file weather_info will have the detailed weather information. To see the full list, please visit https://github.com/trsquarelab/androidexamples/blob/master/DesignSupportLibrary/src/main/res/layout/weather_info.xml

app:headerLayout can be used to set a header for the drawer, this is optional. Our header layout will just a TextView with text as "City".

app:menu is the menu resource inflated for the navigation items.

android:fitsSystemWindows=“true” will ensure that the content don't overlay the system windows, such as navigation bar or status bar.

Our menu resource would look like,

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/cityLondon"
            android:title="London" />
        <item
            android:id="@+id/cityTokyo"
            android:title="Tokyo" />
        <!-- Other items goes here -->
    </group>
</menu>

Please see the full list at https://github.com/trsquarelab/androidexamples/blob/master/DesignSupportLibrary/src/main/res/menu/city_list.xml

Now we should have the drawer that we be opened by swiping from left side of your device.

The drawer can be opened and closed programatically by using DrawerLayout methods openDrawer and closeDrawers respectively.

Handling events on the menu items can be done by setting an implementation of NavigationView.OnNavigationItemSelectedListener using the method NavigationView.setNavigationItemSelectedListener,

     navigationView.setNavigationItemSelectedListener(
        new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem menuItem) {
  // Handle the click event here
            }
        });

Collapsing Toolbars

We will declare CollapsingToolbarLayout inside an AppBarLayout. AppBarLayout allows your Toolbar and other views (such as tabs provided by TabLayout) to react to scroll events in a sibling view.

<android.support.design.widget.AppBarLayout
 android:id="@+id/appbar"
 android:layout_width="match_parent"
 android:layout_height="@dimen/appbar_height"
 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 android:fitsSystemWindows="true">

 <android.support.design.widget.CollapsingToolbarLayout
  android:id="@+id/collapsing_toolbar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_scrollFlags="scroll|exitUntilCollapsed"
  android:fitsSystemWindows="true"
  app:contentScrim="?attr/colorPrimary"
  app:expandedTitleMarginStart="48dp"
  app:expandedTitleMarginEnd="64dp">

  <ImageView
   android:id="@+id/weather_image"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:fitsSystemWindows="true"
   android:scaleX="5.0"
   android:scaleY="5.0"
   android:scaleType="center"
   app:layout_collapseMode="parallax"/>

  <android.support.v7.widget.Toolbar
   android:id="@+id/toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
   app:layout_collapseMode="pin" />

 </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Make sure that app:layout_collapseMode is set to "pin" for the Toolbar. And for ImageView app:layout_collapseMode set to "parallax" to scroll it in a parallax fashion.

app:layout_scrollFlags is used to set the scrolling behavior. "scroll" means the view will scroll in direct relation to scroll events. "exitUntilCollapsed" means while scrolling off screen the view will be scrolled until it is 'collapsed'. Please visit http://developer.android.com/reference/android/support/design/widget/AppBarLayout.LayoutParams.html#attr_android.support.design:layout_scrollFlags for more information.
app:contentScrim is the scrim which is shown  or hidden when the scroll position reached a certain limit. Please visit http://developer.android.com/reference/android/support/design/widget/CollapsingToolbarLayout.html#attr_android.support.design:contentScrim for more information. ?attr/colorPrimar is the primary color of the application, which will be used for action bar background.

Floating Action Button

It is a round button denoting the primary action for the interface. We use it to refresh the weather information.

<android.support.design.widget.FloatingActionButton
        android:id="@+id/refresh_button"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/nested_scrollview"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/refresh_icon"
        android:layout_margin="5dp"
        android:clickable="true"/>

When used with a CoordinatorLayout use layout_anchor along with layout_anchorGravity to place it relative to other views.

Snackbar

Snackbar is another lightweight and quick feedback to a user. Snackbars are shown on the bottom of the screen and contain text with an optional single action.

Keep your Snackbar inside a CoordinatorLayout for swipe to dismiss operation.

They are time out after the given time length by animating off the screen. In addition, users can swipe them away before the timeout.

With no action,

Snackbar.make(refresh_button, "Weather data loaded", Snackbar.LENGTH_LONG)
        .setAction("Ok", null)
        .show();

With an action,

Snackbar.make(refresh_button, "Failed to load weather data: ", Snackbar.LENGTH_LONG)
        .setAction("Reload", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                loadWeatherData();
            }
        }).show();

View of the Snackbar can be accessed using,

View view = snackbar.getView();

The TextView can be accessed using,

TextView tv = (TextView) view.findViewById(android.support.design.R.id.snackbar_text);