Cosc 5/4730

Material DesignSpec’s and Toolbar.

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-des

ign/introduction.html#

Theme and Colors.• http://

www.google.com/design/spec/style/color.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.Note, only ColorPrimary, colorPrimaryDark, and colorAccent are back

supported.

Example

android 4.4.x android 5.0.x

Theme and Colors (2)

values/styles.xml<resources> <!-- Base application theme. --> <style name="AppTheme" parent="AppTheme.Base"> </style><!– customizations for 4.4.X and before <style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary"> @color/primaryColor</item> <item name="colorPrimaryDark"> @color/primaryColorDark</item> <item name="colorAccent"> @color/accentColor</item></style>

</resources>

values-v21/styles.xml<resources><style name="AppTheme" parent="AppTheme.Base"> <!-- Customize your theme here. --><item name="android:colorPrimary"> @color/primaryColor</item> <item name="android:colorPrimaryDark"> @color/primaryColorDark</item> <item name="android:colorAccent"> @color/accentColor</item> <item name="android:textColorPrimary"> @color/textColor</item> <item name="android:textColorSecondary"> @color/textColorSecondary</item> <item name="android:navigationBarColor"> @color/navigationBarColor</item> <item name="android:windowBackground"> @color/windowBackgroundColor</item> </style></resources>

Theme and Colors (3)• Values/colors.xml<?xml version="1.0" encoding="utf-8"?><resources> <!-- a good place to try different colors is http://www.materialpalette.com/ Also googles: http://www.google.com/design/spec/style/color.html--> <!-- 500 color --> <color name="primaryColor">#3f51b5</color> <!-- 700 color --> <color name="primaryColorDark">#303f9f</color> <!-- A200 other color --> <color name="accentColor">#ff4081</color>

<color name="primaryColorLight">#C5CAE9</color> <color name="textColor">#FFFFFF</color> <color name="textColorPrimary">#212121</color> <color name="textColorSecondary">#727272</color> <color name="windowBackgroundColor">#607d8b</color> <color name="navigationBarColor">#303f9f</color> </resources>

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.

• <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">

– OR• <style name="AppTheme.Base"

parent="Theme.AppCompat.NoActionBar"> For the dark theme.

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.</android.support.v7.widget.Toolbar>

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.

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”.

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:

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.

– ActionBar ToolBar

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.+'

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);

Recyclerview.Adapter• The recyclerview uses a viewHolderpublic class myAdapter extends RecyclerView.Adapter<myAdapter.ViewHolder>{

– 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<String> myList; private int rowLayout; private Context mContext;

public myAdapter(List<String> 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(); }

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); } }

My_row.xml and cardView<?xml version="1.0" encoding="utf-8"?><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" />

</RelativeLayout></android.support.v7.widget.CardView>

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))

Looking like

Addition info

• RecyclerView– addOnItemTouchListener(

RecyclerView.OnItemTouchListener listener) • Add an RecyclerView.OnItemTouchListener to intercept

touch events before they are dispatched to child views or this view's standard scrolling behavior.

• Demos:– RecyclerViewDemo is the code should here– RecyclerViewDemo2 uses the phonelist from the

listview examples.

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:

Last example (2)

• talltoolbarDemo version:

• Remember the buttons are just menu items

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://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://treyrobinson.net/blog/android-l-tutorials-part-3-recyclerview-and-cardview/

• https://developer.android.com/training/material/lists-cards.html

QA&