Translation -material design for materials in the Android 5.0 application

In the morning in the brush Google +, saw Abraham Williams forwarded a strong article, is a new Android Developers website blog-implementing Material Design in your Android App. Feel very avant-garde, for the new release of Android version number Android 5.0 is a good learning and understanding of the opportunity, so it took some time to translate it down, hoping for themselves, to others to inspire.

Because the translation of Android development blog and API is only a hobby, the level of limited, which inevitably have inaccurate places, so the original address is also affixed to, not clear where, you can view the original text.

Http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html?m=1, unfortunately, to view this article, you have to FQ.

OK, here are the details of the translation:

For the multi-screen world, material design is a comprehensive approach for visualizing, interacting, and Material design. Android 5.0 Lollipop and updated support packs can help you create a material UI. Here is a brief introduction to some of the main elements of material design, APIs, and controls that can be implemented in an application.

the physical surface

In material design, the UI is composed of digital "paper & Ink" fragments. Surface and its projected shadows provide visible hints for the structure of the application, the interface that can be touched, and the perceived movement. Material design allows you to create flexible UIs by moving, expanding, and reorganizing.

Shadows

The position and depth of surface causes slight changes in light and shadows. The new elevation property allows you to precisely set the position of the view on the z axis, so that the framework casts a real-time, dynamic shadow over the children behind the view. You can declare set elevation in the layout in dip units:

1 <ImageView ... 2 3     android:elevation= "8DP"/>

View Code

It can also be set by Code getelevation ()/setelevation () (there are similar implementations in Viewcompat). The shadow cast by the view is determined by its outline, and the outline is derived from the background of the view by default. For example, set the background of the FAB (floating action button) to a circular drawable, and then the fab casts the appropriate shadow. If you want finer control over the shadow of the view, you can set Viewoutlineprovider, which can customize the outline inside the Getoutline ().

Card

Cards are a common pattern used to create surface that holds clear pieces of information. The new CardView support package allows you to create cardview more casually (with the same effect on previous platforms) by providing outlines and shadows.

1 <android.support.v7.widget.CardView2     android:layout_width= "Match_parent" 3     android:layout_height= "Wrap_content" >4     <!--Your Card Content--5  6 </android.support.v7.widget.CardView>

View Code

The CardView is extended from Framelayout and provides default elevation and fillet radii so that the cards have a consistent look on different platforms. It can be set by the Cardelevation and Cardcornerradius properties, if needed. Remember, cards are not the only way to implement dimensions, you should beware of the UI over-card!

class print Design

The material uses classic rules derived from the print design to create a clean, simple layout to place content in front or center. Bold balances color selection, intentional spaces, elegant typography, and strong bottom-line squares, creating layered, meaningful, and focused effects.

Typesetting

Android 5.0 updated the system font Roboto to visually and clearly display text in a way that ignores font size limits. New medium weights have been added (android:fontfamily= "Sans-serif-medium"), and the new text façade style implements the widely recommended typographic scale to balance the density of content and the comfort of reading. For example, you can use the Title style by setting "Android:textappearance= ' @android: Style/textappearance.material.title '". These styles may be used on older versions through the APPCOMPAT support package, such as "@style/textappearance.appcompat.title".

Color

The Applied palette brings imprinting and personality to the app, so that we can color the UI controls with the following topic properties.

• Colorprimary: The primary blot color of the application, the background color used for Actionbar, the title of the recent task, and the edge effect.
• Vivid additions to the coloraccent:colorprimary. For control of frameworks such as Edittex and switch.
• A darker color supplement to the colorprimarydartk:colorprimary. Used for the status bar.

More properties give color control finer grained control, such as: Colorcontrolnormal, colorcontrolactivated, Colorcontrolhighlight, Colorbuttonnormal, Colorswitchthumbnormal, Coloredgeeffect, Statusbarcolor and Navigationbarcolor.

AppCompat provides a larger subset of the above features, allowing you to implement color control on previous versions of Lollipop.

Dynamic Color

Http://4.bp.blogspot.com/-qX9XNcFEQlQ/VEngSGP2ZyI/AAAAAAAAA6E/PbORZ-3ex-Y/s1600/palette2.gif

Material design encourages the dynamic use of colors, especially when you have a lot of pictures to deal with. The New palette support package allows you to get a color set from the picture to the UI control style to match to create the immersive experience. The extracted color version will contain strong and gentle tones, just like the foreground text color (forground text colour) for optimal readability. For example:

