Android Design Support Library

Transcript

1. Android Design Support Library Soham Mondal
2. Soham Mondal - Founder at Triveous - Creator of Voice Recorder - Organizer at Blrdroid soham@blrdroid.org 
 soham@triveous.com
 @s0h4m www.soham.cc
3. Agenda What is the Android Design Support Library?
 Navigation View
 Floating labels for editing text
 Floating action bar
 Snackbar
 Tab layout
 Coordinatorlayout
 Collapsing toolbar layout
 Codelab
4. Android Design Support Library - brings material design components to your app (Android 2.1+) - these were in the material design spec but were not provided by Google before
5. Android Design Support Library compile 'com.android.support:design:22.2.0'
6. Components Navigation Drawer/View
 Floating labels for EditText
 Floating action button
 Snackbar
 Tab layout
 Coordinatorlayout
7. Navigation Drawer
11. - Navigational shortcuts - Frequently used sections - Frequently used actions - Group navigational elements together - You can show numerical/other accompanying information
 - Icons also reflect the importance of the element - The order of the elements are important - Access to Settings/Help Common use cases
14. - Mostly used by power users: difficult to discover, difficult to trigger - Not essential options for the most part, people might not notice this - You might want to inform the user about this option, keep it open or show a tutorial
 - Can be used on mobile, tablets and web - Context that is common to all pages, profile Navigation Drawer Gotchas
17. <android.support.v4.widget.DrawerLayout 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" android:fitsSystemWindows="true"> <!-- your content layout --> <android.support.design.widget.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer"/> </android.support.v4.widget.DrawerLayout>
18. <group android:checkableBehavior="single"> <item android:id="@+id/navigation_item_1" android:checked="true" android:icon="@drawable/ic_android" android:title="@string/navigation_item_1"/> <item android:id="@+id/navigation_item_2" android:icon="@drawable/ic_android" android:title="@string/navigation_item_2"/> </group>
19. Floating Action Button
26. <android.support.design.widget.FloatingActionButton android:id=”@+id/fab_normal” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:src=”@drawable/ic_plus” app:fabSize=”normal” />
27. Snackbar
29. - Just like the toast but more versatile - a) You can swipe it away - b) More than that, it is actionable, you can interact with the snackbar
 - c) It coordinates with other elements like the FAB Snackbar
30. Okay Not Okay
31. Okay Not Okay
32. Okay Not Okay
33. Okay Not Okay
34. Snackbar .make(parentLayout, R.string.snackbar_text, Snackbar.LENGTH_LONG) .setAction(R.string.snackbar_action, myOnClickListener) .show(); // Don’t forget to show!
35. Floating labels for editing text
36. <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:id="@+id/edit_text_email" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textEmailAddress" android:hint="@string/hint_email" /> </android.support.design.widget.TextInputLayout>
37. Tab Layout
40. <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill" /> ViewPager pager = (ViewPager) rootView.findViewById(R.id.viewPager); pager.setAdapter(new MyPagerAdapter(getActivity().getSupportFragmentManager())); TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.sliding_tabs); tabLayout.addTab(tabLayout.newTab().setText("Tab One")); tabLayout.addTab(tabLayout.newTab().setText("Tab Two")); tabLayout.addTab(tabLayout.newTab().setText("Tab Three")); tabLayout.setupWithViewPager(pager);
41. Coordinator Layout
43. <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>
44. Resources - Codelab: http://inthecheesefactory.com/blog/android-design-support- library-codelab/en 
 - Code for app: https://github.com/triveous/cheesesquare
45. Q&A soham@blrdroid.org | soham@triveous.com @s0h4m www.soham.cc www.speakerdeck.com/soham Source: http://www.google.com/design/