Entering the age of Material Design and the age of materialdesign

Entering the age of Material Design and the age of materialdesign

This document references a large number of official documents, image resources, andOpen-source communityLib and related image resources. Therefore, you must indicate the source when reprinting. If you use resources, please indicate the source of the resources, respect copyright, and respect others' labor achievements. Thank you!

Material Design

Official Material Design documents:Http://www.google.com/design/spec/material-design/introduction.html

Material Design is the main feature of the Android 5.0 system and will become a Design standard in the future. With the release of Nexus 6 that supports Android 5.0 Lollipop, google wants developers to support Material Design more quickly and sends three articles consecutively to help developers implement Material Design in their own apps. It indicates that objective CT Winter 2014 to be a big quarter for design on Android.

Google Apps of Material Design that have been used currently include Google Play and Inbox (pretty cool. You can apply for Invite. Of course, you can also activate it through friends who have already obtained Invite ), obviously, Material Design is an inevitable trend. More and more applications on Google Play are beginning to support Material Design. Therefore, I feel that writing such an article can't wait.

There are three articles on Material Design in the official Blog:

AppCompat v21-Material Design for Pre-Lollipop Devices! Implementing material design in your Android appMaterial Design on Android Checklist

Because the first article was translated when it was just launched: AppCompat V21: compatible with Materia Design to devices before 5.0. Now we will introduce the last two articles, the last two articles mainly introduce the Design standards that a standard Material Design App should follow from the overall Design. They also show you how to implement it in your code and how to forward compatibility. In fact, the last two articles are similar in the overall structure, but in Implementing material design in your Android app, they focus on the Design standards of Material design, material Design on Android Checklist focuses on implementation details and precautions,The highlighted part is:Signature element, which is implemented in InCode.

Despite careful consideration and wording of each article, I still feel that some professional words in design are not very well expressed. If you have better suggestions for article Translation, please submit them. In addition to translation, this article also involves collecting resources about Material Design and some open-source libraries about Material Design on GitHub, it allows you to apply Material Design in your own apps faster and better. Not much nonsense.

Implement Material Design in your App

Material design is a comprehensive design that achieves visualization, interactivity, animation and multi-screen adaptation. Android 5.0 Lollipop and updated support libraries will help you build the Material UI. Here we provide some APIs and widgets to help you implement MaterialDesign.

I. Appearance of Tangible Surfaces

The UI consists of digital ink and paper. The surface layer and its shadow provide visual effects for applications. You can touch and observe his movements. This digital design has the ability to move, expand, or switch, helping you create a flexible UI.

1.1 Shadows

The position and depth of the surface cause slight changes in brightness and shadow. The new elevation attribute allows you to specify the View position on the Z axis. Then, the Framework adds real-time dynamic shadows to the items at the bottom of the View. You can explicitly set the height of the layout in the unit of dp.

<ImageView …    android:elevation="8dp" />

You can also set it in the Code through getElevation ()/setElevation. The shadow is added to the profile. By default, it is from the background. For example, you can set a circular drawable as the background of the floating action button. It is automatically converted to the appropriate shadow. If you need your fingers to control the shadow of a View, you can set a ViewOutlineProvider that allows you to provide a custom Outline in getOutline.

1.2 Cards

Cards is a common mode for creating fragments with different information. The CardView in supportV7 can help you conveniently implement and provide outlines and shadows.

<android.support.v7.widget.CardView    android:layout_width="match_parent"    android:layout_height="wrap_content">    <!-- Your card content --></android.support.v7.widget.CardView>

CardView inherits from FrameLayout and provides default elevation and rounded corners, so that cards remains consistent across different platforms. You can also use the cardElevation and cardCornerRadius attributes to customize their values. Note that Cards is not the only way to achieve the effect of a dimension, you should be alert to excessive use of Cards: http://www.google.com/design/spec/components/cards.html#cards-usage

Ii. Print-like Design Print Style

