Доклад с GDG DEvFest Voronezh 2015.

2. Android Design Library
Внедрение material-дизайна
Максим Юдин

3. О чем поговорим
com.android.support:design:23.1.0
● Snackbar
● TextInputLayout
● FloatingActionButton
● NavigationView
● CoordinatorLayout
● AppBarLayout
● CollapsingToolbarLayout
● TabLayout

4. Snackbar
// LENGTH_INDEFINITE, LENGTH_LONG, LENGTH_SHORT
Snackbar.make(view, "Hello SnackBar!", Snackbar.LENGTH_SHORT)
.setAction("Undo", new View.OnClickListener() {
@Override
public void onClick(View v) {
// действие по кнопке Undo
}
})
.setDuration(30000)
.setActionTextColor(ContextCompat.getColor(MainActivity.this, android.R.color.
white))
.show();

5. Snackbar
Snackbar.make(view, "Hello SnackBar!", Snackbar.LENGTH_SHORT)
.setCallback(new Callback() {
@Override
public void onDismissed(Snackbar snackbar, int event) {
// DISMISS_EVENT_ACTION - отмена по кнопке действия
// DISMISS_EVENT_CONSECUTIVE - отмена из-за показа другого SnackBar
// DISMISS_EVENT_MANUAL - отмена вручную методом dismiss()
// DISMISS_EVENT_SWIPE - отмена свайпом
// DISMISS_EVENT_TIMEOUT - отмена по таймауту
}
@Override
public void onShown(Snackbar snackbar) {
}
}).show();

6. TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="@+id/emailWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>

7. TextInputLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
TextInputLayout passwordWrapper = (TextInputLayout)
findViewById(R.id.passwordWrapper);
EditText etPassword = passwordWrapper.getEditText();
passwordWrapper.setError("Пароль должен быть не
менее 8 символов");
app:errorTextAppearance=”your_text_style”
app:errorEnabled="false"
passwordWrapper.setErrorEnabled(true);
passwordWrapper.isErrorEnabled(true);
passwordWrapper.setHint("Пароль");
passwordWrapper.getHint();
app:hintTextAppearance=”your_text_style”
app:hintAnimationEnabled="false"
passwordWrapper.setHintAnimationEnabled(false);
passwordWrapper.isHintAnimationEnabled(false);

8. FloatingActionButton
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:fabSize="mini | normal"
android:layout_margin="@dimen/fab_margin"
android:src="@drawable/ic_favorite"/>
mini - 40 dp, normal - 56 dp, src - 24dp
app:backgroundTint="@color/colorPrimary"
app:backgroundTintMode="multiply"
setBackgroundTintList (ColorStateList tint)
app:rippleColor=”@android:color/background_dark”
app:borderWidth
app:elevation (default 6dp)
app:pressedTranslationZ (default 12dp)

9. NavigationView
<android.support.v4.widget.DrawerLayout
android:fitsSystemWindows="true" >
<include layout="@layout/content" />
<android.support.design.widget.NavigationView
android:id="@+id/nvMain"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nhMain"
app:menu="@menu/mnuMainNavigation"/>
</android.support.v4.widget.DrawerLayout>

10. NavigationView
<menu>
<group android:checkableBehavior="single">
<item android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
</group>
<item android:title="Communicate">
<menu>
<item android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send"/>
</menu>
</item>
</menu>

11. NavigationView
nvMain.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
int id = menuItem.getItemId();
if (id == R.id.nav_camеra) {
// Действие по нажатию на элемент
}
DrawerLayout drawer = (DrawerLayout)
findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
});

12. CoordinatorLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.
com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

13. AppBarLayout
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed|exitUntilCollapsed"
app:layout_behavior="@string/appbar_scrolling_view_behavior"

14. CollapsingToolbarLayout
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:contentScrim="?attr/colorPrimary"

15. TabLayout
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable|fixed" />
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.setupWithViewPager(viewPager);

16. Контакты
Спасибо за внимание
google.com/+MaximYudin