1. Cosc 5/4730 Material Design Spec’s and Toolbar.

2. Material Design First and for most, Material Design is a spec used by android to have app look similar and function in similar matter. About every 2 to 3 years google puts a set of spec. This years is called Material Design and is mostly for lollipop and can back ported to 4.X devices as well. The spec’s are very long and I’m going to cover them all here. – http://www.google.com/design/spec/material- design/introduction.html# http://www.google.com/design/spec/material- design/introduction.html#

3. Theme and Colors. http://www.google.com/design/spec/style/col or.html#color-ui-color-application http://www.google.com/design/spec/style/col or.html#color-ui-color-application – The colorPrimary is a 500 color – ColorPrimaryDark is a 700 color – colorAccent is a A200 color – textColor, textColorPrimary, textColorSecondary – windowBackgroundColor – navigationBarColor which is normally a colorPrimary color as well. http://www.materialpalette.com/indigo/pink or http://www.materialpalette.com/ maybe helpful in picking colors. http://www.materialpalette.com/indigo/pinkhttp://www.materialpalette.com/ Note, only ColorPrimary, colorPrimaryDark, and colorAccent are back supported.

4. Example android 4.4.xandroid 5.0.x

5. Theme and Colors (2) values/styles.xml <!– customizations for 4.4.X and before @color/primaryColor @color/primaryColorDark @color/accentColor values-v21/styles.xml @color/primaryColor @color/primaryColorDark @color/accentColor @color/textColor @color/textColorSecondary @color/navigationBarColor @color/windowBackgroundColor

6. Theme and Colors (3) Values/colors.xml <!-- a good place to try different colors is http://www.materialpalette.com/ Also googles: http://www.google.com/design/spec/style/color.html--> #3f51b5 #303f9f #ff4081 #C5CAE9 #FFFFFF #212121 #727272 #607d8b #303f9f

7. toolbar The ActionBar is been basically replaced in lollipop with the ToolBar. There is a support.v7 version as well. – Allows you to move the “ActionBar” and change it size too. – One thing is you can now have more then one toolbar as well. Requires a style change. – OR For the dark theme.

8. toolbar In a xml layout: <android.support.v7.widget.Toolbar … android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primaryColor" … likely more theme/style attributes.

9. Toolbar (java) use the v7.toolbar instead of the default one. toolbar = (Toolbar) findViewById(R.id.app_bar); setSupportActionBar(toolbar); Now this is the ActionBar and you use all the same methods as before – Which all my examples already use the SupportActionBar, so everything works.

10. Toolbar (java) If you want second (or more) toolbar, say at the bottom – Then you have to control that via the toolbar and not as actionbar. There can be only one “actionbar”.

11. Navigation Drawer Layout This is all but the default method that google wants you to use for navigation – As well as menus. – So at any point you think about using a listview as a separate fragment – Play store as example:

12. Navigation Drawer Layout (2) Using the toolbar instead of the actionbar, – The navigation bar provides the function as google wants: the drawer layout covers the toolbar when it is open. – ActionBarToolBar

13. RecyclerView and CardView A more powerful listview. You need to include the them in the dependencies (build.gradle module) – Compile 'com.android.support:recyclerview- v7:21.+' – compile 'com.android.support:cardview-v7:21.+'

14. RecyclerView Add the following to your layout <android.support.v7.widget.RecyclerView android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent"/> In you activity/fragment use the following code, (very similar to a listview) – mRecyclerView = (RecyclerView)findViewById(R.id.list); – mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); – mRecyclerView.setItemAnimator(new DefaultItemAnimator()); setup the adapter, which is myAdapter, see the next slide for code. – There is no simple adapter version, you need to extend it. – mAdapter = new myAdapter(values, R.layout.my_row, this); – mRecyclerView.setAdapter(mAdapter);

15. Recyclerview.Adapter The recyclerview uses a viewHolder public class myAdapter extends RecyclerView.Adapter { – Note, the ViewHolder will be declared in this class, on the next slide. – Otherwise, this set of code is just like a standard adapter. private List myList; private int rowLayout; private Context mContext; public myAdapter(List myList, int rowLayout, Context context) { this.myList = myList; this.rowLayout = rowLayout; this.mContext = context; } @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(rowLayout, viewGroup, false); return new ViewHolder(v); //this is the major change here. } @Override public int getItemCount() { return myList == null ? 0 : myList.size(); }

16. Recyclerview.Adapter (2) This class is the setup class. You only declare the variables here and get them from the view. public static class ViewHolder extends RecyclerView.ViewHolder { public TextView myName; public ImageView Pic; public ViewHolder(View itemView) { super(itemView); myName = (TextView) itemView.findViewById(R.id.Name); Pic= (ImageView)itemView.findViewById(R.id.picture); }

17. My_row.xml and cardView <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="5dp" card_view:cardCornerRadius="5dp" > <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/picture" android:layout_width="match_parent" android:layout_height="100dp" android:scaleType="centerCrop" android:tint="@color/photo_tint" android:layout_centerInParent="true" /> <TextView android:id="@+id/Name" android:gravity="center" android:background="?android:selectableItemBackground" android:focusable="true" android:clickable="true" android:layout_width="match_parent" android:layout_height="100dp" android:textSize="24sp" android:layout_centerInParent="true" android:textColor="@android:color/white" />

18. Recyclerview.Adapter (3) This method is the that setups whatever is in the view. @Override public void onBindViewHolder(ViewHolder viewHolder, int i) { String entry = myList.get(i); viewHolder.myName.setText(entry); viewHolder.myName.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TextView tv = (TextView)v; Toast.makeText(mContext,tv.getText(),Toast.LENGTH_SHORT).show(); } }); viewHolder.Pic.setImageResource(R.drawable.phone); } //mContext.getDrawable(country.getImageResourceId(mContext))

19. Looking like

20. Addition info RecyclerView – addOnItemTouchListener(RecyclerView.OnItemTo uchListener listener) addOnItemTouchListenerRecyclerView.OnItemTo uchListener Add an RecyclerView.OnItemTouchListener to intercept touch events before they are dispatched to child views or this view's standard scrolling behavior.RecyclerView.OnItemTouchListener Demos: – RecyclerViewDemo is the code should here – RecyclerViewDemo2 uses the phonelist from the listview examples.

21. Last example Using an extended height toolbar, like googles example. – See TallToolbarDemo example. In the toolbar set android:layout_height="112dp" and now you have a taller toolbar. (128dp on tablet) Google’s example:

22. Last example (2) talltoolbarDemo version: Remember the buttons are just menu items

23. References https://developer.android.com/training/material/theme.html https://chris.banes.me/2014/10/17/appcompat-v21/ http://stackoverflow.com/questions/26491689/how-do-i-declare- an-extended-height-toolbar-action-bar-on-android-lollipop http://stackoverflow.com/questions/26491689/how-do-i-declare- an-extended-height-toolbar-action-bar-on-android-lollipop http://blog.xamarin.com/android-tips-hello-toolbar-goodbye- action-bar/ http://blog.xamarin.com/android-tips-hello-toolbar-goodbye- action-bar/ https://github.com/shamanland/floating-action-button http://stackoverflow.com/questions/24459352/how-can-i-add-the- new-floating-action-button-between-two-widgets-layouts http://stackoverflow.com/questions/24459352/how-can-i-add-the- new-floating-action-button-between-two-widgets-layouts http://treyrobinson.net/blog/android-l-tutorials-part-3- recyclerview-and-cardview/ http://treyrobinson.net/blog/android-l-tutorials-part-3- recyclerview-and-cardview/ https://developer.android.com/training/material/lists-cards.html

24. Q A &