Material uses the classic print design to make the layout of the front and center of the content neat and simple. Deliberately bold color selection, deliberate white space, beautiful printing style and strong grid lines create a layered and meaningful focus effect for you.

2.1 Typography
The Roboto style is updated in Android 5.0. No matter how big the text is, it will be beautiful and concise. A new medium-height attribute (android: fontFamily = "sans-serif-medium") and a new AppAppearance style are added to balance the content density and reading comfort, the recommended print-type scaling is achieved. For example, you can simply set the "Title" style through android: textAppearance = "@ android: style/TextAppearance. Material. Title. In the old version, you can use the style of AppCompat support library: "@ style/TextAppearance. AppCompat. Title ".

2.2 Color
The palette brings brand marketing and personalization to your applications. You can easily control the coloring of the UI through the following attributes:

Main Tone Color: The main tone color is used for brand promotion. The latest job title and other edge effects as the background color of the action bar.
Emphasize color: The main adjustment color is obviously expanded. Control Applied to the framework. For example, EditText, Switch
The dark color of the main tone: Darker is used as the deepening of the Main Tone Color and is applied to the status bar of the status bar.

For more information about color attributes, see colorControlNormal. colorControlActivated. colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor and navigationBarColor.
AppCompat provides a large number of subsets for the above functions, allowing you to control colors for the system before Lollipop.

2.3 Dynamic color Dynamic colors

Material Design encourages the use of dynamic colors, especially when you have a wealth of iamge. The new Palette support library supports extracting a small part of the color from the image to design your UI. Creates a more realistic experience. You can also add a combination of dynamic and static effects, such as text color changes in the front, as follows:

Iii. Real dynamic effects of Authentic Motion

The shape of the surface should not be like the jump switch in the movie. Their movement should help guide the user's focus, establish the control relationship and maintain consistency. Meterial responds to the Touch event to confirm your interaction, and all the changes will radiate from your Touch point. All sports are meaningful and friendly, helping users better understand them.

3.1 Activity + Fragment switchover
By declaring "shared elements", you can create a smooth switchover between the two States,
Album_grid.xml

…    <ImageView…android:transitionName="@string/transition_album_cover" />

Album_details.xml

…    <ImageView…android:transitionName="@string/transition_album_cover" />

AlbumActivity. java

Intent intent = new Intent();String transitionName = getString(R.string.transition_album_cover);…ActivityOptionsCompat options =ActivityOptionsCompat.makeSceneTransitionAnimation(activity,    albumCoverImageView,   // The view which starts the transition    transitionName    // The transitionName of the view we’re transitioning to    );ActivityCompat.startActivity(activity, intent, options.toBundle());

Here we define the same transitionName between two different screens. When you start a new Activity, its switching will automatically become animated. You can freely orchestrate the elements of entry and exit.

3.2 Ripples)

Materials responds to user touch events in a ripple manner. You can use or inherit Theme. Material themes to achieve this default effect. You can add this ripple effect to your drawables through simple encapsulation. The custom View should use the View # drawableHotspotChanged callback method to spread the touch Location to their drawables so that ripple can know the starting point.

<ripple    xmlns:android="http://schemas.android.com/apk/res/android"    android:color="@color/accent_dark">   <item><shape    android:shape="oval">    <solid android:color="?android:colorAccent" /></shape>    </item></ripple>

3.3 StateListAnimator

Materials also responds to the user's finger lifting operation. Similar to magnet attraction. You can use the tranlationZ attribute. It is similar to the elevation attribute, but mainly used for short and transient effects, such as Z = elevation + translationZ. This new stateListAnimator attribute allows you to simply animation on translationZ when you touch the user. By default, the button has this effect.

Layout/your_layout.xml

<ImageButton …    android:stateListAnimator="@anim/raise" />anim/raise.xml<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_pressed="true"><objectAnimator    android:duration="@android:integer/config_shortAnimTime"    android:propertyName="translationZ"    android:valueTo="@dimen/touch_raise"    android:valueType="floatType" />    </item>    <item><objectAnimator    android:duration="@android:integer/config_shortAnimTime"    android:propertyName="translationZ"    android:valueTo="0dp"    android:valueType="floatType" />    </item></selector>

