1. Review 2: Material Design and key widgets.
Cosc 4735
Review 2:
Material Design
and key widgets.

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.

3. Theme and Colors.
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.
or maybe helpful in picking colors.
Note, only ColorPrimary, colorPrimaryDark, and colorAccent are back supported.

4. Example
android 4.4 .x android 5.0.x

5. Theme and Colors (2) values/styles.xml values-v21/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 <item <item </resources>
<resources> <style name="AppTheme" parent="AppTheme.Base"> <!-- Customize your theme here. --> <item <item <item <item <item <item <item </style> </resources>

6. Theme and Colors (3) Values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- a good place to try different colors is
Also googles:
<! color -->
<color name="primaryColor">#3f51b5</color>
<! 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>

7. Key Widgets Toolbar DrawLayout NavigationView Floating Action Button
Provides
a main content area
Nav drawer
NavigationView
Floating Action Button

8. Toolbar and FAB
In the default template, a toolbar and FAB is provided for you.
Remember, the Toolbar holds menus, buttons, and the “open button” for the drawlayout.
See Navigation lecture in cosc 4730 for a lot more detail.
The Floating Action Button is exampled in the support Design library lecture (in cosc 4730) along with snackbars and the coordinatorlayout as well.

9. DrawLayout and Navigation Drawer
The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen.
This is where we would put options to change the content showing, change to another fragment or change the data.
Go to the settings/preference screen, or an about screen
Log in/out.
Any number of options as long as they can be shown as a “list” of some kind.
It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the toolbar (or action bar).

10. The DrawLayout The xml shown below, the drawerlayout takes two items
Where it could be a widget or layout (which takes more widgets)
And this is in the activity.
<android.support.v4.widget.DrawerLayout …>
<!– main content, shown when draw is closed -->
<!– the navigation drawer-->
</android.support.v4.widget.DrawerLayout>

11. The DrawLayout (2) Main Content is likely a layout or framelayout
Different data or a place for one (or more) fragments.
The navigation drawer is likely a listview, recycler view, Support.NavigationView, or even another fragment.
A listview and recyclerview are pretty standard methods to display a list of items.
It’s clickable and the actions come the activity via a click. May need a callback/listener for the recyclerview
A fragment will need a callback/listener to tell the activity to change the main content.

12. The DrawLayout (3)
The support NavigationView is newer and is to make coding easier.
It takes a drawer header layout
And a xml menu file for the list
When a user clicks on a item, it can be handled similar to menus

13. See the navigation and support design lecture for more depth and example code.

14. Q A
&