Styles, Themes, and Material Design

Transcription

1 Styles, Themes, and Material Design CS Dr. Oren Mishali Based on the Official Android Development Guide Outline Styles & Themes Material Design Lists Floating Action Button Cards To be continued

2 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:

3 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 Remember that a style may also be used as a theme

4 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

5 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+ res/values-v11 While a default light theme will be used for older versions: res/values

6 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.style class 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 Design An Introduction

7 Do you want your app to look that way? 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.

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

9 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. Cards are implemented using CardView widgets. Use card_view:cardelevation attribute for creating a card shadow See more details here

10 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:translationz android:elevation refers to the elevation s static component android:translationz refers to the dynamic components used for animations

11 Customizing view shadows The bounds of a view's background drawable determine 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

12 Lists 23 About lists Lists present multiple line items vertically as a single continuous element Lists are best suited for similar data types 24

13 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

14 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) rial/lists-cards.html 28

15 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 The following tutorial provides more details: Using-the-RecyclerView#using-therecyclerview 29 Floating Action Button 30

16 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

17 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

18 Implementing a FAB Get a basic understanding using the official training: ign-library.html#createfab Use these tutorials for more details (shorter) 35 Cards Official Training 36

19 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

20 Card content can vary greatly Don't overload cards with extraneous information or actions 39 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

21 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

22 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