1. Cosc 5/4730 Support design library

2. Support Design library Adds (API 9+) back support to a number of 5.0 lollipop widgets and material design pieces – You’ll find a navigation drawer view, floating labels for editing text, a floating action button, snackbar, tabs, and a motion and scroll framework to tie them together. – A note, as of this writing, v23.0.0 broke somethings in Navigation drawer view which worked in 22.2.1 The example code has comments to explain it.

3. Support Design library Using it – Add to the build.gradle (module file) – In the dependencies compile 'com.android.support:design:23.0.0‘ Sync/compile and now it ready to use in your app.

4. SnackBar Similar to a toast shown on the bottom of the screen and contain text with an optional single action. – Like a toast, they automatically time out after the given time length by animating off the screen. In addition, users can swipe them away before the timeout.

5. SnackBar code Simple version Snackbar.make(myView, "Hi there?", Snackbar.LENGTH_LONG) //or SHORT.show(); With the response button Snackbar.make(myView, "Hi there?", Snackbar.LENGTH_LONG) //or SHORT.setAction("Undo?", SBonClickListener) //this line is optional..show(); Where SBonClickListener is a standard OnClicklistener View.OnClickListener SBonClickListener = new View.OnClickListener(){ public void onClick (View v){ Toast.makeText(getActivity(),"You clicked undo", Toast.LENGTH_LONG).show(); } }; myView is first layout for the screen.

6. floating action button The FAB is a round button, instead of the traditional square button. – It’s normally colored with the accent color (from Material design) and a symbol – It also has an elevation (shadow) as well, so it doesn’t look flat on the app.

7. floating action button code Xml <android.support.design.widget.FloatingActio nButton android:id="@+id/fab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_add" app:elevation="@dimen/fab_elevation" app:fabSize="mini" /> Note app, needs xmlns:app=“http://schemas.android.com/ apk/res-auto” at the top. fabSize="normal" for bigger size. The java code is just like a normal widget: myView.findViewById( R.id.fab1).setOnClickListener (new View.OnClickListener() { @Override public void onClick(View v) { … } });

8. TextInputLayout it will display the hint even after the user starts typing and allows you to set an error message as well. The layout wraps around an editText. – Uses standard listener – In the onTextChanged Use setError(msg) – Display an for error setError(“”) – To clear the error.

9. TextInputLayout Xml <android.support.design.widget.TextInputLayout android:id="@+id/textinput02" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/edittext02" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="abc" android:singleLine="true" /> Java code mTextInputLayout = (TextInputLayout) findViewById(R.id.textinput02); et2 = (EditText) findViewById(R.id.edittext02); et2.addTextChangedListener(new TextWatcher() { public void onTextChanged(CharSequence s, int start, int before, int count) { if (!s.toString().equals("abc")) { set the error message that will display below the edittext mTextInputLayout.setError("Incorrect input."); } else { clear the error message. mTextInputLayout.setError(""); }

10. Motion with snackbars. The idea to move things out of the way, while a snackbar is displayed, so that it doesn’t obscure things. An example with the FAB – Which is to be placed at the buttom right. We wrap everything with a CoordinatorLayout

11. CoordinatorLayout Xml Normal layout stuff, that stays still … rest of the layout code. Stuff to move, in this case the FAB For the snackbar, where it wants the layout, we provide it the coorindatorlayout mCoordinatorLayout = (CoordinatorLayout) myView.findViewById(R.id.coordinatorlayout1); Now the layout uses the coordinatorlayout, so they coordinate the snackbar. Snackbar.make(mCoordinatorLayout, "Did the FAB move?", Snackbar.LENGTH_LONG).setAction("Yes?", SBonClickListener).show();

12. Support NavigationView For the DrawerLayout, you can use a “menu” to the drawer instead of creating a listview or fragment. <android.support.design.widget.NavigationView android:id="@+id/navview" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/>

13. NavigationView xml Xml <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@mipmap/ic_launcher" android:title="@string/navigation_item_1"/> <item android:id="@+id/navigation_item_2" android:icon="@mipmap/ic_launcher" android:title="@string/navigation_item_2"/> … Layout for the header is a linearlayout with a textview.

14. NavigationView Java code mNavigationView = (NavigationView) findViewById(R.id.navview); setup a listener, which acts very similar to how menus are handled. mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem menuItem) { we could just as easily call onOptionsItemSelected and how it deal with it. use return onOptionsItemSelected(menuItem); int id = menuItem.getItemId(); if (id == R.id.navigation_item_1) { … return true; //we dealt with it. mDrawerlayout.closeDrawers(); //close the drawer layout } Return false; //we did not deal with it. });

15. Example code All the examples previous slides are in supportdesignDemo – In the Material design directory of the UI repo.

16. Support.TabLayout The support TabLayout will give you tabs (see left) – Uses a tab selected listener, you can change the information, fragment, page in a viewpager. can be used in place of a pageTabStrip on viewpager Examples below use viewpager – Left uses a pagetabstrip and right a tablayout.

17. Collapsing toolbar. Using a listview or Recyclerview – Mostly done with xml with a coordinatorlayout and a AppBarLayout. Plus more. supportDesign3 has the code – And https://guides.codepath.com/android/Han dling-Scrolls-with-CoordinatorLayout maybe helpful as well. https://guides.codepath.com/android/Han dling-Scrolls-with-CoordinatorLayout this will be left for advanced Mobile Apps

18. References http://ezgif.com was used to create the animated pictures (gif) http://ezgif.com http://android- developers.blogspot.com/2015/05/android- design-support-library.html http://android- developers.blogspot.com/2015/05/android- design-support-library.html

19. Q A &