Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

639 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Android Design Library Внедрение material-дизайна Максим Юдин
  2. 2. О чем поговорим com.android.support:design:23.1.0 ● Snackbar ● TextInputLayout ● FloatingActionButton ● NavigationView ● CoordinatorLayout ● AppBarLayout ● CollapsingToolbarLayout ● TabLayout
  3. 3. 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();
  4. 4. 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();
  5. 5. 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>
  6. 6. 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);
  7. 7. 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)
  8. 8. 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>
  9. 9. 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>
  10. 10. 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; } });
  11. 11. 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>
  12. 12. 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"
  13. 13. 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"
  14. 14. 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);
  15. 15. Контакты Спасибо за внимание google.com/+MaximYudin

×