Android Design LibraryВнедрение material-дизайна

Максим Юдин

О чем поговорим

com.android.support:design:23.1.0

● Snackbar● TextInputLayout● FloatingActionButton● NavigationView● CoordinatorLayout● AppBarLayout● CollapsingToolbarLayout● TabLayout

Snackbar// LENGTH_INDEFINITE, LENGTH_LONG, LENGTH_SHORTSnackbar.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();

SnackbarSnackbar.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();

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>

TextInputLayoutxmlns: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);

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:borderWidthapp:elevation (default 6dp)app:pressedTranslationZ (default 12dp)

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>

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>

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; } });

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>

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"

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"

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

Контакты

Спасибо за внимание

google.com/+MaximYudin