Styles, Themes,and Material Design

CS 236503

Dr. Oren Mishali

Based on the Official Android Development Guide

Outline

• Styles & Themes

• Material Design• Lists

• Floating Action Button

• Cards

• To be continued…

What is a style in android?

• A collection of properties that specify the look and format for a view

• Can specify properties such as height, padding, font color, font size, background color, etc.

• Is defined in an XML resource that is separate from the XML that specifies the layout

Styles in Android are like CSS in web design

<p>This is a paragraph</p>

p {color: red;text-align: center;

}

An example for applying a style

• This is a text view before applying a style:

• And here it is afterwards:

What is a theme?

• A theme is a style applied to an entire Activity or application rather than an individual View

• When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports

• For example, you can apply the style CodeFont as a theme for an Activity and then all text inside that Activity will have green monospace font

AndroidManifest.xml – applying a style to the entire application

AndroidManifest.xml – applying a style to a specific activity

How to create styles?

• Create an XML file in res/values/

• Create a <resources> root element

• Create a <style> element, with <item> elements describing the properties of the style• Many <style> elements may be defined

• Each style element is converted into a resource object and can be referenced from an XML layout via @style

• Remember that a style may also be used as a theme

Style inheritance

• Use the parent attribute to inherit properties from built-in platform styles

• To inherit from you own defined style (e.g., from CodeFont), you may use this naming style instead:

What kind of style properties are available?

• See the Javadoc of the specific view for the list of supported XML attributes

• Note that basically all attributes may be defined in a style, for example:

Note: do not forget to prefix the attribute name with the android: namespace

Some of the properties are for theme only

• See the R.attr reference that lists all possible XML attributes

• Attributes that begin with ‘window’ are effective only when the style is applied as a theme, e.g.,• windowNoTitle, windowBackground

Note: when applying a style to a view, the view will apply only those properties that it supports and will ignore others

How to use newer themes while being backward compatible?• Define a custom theme that uses resource

selection based on platform version

• For example, this holographic theme will be used by applications running android 3.0+

• While a default light theme will be used for older versions:

res/values-v11

res/values

Using platform styles and themes

• Android platform provides a large collection of styles and themes that you can use

• All available styles can be found in R.styleclass

• To use those styles, replace each underscore with a period, e.g., Theme_NoTitleBar => "@android:style/Theme.NoTitleBar“

• To understand the properties of each provided style, see styles.xml, and themes.xml

For example, what properties are used to style Theme.Dialog?

Material DesignAn Introduction

http://developer.android.com/training/material/index.html

Do you want your app to look that way?

https://www.youtube.com/watch?v=Q8TXgCzxEnw

What is material design?

• “A comprehensive guide for visual, motion, and interaction design across platforms and devices”

• Detailed design guidelines are described in the material design specification

Note: using material design requires Android 5.0 (API level 21), however many features are supported on earlier versions.See Maintaining Compatibility.

How to apply material design to my app?

• Specify a style that inherits from android:Theme.Material

• Your layouts and widgets should conform to the material design guidelines, including• Specifying elevation for views

• Specialized widgets for lists and cards

• Customized animations

• Touch feedback

Material theme – easy color customization (1)

• Material design themes allow easy customization of the app’s color palette

• You should inherit from a base material theme and define colors that fit your brand, as follows:

Theme.Material (dark version)

Theme.Material.Light

See more material themes in R.style

Colors may be defined in values/colors.xml, e.g.,

<?xml version="1.0" encoding="utf-8"?><resources><color name="menu_background">#666666</color></resources>

Material theme – easy color customization (2)

• Note that the color of a variety of screen elements may be customized, even the status bar at the top

Cards

• “A card is a sheet of material that serves as an entry point to more detailed information. A card could contain a photo, text, and a link about a single subject.”

https://www.google.com/design/spec/components/cards.html#

• Cards are implemented using CardView widgets.

• Use card_view:cardElevationattribute for creating a card shadow

• See more details here

Lists

• Use the RecyclerView widget to create a complex list in your app

• The RecyclerView widget is a more advanced and flexible version of ListView• Flexible layout managers to position

elements within the list

• Animations for adding and removing items

• See more details here

Elevation and shadows

• Material design introduces elevation for UI elements

• The elevation of a view is represented by the Z property and determines the visual appearance of its shadow

• Elevation is also useful to create animations where widgets temporarily rise above the view plane when performing some action