1 Palette.generateasync (Bitmap,2         NewPalette.paletteasynclistener () {3 @Override4      Public voidongenerated (Palette Palette) {5Palette.swatch vibrant =6 Palette.getvibrantswatch ();7           if(Swatch! =NULL) {8               //If We have a vibrant color9               //Update the title TextViewTen Titleview.setbackgroundcolor ( One Vibrant.getrgb ()); A Titleview.settextcolor ( - Vibrant.gettitletextcolor ()); -           } the     } -});

View Code

Trusted Actions

Tangible surface is like a jump cut in a movie. They move to places where they can help focus, establish spatial connections and maintain continuity. The material responds to the touch to confirm the interaction and the outward change of the waveform emitted by the contact. All actions are meaningful and cordial to assist the user's understanding.

Activity+fragment transition Effects

By declaring a common "shared element" across two screens, you can create a smooth transition effect between two states.

Http://1.bp.blogspot.com/-Vv4SxVSI2DY/VEqQxAf3PWI/AAAAAAAAA7c/mfq7XBrIGgo/s1600/activity_transitions%2B (1). gif

Album_grid.xml:

1 <ImageView2         ... 3         Android:transitionname= "@string/transition_album_cover"/>

View Code

Album_details.xml

1 <ImageView2         ... 3         Android:transitionname= "@string/transition_album_cover"/>

View Code

Albumactivity.java:

1Intent Intent =NewIntent ();2String Transitionname =getString (r.string.transition_album_cover);3 ... ..4Activityoptionscompat options =5 activityoptionscompat.makescenetransitionanimation (activity,6Albumcoverimageview,//The view which starts the transition7Transitionname//The transitionname of the view we ' re transitioning to8     );9Activitycompat.startactivity (activity, Intent, options.tobundle ());

View Code

The same transitionname is defined in the two screens. This conversion effect is automatically given to life when a new activity is launched. In addition to sharing elements, it is now possible to carefully design entry and exit elements (conversion effects).

Corrugated

Http://3.bp.blogspot.com/-6UtZxpuhI-Q/VEqCMq6q17I/AAAAAAAAA68/oVt3vMIwJs0/s1600/ Animation-responsiveinteraction-inkreactions-notouchripplepressandrelease_large_xhdpi.gif

The material is designed to respond to user touch events through ink surface response. Take button For example, when you use or inherit theme.material (Android:selectableitembackground), the interaction control shows this behavior by default. By simply wrapping the drawable element in the ripple element, you can add this feedback to your own defined drawable:

1 <ripple  2     xmlns:android= "Http://schemas.android.com/apk/res/android" 3      android:color= "@color/accent_dark" > 4     <item> 5         <shape 6             Android:shape= "Oval" > 7             <solid android:color= "? android:coloraccent"/> 8         </shape> 9     </item> </ripple>

View Code

The custom view should extend the touch positioning until the drawable inside the callback view#drawablehotspotchanged, so that the ripple can start from the touch point.

Statelistanimator

Material design can also respond to touch events by "rising" to touch the finger, just like the magnet's attraction. You can also achieve this effect by animating the Translationz property, where the Translationz property is similar to the Elevation property but is intended for transient, and the other is Z=elevation + Translationz. The new Statelistanimator property allows you to easily animate the Translationz above the touch (the button defaults to this effect):

Layout/yout_layout.xml:

1 <ImageButton ... 2     Android:statelistanimator= "@anim/raise"/>

View Code

Anim/raise.xml:

1<selector xmlns:android= "Http://schemas.android.com/apk/res/android" >2<item android:state_enabled= "true" android:state_pressed= "true" >3<Objectanimator4Android:duration= "@android: Integer/config_shortanimtime"5Android:propertyname= "Translationz"6android:valueto= "@dimen/touch_raise"7Android:valuetype= "Floattype"/>8</item>9<item>Ten<Objectanimator OneAndroid:duration= "@android: Integer/config_shortanimtime" AAndroid:propertyname= "Translationz" -Android:valueto= "0DP" -Android:valuetype= "Floattype"/> the</item> -</selector>

View Code

Reveal

A typical material conversion effect for presenting new content is achieved with an extended round matte. By expanding the radar effect, reveal assists in enhancing the user's touch points as the starting point for all conversion effects. This effect can be achieved through the following animator:

1Animator reveal =Viewanimationutils.createcircularreveal (2Viewtoreveal,//The new View to reveal3CenterX,//x co-ordinate to start the mask from4CenterY,//y co-ordinate to start the mask from5Startradius,//radius of the starting mask6Endradius);//radius of the final mask7Reveal.start ();

View Code

Interpolators

The action should be prudent, swift and precise. Unlike typical "easy-to-enter" conversion effects, objects often start quickly in material design and then slowly reach their final position. During the animation, the object spends more time near the final position. Ultimately, the user does not have to wait for the animation to end, thereby minimizing the negative effects of the action. The new "Fast Forward slow out" interpolator has been added to implement this action.

Http://3.bp.blogspot.com/-h1tGDao-XK4/VEqCGLnpyQI/AAAAAAAAA60/LE4NO1X_gzk/s1600/ Animation-authentic-motion-authenticmotion_massandweight_ex1_large_xhdpi.gif

For the entry screen of the element, see the "line out slow in" and "fast outgoing" interpolator respectively.

Adaptable Design

The ultimate core concept of material design is the creation of an adaptive design that can be adapted to the size of the shape, from the watch to the giant TV. Adaptive design technology has helped us achieve this vision: each device presents a different view under the same underlying system. Each view is tailored to each size, and every interaction is just right for every device. Colors, images, view hierarchies, and spatial relationships remain constant. The material Design system provides flexible components and patterns to help you build a scalable design.

Tool Strip (Toolbar)

Toolbar is a generalization of the action bar pattern, providing similar functionality, but more flexible. Unlike the standard action Bar,toolbar in the view hierarchy is just a view, and the other is no different, so you can put it anywhere you like, and other views cross layout, generate animation, respond to the sliding event waiting. by calling Activity.setactionbar (), you can make toolbar as active as the action bar in activity.

Http://1.bp.blogspot.com/-np39I5VrQTQ/VEnnefqkroI/AAAAAAAAA6c/--kVt_Wi1vk/s1600/contacts_toolbars.png

In this example, the Blue toolbar height is extended, affixed to the screen content, and provides a navigation button. Note: The additional two toolbar are used in the list and detail view.

Move forward and material design

Material design helps you build easy-to-understand, aesthetically pleasing, and adaptable applications that are filled with action. I hope this blog will inspire you to apply these rules to your app and indicate some new (compatibility) APIs to do that.

Translation -material design for materials in the Android 5.0 application