Let s do Material Design
Agenda Introduction to Material Design Toolbar Navigation Drawer SwipeRefreshLayout RecyclerView Floating Action Button CardView
Toolbar - Lives in package android.support.v7.widget - Found in Support library v7 - It s a generalization of action bars for use within application layouts - Toolbar supports a more focused feature set than ActionBar
Styling our Toolbar - theme.xml or style.xml <style name="apptheme" parent="theme.appcompat.light.noactionbar"> <item name="colorprimary">@color/myprimarycolor</item> <item name="colorprimarydark">@color/myprimarydarkcolor</item> <item name="coloraccent">@color/myaccentcolor</item> <item name="drawerarrowstyle">@style/drawerarrowstyle</item> <item name="android:windowdrawssystembarbackgrounds">true</item> <item name="android:statusbarcolor">@android:color/transparent</item> <item name="android:windowbackground">@color/mywindowbackground</item> <item name="android:windowcontenttransitions">true</item> </style>
Styling our Toolbar - theme.xml or style.xml <style name="drawerarrowstyle" parent="widget.appcompat.drawerarrowtoggle"> <item name="spinbars">true</item> <item name="color">@android:color/white</item> </style> <style name="toolbarstyle" parent=""> <item name="android:elevation">@dimen/toolbar_elevation</item> <item name="popuptheme">@style/themeoverlay.appcompat.light</item> <item name="theme">@style/themeoverlay.appcompat.dark.actionbar</item> </style>
toolbar.xml <android.support.v7.widget.toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorprimarydark" style="@style/toolbarstyle"/> Setup in code ///Gets {@see Toolbar} instance from inflated layout toolbar = (Toolbar) findviewbyid(r.id.toolbar); //Sets our Toolbar instance as our application's ActionBar setsupportactionbar(toolbar); //Enables Home as Up - Arrow or Drawer icon getsupportactionbar().setdisplayhomeasupenabled(true);
Navigation Drawer - It s a layout that looks like a drawer - It contains all the possible main navigation entry points - It s mainly used to the left of the screen - It can have any quantity of items, having a vertical scroller - Items often use an icon, name and a count - Drawer can contain different layout items and/or dividers - It s connected to the Toolbar
Navigation Drawer Implementation - RecyclerView version //The drawer layout private DrawerLayout drawerlayout; //A {@see RecyclerView} which will contain the drawer items private RecyclerView drawerlist; // A {@see RecyclerAdapter} for the RecyclerView private RecyclerAdapter draweradapter; //The RecyclerAdapter callback private RecyclerAdapter.RecyclerAdapterCallback drawercallback; /** This class provides a handy way to tie together the functionality of * {@see android.support.v4.widget.drawerlayout} and {@see Toolbar} to implement the recommended design for navigation drawers. */ private ActionBarDrawerToggle actionbardrawertoggle;
RecyclerView - A flexible view for providing a limited window into a large data set. - Recycles its views which makes a big performance improvement - Uses a layout manager to tell how its items should be aligned - Requires an Adapter like ListView - Better scrolling support - Uses the pattern viewholder internally - Let s see some code!
SwipeRefreshLayout - Lives in package android.support.v4.widget - Found in Support library v4 and v7 - Should be used whenever the user can refresh the contents of a view via a vertical swipe gesture - Should fetch latest updates from server - It only accepts one child layout - Provides multiple methods for customization
SwipeRefreshLayout //Gets {@see SwipeRefreshLayout} instance from inflated layout swiperefreshlayout = ( SwipeRefreshLayout )findviewbyid( R.id.swipeRefreshLayout ); //Sets the spinning view colours from color resource ids swiperefreshlayout.setcolorschemeresources(r.color.dark_green, R.color.light_green, R.color.dark_green, R. color.light_green); //Set spinning view background color from resource id swiperefreshlayout.setprogressbackgroundcolorschemeresource(r.color.light_white); //Sets the {@see SwipeRefreshLayout.OnRefreshListener} to our SwipeRefreshLayout instance swiperefreshlayout.setonrefreshlistener(this);
Floating Action Button - Used to distinguish main actions - At Google I/O they said that now is bundled with support library version 22.2.0 - Plenty of implementations all across the web https://github.com/futuresimple/android-floating-action-button https://github.com/makovkastar/floatingactionbutton - Max quantity within a screen is 6 - Let s see Material Design spec
Floating Action Button - Basic implementation <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/view_container" android:layout_width="match_parent" android:layout_height="match_parent"/> <ImageButton android:id="@+id/floatingactionbutton" android:layout_gravity="bottom end" style="@style/fabeditstyle" android:scaletype="fitxy"/> </FrameLayout>
Floating Action Button - Basic implementation <style name="fabeditstyle"> <item name="android:layout_width">56dp</item> <item name="android:layout_height">56dp</item> <item name="android:layout_margin">@dimen/spacing_large</item> <item name="android:padding">@dimen/spacing_large</item> <item name="android:background">@drawable/fab_background</item> <item name="android:src">@drawable/ic_action_edit</item> <item name="android:outlineprovider">background</item> <item name="android:statelistanimator">@anim/fab_elevation</item> </style>
CardView - Let s see the spec http://www.google.com/design/spec/components/cards.html#
Resources Your project should have the following libraries in order to use the discussed components: compile 'com.android.support:appcompat-v7:22.+' compile 'com.android.support:recyclerview-v7:22.+' compile 'com.android.support:cardview-v7:22.+' You can download and/or fork the sample code from: https://github.com/proverbface/materialdesign
Questions? Juan Pablo Proverbio proverbio8@gmail.com