3.4 Reveal
A sign in the material transition effect is to display new content by extending a circular panel. Enhances the touch point that serves as the starting point for all conversions. It spreads out quickly. You can use the following Animator to achieve this:

Animator reveal = ViewAnimationUtils.createCircularReveal(    viewToReveal, // The new View to reveal    centerX,      // x co-ordinate to start the mask from    centerY,      // y co-ordinate to start the mask from    startRadius,  // radius of the starting mask    endRadius);   // radius of the final maskreveal.start();

3.4 Interpolators Interpolation

Exercise should be careful, smooth, and accurate. Instead of simply getting in and out. In Material Design, objects tend to start quickly and comfortably. The following example shows that it takes less time to reach the end point. In general, users will not wait for a long time, and the negative effects of sports will be minimized. There is a new interpolation tool that can achieve this effect https://developer.android.com/reference/android/R.interpolator.html? Utm_campaign = L-Developer-launch # fast_out_slow_in

For the display and exit effects, see linear-out-slow-in and fast-out-linear-in interpolators respectively.
4. Adaptive Design (and UI Patterns)

The final core concept of material is to create a design adaptive to devices of different sizes, from watches to TVs. The adaptive design technology helps us implement different devices, but the same underlying system is reflected in different views. Each View is customized for that device. The relative relationships between colors, images, layers, and spaces remain unchanged. The material design system provides convenient components and modes to help you build a scalable design.

Toolbar

Similar to Actionbar, but more convenient, unlike the standard Action bar, toolBar is like anything in the View level. Therefore, you can place it anywhere, staggered with other views, move, and respond to sliding events. You can use the ToolBar as the ActionBar of your Activity by calling Activity and setActionBar.

In this example, the blue toolbar is an extensible height that covers the content of the screen and provides navigation buttons. Note: In this list and details, more than two toolbars are used.

Material Design provides understandable, beautiful, and realistic animation and adaptive capabilities for your applications. We hope that you can follow these Design principles and use the new API and compatible libraries provided above to help your App implement Material Design.

Certificate ----------------------------------------------------------------------------------------------------------------------------------------

Article 2:Material Design Check List

It mainly reminds you how to better implement Material Design, Mark Signature element as the emphasizing part, and Mark InCode as the implementation method.

Because users will soon use the Android system and will gradually get used to Material Design apps, such as inbox, a future replacement for Gmail, and Google Play Tumblr, therefore, Google has released three articles for developers to support Material Design apps and Android 5.0 more quickly. In the following article, Google provides us with a form that lists some styles that Material Design should have. When implementing Material Design, you can refer to the following form. The entire form is divided into four parts based on four key aspects of Material Design. The following describes the content of the entire form. If you use the following modules, especially the elements labeled as signature elements, and follow the traditional Android Design best practices, you have moved towards the charming Material Design.

Visible appearance

The UI is composed of different layers of surfaces with shadows attached to each layer.

Signature element: Shadow
Shadow is used to interact with elements in the front to help focus and establish hierarchical effects.

In Code: In the 5.0 system, such shadow effects are directly provided by attributes: android: elevation and android: translationZ. In earlier versions, shadows are usually implemented by PNG image resources.

Surfaces and layering.

Shadows and surfaces are used in coherent and structured scenarios. Each shadow marks a new surface layer, which requires careful and careful consideration. A screen usually has 2 to 10 surfaces, avoiding too many embedded layers. Slidable content slides to the boundary of the screen or the back of another surface layer, casting a shadow that covers the other surface layer. Never crop a visible boundary element. This will lead to a feeling of no boundary. In other words, you should slide the entire surface rather than the content on the surface.

In Code: when using ListView and ScrollView, use android: clipToPadding = false to avoid border pruning.

The surface layer should be simple and solid background.

A Bold, Print-Like Aesthetic is A Bold, Print-style Aesthetic


The content you are presenting comes from a classic print mode, focusing on color usage, contextual images, and structural blank areas.

Primary and accent colors.

Signature element: Main Color and emphasis color
On the color layer background and key components, a dominant color and an stressed color are used, such as text and checkbox. This emphasis color is in stark contrast with the tone color. For example, an app can use a dark blue color as the tone color and a neon color as the highlighted color.

This emphasis is very clear and usually used on key components to attract users' attention, such as a floating button, selected tab, or table area.

In code: Set the android: colorPrimary and android: col1_cent attributes In your topic (if appCompat is used, you do not need to set the "android" prefix ), appCompat will automatically color those text, checkbox and some components before L.

Signature element: transparent Status Bar
On the 5.0 system, the status bar is filled with the tone matching the app or the color of the content on the current screen. The status bar can be transparent for full-screen Image filling.
You can set android: colorPrimaryDark or android: statusBarColor in your topic or call Window. setStatusBarColor.

The surface of icons/photos/images and other front elements will be colored with "ink. They do not need shadows or gradient effects.

The color can be extracted from the image to adapt to the UI elements on the surface.
InCode: implemented through the Palette support library.

Signature element: Use the icon of material design

For icons, follow the system icon guidelines. For standard icons, use the icon of material design (this is already open-source in GitHub)

Wizard: http://www.google.com/design/spec/style/icons.html#icons-system-icons
Http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components Resources

Photos are usually immersive and full screen. For example, you can use an edge-to-edge mode on the details page, or even appear at the bottom of the app bar or status bar.
In code: the new Toolbar widget can be transparent and placed directly In your layout. For details about the status bar, refer to the related issues on Stack Overflow:
Http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880

Signature element: proper size

The text content, app titles, should be aligned with three keylines:

Http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-keylines-and-spacing

On mobile phones, the keylines are 16dp and 72dp on the left, and 16dp on the right edge of the screen. 24dp and 80dp are available on the tablet.

The alignment mode and size of the UI elements should be based on an 8dp mesh. For example, the app bar is 56dp on the mobile phone and 64dp on the tablet. Padding and Margins can use values such as 8dp, 16dp, and 24dp. A more precise text position is a 4dp grid.

Keylines

Real dynamic effects of Authentic Motion

In different app contexts and statuses, animation provides a visual and consistent experience. Small-scale switching animations can be used to increase interest. It is not intended for dynamic effects. In general, the UI and content elements will not simply disappear or appear, and they will be moved into a unit or appear separately as an animation.

Signature element: "hero"SwitchAnimation

When you press the next entry to view details. Here is a switching animation called hero, which moves and scales the entry between its location and the detail screen.
InCode: In the SDK, it is called "shared element transitions". support version FragmentTransaction also supports shared element support.

"Hero" Transiton

Signature element: Ripple effects
Ripple effects adds feedback for the following items.
InCode: Default android: selectableItemBackground and android: selectableItemBackgroundBorderless have this effect, or you can use RippleDrawable (<ripple>) to customize the effect. Ripples does not have this expected effect on devices earlier than 5.0. Therefore, the default android: selectableItemBackground behavior is observed.

Signature element: circular "reveal" animation.
The UI element can appear through a circular "reveal" animation.
InCode: view the document or ViewAnimationUtils class.

Signature element: Vector animation icon
Use animations in more subtle and pleasing situations, such as converting the icon state and text state. For example, a "+" icon can be transformed into an "x" icon, or an overview icon can be converted into a fence effect.
InCode: icon changes can be implemented through AnimatedStateListDrawable and the corresponding XML file. You can find the changes in Google I/O app source code. It supports the vector icon of the animation.

Animation and switching are usually within Ms.

Cross fade-in and fade-out are usually replaced by translation and slide switching: vertical sliding produces the bottom navigation and horizontal sliding produces the side navigation. For sliding conversion, acceleration and small deceleration are better than simple linear moving.
See http://www.google.com/design/spec/animation/authentic-motion.html #


Adaptive Design (UI Patterns)

The stylish appearance, bold graphic design, and meaningful animated effects provide a consistent cross-device experience, whether on mobile phones, tablets, laptops, TVs, and wearable devices, cars have the same experience. In addition, the following key UI design patterns help to establish a consistent experience between different devices.

The app uses a responsive design that ensures proper layout on screens of different sizes and in different directions. You can refer to the tablet App style list to optimize those for the tablet App. http://developer.android.com/distribute/essentials/quality/tablets.html

In material design, the details page is usually "Hero" animated. In the multi-panel layout, the app can use multiple toobar to replace some next operations.

Signature element: FAB

If appropriate, the App recommends floating action button as a key operation on the screen. FAB is a circular appearance with shadow. The surface color is bright and highlighted. It can be used to perform some major operations, such as sending, writing, creating, adding, or searching, about 8dp elevation. It is usually suspended in the lower right corner of the screen or in the center of the border.

The floating action button

App Bar

Signature element:
The App uses the standard Android App bar, which does not use the App icon. Color and printing effect have replaced the brand promotion. This App Bar has a shadow or a shadow surface. Generally, the App Bar is 4dp elevation.
InCode: use the new ToolBar Widget in 5.0 to introduce it to the View level View. AppCompat provides compatible android. support. v7.widget. Toolbar to implement it.

The app bar may be two to three times the standard height. When sliding, the app bar can be restored to the normal height.

In some cases, app bar can be completely transparent, and text and operations can be attached to an image, such as Google Play Newsstand. Http://www.google.com/design/spec/style/imagery.html#imagery-principles


The App bar title should be aligned with the second keyline.
InCode: When Toobar widge is used, use the android: contentInsetStart attribute.

When appropriate, the app bar can slide out of the screen to leave more vertical spaces for the content. When sliding up, the app bar can be restored. (This style: quickReturn)

Tabs

Signature element:Tabs should follow the latest material design style. There is no split line in the vertical direction. If the app uses top-level, the tab can be part of the app bar. Http://www.google.com/design/spec/components/tabs.html#tabs-usage

InCode: You can refer to the sample SlidingTabsBasic In the SDK or Google I/O app source (My Schedule Section) and the SlidingTabStrip shared two days ago.

Tabs should support gesture slide
InCode: all Tabs should use the ViewPager control in support lib.

When selecting Tabs, there should be a front color change or use a color bar that emphasizes the color. When tabs slides, the line should respond smoothly.

Drawer navigation

Signature element:

If your app uses the navigation Drawer, it should also follow the latest material design style. Drawer should appear on the app bar, and should also appear behind the status bar in a translucent manner.
InCode: Use the DrawerLayout control in support lib and the ToolBar Control mentioned above to achieve the drawer effect. For details about stack over flow, refer:
Http://stackoverflow.com/questions/26440879/how-do-i-use-drawerlayout-to-display-over-the-actionbar-toolbar-and-under-the-st/26440880

Signature element: icon in the upper left corner

The icon on the far left of the app bar is a drawer indicator. Http://www.google.com/design/spec/layout/structure.html#structure-app-bar

The app icon is invisible in the app bar. Optional. in earlier versions, if an app has a drawer, the leftmost app icon will be retained and narrow, for example, in 4.0.
Standard drawer: do not extend to 320dp on the mobile phone, or DP on the tablet, but not smaller than the screen width-Standard toolbar height, for example in Nexus5: 360dp-56dp = 304dp
Each drawer entry should be placed along the grid, with all rows at a height of 48dp and up and down with an 8dp margin.

Text and icon should follow the main line

More and more apps from the google play ecosystem will be updated to Material Design. It is expected that 2014 Winter will be a major change period for Android Design.