Key attributes are android:elevation and android:translationZandroid:elevation refers to the elevation’s static componentandroid:translationZ refers to the dynamic components used for animations

Customizing view shadows

• The bounds of a view's background drawabledetermine the default shape of its shadow

- The view will have a shadow with rounded corners, since we specified a radius attribute

- Providing a custom outline overrides the default shape of a view's shadow

Defining custom animations

• The material theme provides some default animations for buttons and activity transitions

• Android 5.0 (API level 21) and above lets you customize these animations and create new ones such as• Touch feedback• Activity transitions• Reveal animations (show/hide)

• See this guide for more details and code examples

Listshttps://material.io/guidelines/components/lists.html

23

About lists

• Lists present multiple line items vertically as a single continuous element

• Lists are best suited for similar data types

24

List alternatives

• If more than three lines of text need to be shown in list, use cards instead

• If the primary distinguishing content consists of images, use a grid list

25

Gestures, filtering and sorting

• The swipe action of each tile should be consistent within lists

• Tiles may be moved between a list and drop target (similar to moving a file into a folder)

• List tiles can be sorted or filtered by date, file size, alphabetical order, or other parameters

26

List actions

• Primary actions fill the entire tile and are not represented solely by an individual icon or text button

• Supplemental actions are represented by icons, secondary text, etc., and are placed on the right

27

Implementing lists – the RecyclerView

• A new widget for implementing lists

• Replaces the previous ListView and GridView

• Working with a RecyclerView involves additional components such as RecyclerView.Adapter, LayoutManager, and ItemAnimator

• Official training (good for a basic overview) https://developer.android.com/training/material/lists-cards.html

28

Using the RecyclerView

1. Add RecyclerView support library to the gradle build file

2. Define a model class to use as the data source

3. Add a RecyclerView to your activity to display the items

4. Create a custom row layout XML file to visualize the item

5. Create a RecyclerView.Adapter and ViewHolder to render the item

6. Bind the adapter to the data source to populate the RecyclerView

29

The following tutorial provides more details:

https://guides.codepath.com/android/Using-the-RecyclerView#using-the-

recyclerview

Floating Action Buttonhttps://material.io/guidelines/components/buttons-floating-action-button.html

30

About FAB

• A floating action button represents the primary action in an application

• A floating action button is used for a promoted action

• Only one floating action button is recommended per screen to represent the most common action

31

When to add a FAB?

• Not every screen needs a floating action button

32

Make FAB positive actions

• Make floating action buttons positive actions like Create, Favorite, Share, Navigate, and Explore

• Avoid using floating action buttons for minor and destructive actions, including Archive or Trash, or Limited tasks like cutting text

33

Make the FAB circle

• Use the circle-shaped icon consistently to enforce the primary action pattern across apps

34

Implementing a FAB

• Get a basic understanding using the official training: https://developer.android.com/training/material/design-library.html#CreateFAB

• Use these tutorials for more details• http://www.androidhive.info/2015/12/android-material-

design-floating-action-button/ (shorter)

• https://guides.codepath.com/android/floating-action-buttons

35

Cardshttps://material.io/guidelines/components/cards.html#

Official Training

36

Cards

• A card is a sheet of material that serves as an entry point to more detailed information

• Cards may contain a photo, text, and a link about a single subject

• They may display content containing elements of varying size, such as photos with captions of variable length

• A card collection is a layout of cards on the same plane

37

When to use Cards

• As a collection, comprises multiple data types, such as images, movies, and text

• Does not require direct comparison (a user is not directly comparing images or text)

• Supports content of highly variable length, such as comments

• Contains interactive content, such as +1 buttons or comments

38

Card content can vary greatly

39

Don't overload cards with extraneous information or

actions

Gestures and filtering

• The swipe gesture may be used on a per-card basis

• The pick-up-and-move gesture may be used if it is important for the user to be able to sort cards within a collection

• Card collections can be programmatically sorted or filtered by date, file size, alphabetical order, or other parameters

40

Card actions

• The primary action in a card is typically the card itself

• Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card

• Limit supplemental actions to two actions, in addition to an overflow menu

41

UI controls

• UI controls, like a slider, placed inline with primary content can modify the view of the primary content

• For example, a slider to choose a day, stars to rate content, or a segmented button to select a date range

42

Overflow menu (optional)

• An overflow menu is typically placed in the upper-right corner of a card, but can be placed in the lower-right corner if doing so improves content layout and legibility

• Take care not to overload an overflow menu with too many actions

43

Do & Don’t

44