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.

Support Design Library

8,042 views

Published on

Android Support Design Library
2015. 7. 12
GDG Korea Android

https://github.com/kunny/blog_samples/tree/master/Android/2015-07-12_Support_Design_Sample

Published in: Software

Support Design Library

  1. 1. a.k.a 머티리얼 디자인 과도기
  2. 2. compile 'com.android.support:design:22.2.0'
  3. 3. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/root"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true">
 
 <android.support.design.widget.AppBarLayout
 android:id=“@+id/app_bar” .. />
 
 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_check_white_24dp"
 android:layout_margin="16dp"
 android:theme="@style/FabTheme"
 app:layout_anchor="@+id/app_bar"
 app:layout_anchorGravity="bottom|right|end"
 />
 
 </android.support.design.widget.CoordinatorLayout>
  4. 4. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/root"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true">
 
 <android.support.design.widget.AppBarLayout
 android:id=“@+id/app_bar” .. />
 
 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:src="@drawable/ic_check_white_24dp"
 android:layout_margin="16dp"
 android:theme="@style/FabTheme"
 app:layout_anchor="@+id/app_bar"
 app:layout_anchorGravity="bottom|right|end"
 />
 
 </android.support.design.widget.CoordinatorLayout>
  5. 5. anchor to AppBar
  6. 6. anchor to AppBar
  7. 7. <android.support.design.widget.CoordinatorLayout>
 
 <android.support.design.widget.AppBarLayout>
 
 <android.support.v7.widget.Toolbar/>
 
 <android.support.design.widget.TabLayout/>
 
 </android.support.design.widget.AppBarLayout>
 
 <android.support.v4.view.ViewPager
 android:id="@+id/viewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
 </android.support.design.widget.CoordinatorLayout>
  8. 8. <android.support.design.widget.CoordinatorLayout>
 
 <android.support.design.widget.AppBarLayout>
 
 <android.support.v7.widget.Toolbar/>
 
 <android.support.design.widget.TabLayout/>
 
 </android.support.design.widget.AppBarLayout>
 
 <android.support.v4.view.ViewPager
 android:id="@+id/viewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
 </android.support.design.widget.CoordinatorLayout>
  9. 9. <android.support.design.widget.CoordinatorLayout>
 
 <android.support.design.widget.AppBarLayout>
 
 <android.support.v7.widget.Toolbar/>
 
 <android.support.design.widget.TabLayout/>
 
 </android.support.design.widget.AppBarLayout>
 
 <android.support.v4.view.ViewPager
 android:id="@+id/viewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
 </android.support.design.widget.CoordinatorLayout> AppBarLayout.ScrollingViewBehavior
  10. 10. <android.support.design.widget.AppBarLayout
 android:id="@+id/appbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 >
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:minHeight="?attr/actionBarSize"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 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>
  11. 11. <android.support.design.widget.AppBarLayout
 android:id="@+id/appbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 >
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:minHeight="?attr/actionBarSize"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 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>
  12. 12. layout_scrollFlags=“scroll|enterAlways”
  13. 13. layout_scrollFlags=“scroll|enterAlways”
  14. 14. <android.support.design.widget.AppBarLayout
 android:id="@+id/appbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
 >
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:minHeight="?attr/actionBarSize"
 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
 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>
  15. 15. no layout_scrollFlags
  16. 16. no layout_scrollFlags
  17. 17. <android.support.design.widget.CoordinatorLayout>
 
 <android.support.design.widget.AppBarLayout>
 
 <android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/collapsing_toolbar"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 app:layout_scrollFlags="scroll|exitUntilCollapsed"
 app:contentScrim="?attr/colorPrimary">
 
 <ImageView android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:src="@drawable/bg_material"
 android:scaleType="centerCrop"
 android:fitsSystemWindows="true"
 app:layout_collapseMode="parallax"/>
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 app:layout_collapseMode="pin" />
 
 </android.support.design.widget.CollapsingToolbarLayout>
 
 </android.support.design.widget.AppBarLayout>
 
 <android.support.v4.widget.NestedScrollView/>
 
 <android.support.design.widget.FloatingActionButton/>
 
 </android.support.design.widget.CoordinatorLayout>
  18. 18. <android.support.design.widget.CoordinatorLayout>
 
 <android.support.design.widget.AppBarLayout>
 
 <android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/collapsing_toolbar"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 app:layout_scrollFlags="scroll|exitUntilCollapsed"
 app:contentScrim="?attr/colorPrimary">
 
 <ImageView android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:src="@drawable/bg_material"
 android:scaleType="centerCrop"
 android:fitsSystemWindows="true"
 app:layout_collapseMode="parallax"/>
 
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 app:layout_collapseMode="pin" />
 
 </android.support.design.widget.CollapsingToolbarLayout>
 
 </android.support.design.widget.AppBarLayout>
 
 <android.support.v4.widget.NestedScrollView/>
 
 <android.support.design.widget.FloatingActionButton/>
 
 </android.support.design.widget.CoordinatorLayout>
  19. 19. Pinned Toolbar, Parallax scrolling ImageView
  20. 20. Pinned Toolbar, Parallax scrolling ImageView
  21. 21. ViewPager vpPager = (ViewPager) findViewById(R.id.viewpager);
 vpPager.setAdapter( new ViewPagerAdapter(getSupportFragmentManager()));
 
 TabLayout tab = (TabLayout) findViewById(R.id.tabs);
 tab.setupWithViewPager(vpPager);
  22. 22. ViewPager vpPager = (ViewPager) findViewById(R.id.viewpager);
 vpPager.setAdapter( new ViewPagerAdapter(getSupportFragmentManager()));
 
 TabLayout tab = (TabLayout) findViewById(R.id.tabs);
 tab.setupWithViewPager(vpPager);
  23. 23. @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 
 int id = item.getItemId();
 
 switch (id) {
 case android.R.id.home:
 drawer.openDrawer(GravityCompat.START);
 return true;
 case R.id.action_tab_fixed_fill:
 tab.setTabMode(TabLayout.MODE_FIXED);
 tab.setTabGravity(TabLayout.GRAVITY_FILL);
 return true;
 case R.id.action_tab_fixed_center:
 tab.setTabMode(TabLayout.MODE_FIXED);
 tab.setTabGravity(TabLayout.GRAVITY_CENTER);
 return true;
 case R.id.action_tab_scrollable:
 tab.setTabMode(TabLayout.MODE_SCROLLABLE);
 return true;
 }
 
 return super.onOptionsItemSelected(item);
 }
  24. 24. @Override
 public boolean onOptionsItemSelected(MenuItem item) {
 
 int id = item.getItemId();
 
 switch (id) {
 case android.R.id.home:
 drawer.openDrawer(GravityCompat.START);
 return true;
 case R.id.action_tab_fixed_fill:
 tab.setTabMode(TabLayout.MODE_FIXED);
 tab.setTabGravity(TabLayout.GRAVITY_FILL);
 return true;
 case R.id.action_tab_fixed_center:
 tab.setTabMode(TabLayout.MODE_FIXED);
 tab.setTabGravity(TabLayout.GRAVITY_CENTER);
 return true;
 case R.id.action_tab_scrollable:
 tab.setTabMode(TabLayout.MODE_SCROLLABLE);
 return true;
 }
 
 return super.onOptionsItemSelected(item);
 }
  25. 25. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/drawer"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context=".MainActivity">
 
 <android.support.design.widget.CoordinatorLayout/>
 
 <android.support.design.widget.NavigationView
 android:id="@+id/navigation_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:fitsSystemWindows="true"
 app:menu="@menu/drawer"/>
 
 </android.support.v4.widget.DrawerLayout>

  26. 26. <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/drawer"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true"
 tools:context=".MainActivity">
 
 <android.support.design.widget.CoordinatorLayout/>
 
 <android.support.design.widget.NavigationView
 android:id="@+id/navigation_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:fitsSystemWindows="true"
 app:menu="@menu/drawer"/>
 
 </android.support.v4.widget.DrawerLayout>

  27. 27. <?xml version="1.0" encoding="utf-8"?>
 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 <group android:checkableBehavior="single">
 <item
 android:id="@+id/nav_dashboard"
 android:icon="@drawable/ic_dashboard_black_24dp"
 android:title="Dashboard" />
 <item
 android:id="@+id/nav_explore"
 android:icon="@drawable/ic_explore_black_24dp"
 android:title="Explore" />
 </group>
 
 <item android:title="Sub menu">
 <menu>
 <item
 android:icon="@drawable/ic_event_black_24dp"
 android:title="Event" />
 <item
 android:icon="@drawable/ic_home_black_24dp"
 android:title="Home" />
 </menu>
 </item>
 </menu>
  28. 28. final DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer);
 NavigationView nv = (NavigationView) findViewById(R.id.navigation_view);
 nv.setNavigationItemSelectedListener(
 new NavigationView.OnNavigationItemSelectedListener() {
 @Override
 public boolean onNavigationItemSelected(MenuItem menuItem) {
 if (menuItem.isCheckable()) {
 menuItem.setChecked(true);
 }
 Toast.makeText(getApplicationContext(),
 menuItem.getTitle(), Toast.LENGTH_SHORT).show();
 drawer.closeDrawers();
 return true;
 }
 });
  29. 29. <style name="MyTextInputLayoutTextAppearance" parent="TextAppearance.AppCompat">
 <item name="android:textColorHint">#0097A7</item>
 <item name="colorControlNormal">#0097A7</item>
 <item name="colorControlActivated">#0097A7</item>
 </style>
  30. 30. <android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/MyTextInputLayoutTextAppearance">
 
 <android.support.v7.widget.AppCompatEditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:hint="E-mail address"/>
 
 </android.support.design.widget.TextInputLayout>
 
 <android.support.design.widget.TextInputLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/MyTextInputLayoutTextAppearance">
 
 <android.support.v7.widget.AppCompatEditText
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:inputType="textPassword"
 android:hint="Password"/>
 
 </android.support.design.widget.TextInputLayout>
  31. 31. FloatingActionButton mFab = (FloatingActionButton) findViewById(R.id.fab);
 mFab.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 View root = findViewById(R.id.root);
 Snackbar sb = Snackbar.make(root, "Test", Snackbar.LENGTH_LONG);
 sb.setAction("Undo", new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 
 }
 });
 sb.show();
 }
 });
  32. 32. android.googlesource.com/platform/frameworks/support/

×