Cosc 5/4730 Support design library - PowerPoint Presentation

Slide1

Cosc 5/4730

Support design librarySlide2

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

.Slide3

Support Design library

Using it

Add to the

build.gradle

(module file)

In the dependencies

compile

com.google.android.material:material:1.0.0

'

Sync/compile and now it ready to use in your app.Slide4

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.Slide5

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.Slide6

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.Slide7

floating action button code

Xml

<

com.google.android.material.floatingactionbutton

.FloatingActionButton

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) {

…

}

});Slide8

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 errorsetError(“”) To clear the error.Slide9

TextInputLayout

Xml

<

com.google.android.material.textfield.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" /> </com.google.android.material.textfield.TextInputLayout>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(""); } }Slide10

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

CoordinatorLayoutSlide11

CoordinatorLayout

Xml

<

androidx.coordinatorlayout.widget.CoordinatorLayout

>

Normal layout stuff, that stays still

<LinearLayout

android:layout_width

="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> … rest of the layout code. </LinearLayout>Stuff to move, in this case the FAB<com.google.android.material.floatingactionbutton.FloatingActionButton … /></com.google.android.material.floatingactionbutton.CoordinatorLayout>For the snackbar, where it wants the layout, we provide it the coorindatorlayoutmCoordinatorLayout = (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();Slide12

Support NavigationView

For the

DrawerLayout

, you can use a “menu” in the drawer instead of creating a

listview

or fragment.

<!-- The navigation drawer -->

<

com.google.android.material.navigation.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"/>Slide13

NavigationView xml

Xml

<

menu

xmlns:android

="http://schemas.android.com/

apk

/res/android">

<group

android:checkableBehavior

="single"> <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"/> …</group>

</menu>Layout for the header is a linearlayout with a textview.Slide14

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.

});Slide15

Example code

All the examples previous slides are in

supportdesignDemo

In the Material design directory of the UI repo.Slide16

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

viewpagerExamples below use viewpagerLeft uses a pagetabstrip and right a tablayout.Slide17

Collapsing toolbar.

Using a

listview

or

Recyclerview

Mostly done with xml with a

coordinatorlayout

and a AppBarLayout

.

Plus more.

supportDesign3 has the codeAnd https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout maybe helpful as well.Slide18

References

http://

ezgif.com

was used to create the animated pictures (gif)

http://

android-developers.blogspot.com/2015/05/android-design-support-library.html

Slide19

Q

A

&