#IORewind

Android Design Support Library

nuuneoi

#IORewind

android.support.design.widget.FloatingActionButton

android:fabSize – normal (56dp), mini (40dp)

android:src – Icon’s resource

android:backgroundTint – Background color (accent

color will be used if not set)

There is some bug on API Level 21+ (Lollipop)

Floating Action Button (FAB)

#IORewind

android.support.design.widget.Snackbar

Just like a Toast

Snackbar.make(rootLayout, "Hello. I am Snackbar!", Snackbar.LENGTH_SHORT) .setAction("Undo", new View.OnClickListener() { @Override public void onClick(View v) {

} }) .show();

Snackbar

#IORewind

CoordinatorLayout

building dependencies between sibling views and allowing easy scrolling reactions between components

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

<!-- Place Views Inside -->

</android.support.design.widget.CoordinatorLayout

#IORewind

AppBarLayout

a container for Toolbar to make it fit in CoordinatorLayout

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout 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_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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

<!-- Other views -->

</android.support.design.widget.CoordinatorLayout>

#IORewind

CoordinatorLayout’s Content

You need to apply

app:layout_behavior="@string/appbar_scrolling_view_behavior"

to the content view inside Coordinator or it will be placed at the same position as where Toolbar is

#IORewind

CoordinatorLayout’s Content<android.support.design.widget.CoordinatorLayout ...>

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

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

<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical“ app:layout_behavior="@string/appbar_scrolling_view_behavior" >

</LinearLayout>

</android.support.design.widget.CoordinatorLayout>

#IORewind

TabLayout

You could place tabs easily with TabLayout. Support for both fixed and scrollable. Also works with ViewPager.

<android.support.design.widget.CoordinatorLayout ...>

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

<android.support.v7.widget.Toolbar .../>

<android.support.design.widget.TabLayout android:id=“@+id/tabLayout” android:layout_width="match_parent“ android:layout_height="match_parent" />

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

...

</android.support.design.widget.CoordinatorLayout>

#IORewind

TabLayout

tabLayout = (TabLayout) findViewById(R.id.tabLayout); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

To manually add Tab(s)

#IORewind

TabLayout

Parameters:

app:tabMode – fixed (all tabs are shown concurrently) – scrollable (show a subset of tabs)

app:tabGravity – fill (distribute all available space) – center (position tabs in the center of TabLayout)

#IORewind

CollapsingToolbarLayout

Make Toolbar collapsible

#IORewind

CollapsingToolbarLayout

Simply wrap Toolbar with this layout

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

<android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent“ android:layout_height="match_parent“ app:contentScrim=“?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed">

<android.support.v7.widget.Toolbar app:layout_collapseMode=“pin“ .../>

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

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

#IORewind

CollapsingToolbarLayout

Toolbar’s background is recommended to be removed

You can place another View inside at the same approach as FrameLayout. Also with parallax support.

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

<ImageView app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7“ ...>

<android.support.v7.widget.Toolbar .../>

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

#IORewind

NavigationView

Implementing Navigation Drawercontents in very easy way

#IORewind

NavigationView

Define XML Layout for Header View

res/layout/nav_header.xml

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="192dp" android:theme="@style/ThemeOverlay.AppCompat.Dark" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_margin="16dp" android:text="nuuneoi" android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

</FrameLayout>

#IORewind

NavigationView

Define XML for Menu Itemsres/menu/navigation_drawer_items.xml

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

<group android:checkableBehavior="all"> <item android:id="@+id/navigation_item_1" android:icon="@drawable/ic_action_location_found_dark" android:title="Toolbar"/> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_action_location_found_dark" android:title="FloatActionButton"/> <item android:id="@+id/navigation_item_3" android:icon="@drawable/ic_action_location_found_dark" android:title="NavigationView"/> </group>

</menu>

#IORewind

NavigationView

Place NavigationView as navigation drawer of DrawerLayout

</android.support.v4.widget.DrawerLayout ...>

<android.support.design.widget.NavigationView android:id="@+id/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:itemIconTint="#333" app:itemTextColor="#333" app:menu="@menu/navigation_drawer_items" />

</android.support.v4.widget.DrawerLayout>

#IORewind

NavigationView

Result

#IORewind

TextInputLayout

<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content">

<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username" />

</android.support.design.widget.TextInputLayout>

Wrap EditText with this layout to make hint and error text shown as floating labels

#IORewind

Thank YouQ&A