We're an independent design & development agency.

Android Design Support Library

IVAN MARKUSI

ABOUT

• Material design components and patterns

• Easy-to-use API

• Backwards compatible (down to API 7)

• Developed and maintained by Google

SETUP

• Download Android Support Repository

• Add dependency

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

• Navigation View

• Tab Layout

• Text Input Layout

• Coordinator Layout

• Snackbar

• Floating Action Button

• App Bar Layout

• Collapsing Toolbar Layout

FEATURES

NAVIGATION VIEW

• Placed inside Drawer Layout

• Header and Menu defined via XML

• Simple & straightforward usage

• No further customisation

TAB LAYOUT

• Displaying grouped content

• Built-in integration with ViewPager tabLayout.setupWithViewPager(viewPager);

• Highly customisable • Custom views • Tabs gravity and scroll mode • Listeners

TEXT INPUT LAYOUT

• EditText wrapper

void setError(@Nullable CharSequence error) void setHint(@Nullable CharSequence hint) void setHintTextAppearance(@StyleRes int resId)

<android.support.design.widget.TextInputLayout android:id="@+id/text_input_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:errorEnabled="true" app:hintAnimationEnabled="true"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/edit_text_title" android:hint="@string/enter_header_title" android:singleLine="true"/> </android.support.design.widget.TextInputLayout>

COORDINATOR LAYOUT

• “Super-powered” FrameLayout

• Top level layout

• Coordinates dependencies between child views

• CoordinatorLayout.Behaviour

COORDINATOR LAYOUT

public static class Behavior extends CoordinatorLayout.Behavior<FloatingActionButton> { private static final boolean SNACKBAR_BEHAVIOR_ENABLED; private Rect mTmpRect; public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) { return SNACKBAR_BEHAVIOR_ENABLED && dependency instanceof Snackbar.SnackbarLayout; } public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton child, View dependency) { if(dependency instanceof Snackbar.SnackbarLayout) { this.updateFabTranslationForSnackbar(parent, child, dependency); } else if(dependency instanceof AppBarLayout) { this.updateFabVisibility(parent, (AppBarLayout)dependency, child); } return false; }

SNACKBAR

• Supercharged Toast

• Lightweight feedback

• Can contain action

• Can be swiped off the screen

• Represent a primary action in an application

• Implements material design guidelines

• Limited API, consider using 3rd party libs https://github.com/makovkastar/FloatingActionButton

FLOATING ACTION BUTTON

SNACKBAR & FABSnackbar.make(createTabButton, String.format(getString(R.string.tab_count), tabLayout.getTabCount()), Snackbar.LENGTH_LONG) .setAction(R.string.dismiss, new View.OnClickListener() { @Override public void onClick(View v) { snackbar.dismiss(); } }).show();

APPBAR LAYOUT

• “Special kind of toolbar”

• Implements material design app bar concept

• Children should provide desired scrolling behaviour

• Requires a separate scrolling sibling

APPBAR LAYOUT

<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways"/> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content"/></android.support.design.widget.AppBarLayout>

COLLAPSING TOOLBAR LAYOUT

• Toolbar wrapper

• Implements a collapsing app bar

• Direct child of AppBarLayout

<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/accent" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/list_item"/> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textSize="@dimen/header_text_size" tools:text="1. header"/> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"/> </android.support.design.widget.CollapsingToolbarLayout>

//display title when scrim is drawnappBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (collapsingToolbar.getHeight() + i < 2 * ViewCompat.getMinimumHeight(collapsingToolbar)) { collapsingToolbar.setTitle(titleTextView.getText()); } else { collapsingToolbar.setTitle(""); } }});

switch (spinner.getSelectedItemPosition()) { case 0: collapseMode = CollapsingToolbarLayout.LayoutParams.COLLAPSE_MODE_OFF; break; case 1: collapseMode = CollapsingToolbarLayout.LayoutParams.COLLAPSE_MODE_PARALLAX; break; default: collapseMode = CollapsingToolbarLayout.LayoutParams.COLLAPSE_MODE_PIN; break; }

COLLAPSING TOOLBAR LAYOUT

COLLAPSING TOOLBAR LAYOUT

CONCLUSION

• Unique features

• Eye catching, easy to implement

• Read the source/decompiled code!

• 3rd party libs are the way-to-go for some components

Thank you!

EMAIL: IVAN.MARKUSI@INFINUM.HR

www.infinum.co

QUESTI0NS?