Create material Design-style Android apps-custom shadows and cropping views

Previously written by applying themes and using the ListView, CardView, applying the material design style, can be backwards compatible with the support library at the same time. Today to write the shadows and view clipping. cannot be backwards compatible. Please note that.

? Material Design introduces the element of depth to the user interface element. Depth helps users understand the important associations between elements and helps users focus on the tasks they have in hand.

The height of the view (elevation). Through the Z-property representation, it is determined by his shadow: a higher-Z view casts a larger shadow. Views are projected only on the z=0 plane, and they do not cast shadows on other views above and above the z=0 plane.

Views with higher Z-values block lower Z-values.

Anyway. Z-values do not affect the size of the view.

The height is also practical, when you run some actions, create animations to let the components rise.

Assign a height to a view

The z-value of a view has two components,elevation (height) and translation (panning). Elevation is a static part, translation for animation:

Z = elevation + Translationz

Shading of views of different heights

Set evelation in the layout file android:elevation and use the method in your code View.setElevation() .
Set the panning of a view using the View.settranslationz () method.

New method viewpropertyanimator.z () and viewpropertyanimator.translationz () allows you to change the height of the view more easily. A lot of other information, see Viewpropertyanimator API document http://developer.android.com/reference/android/view/ViewPropertyAnimator.html. and property Animation Development Guide: http://developer.android.com/guide/topics/graphics/prop-animation.html.

You can also define these files in an XML file using the Statelistanimator method.

Ideal for animations that run when the state changes, such as when a user clicks a button.

A lot of other information, see the animation view state changes, the next time in the animation section.
The z-value uses the same units as the X, y values on the measured amount.

Define your own view shadows and outlines

The background boundary of the view determines the default shape of the shadow. The contour (outlines) represents the shape of the graphic object and determines the ripple of the touch feedback area.

To see this view, define a background drawable:

<TextView    android:id="@+id/myview"    ...    android:elevation="2dp"    android:background="@drawable/myrect" />

background is a rounded rectangle

<!--res/drawable/myrect.xml--><shape xmlns:android="/http/ Schemas.android.com/apk/res/android "android:shape=" Rectangle "> <solid android:color=" #42000000 "/> & Lt;corners android:radius= "5DP"/></SHAPE>  

When this background drawable as the outline of the view. The view casts a rounded shadow.

Provides a self-defined outline that can override the default view Shadow shape.

Define a profile yourself in your own code:

1. Inheriting the Viewoutlineprovider class
2. Overriding the Getoutline () method
3. Set the outline in the view, using the View.setoutlineprovider () method

You can create ellipses and rounded rectangle outlines using methods in the outline class. The default outline provider of the view generates outlines based on the background of the view. The ability to set the outline provider of the view is null. To prevent casting shadows.

Crop view

The Crop view feature allows you to change the shape of the view more easily. You can crop the view in order to align with other design elements. or change the shape to respond to the user's input. You can crop the outline of a view usingView.setClipToOutLine()Method, orandroid:clipToOutlineProperty. There is only a rectangle, rounded rectangle, and the outline of the circle is clipped and can be usedOutline.canClip()The method detects if the crop is supported.

Crop the view to a drawable shape. Sets drawable as the background for the view (the view is displayed on it), and the method is called View.setClipToOutline() .

Cropping a view is an expensive operation and does not use shape animation when cropping the view. To achieve this effect, use the Reveal Effect animation (the next section).

Summarize

As you can see, setting the Shadow is easy:

1. Sets the Eleavation value.
2. Add a background or set a outline.

References: http://developer.android.com/training/material/shadows-clipping.html

Original address: http://blog.isming.me/2014/10/26/creating-app-with-material-design-three-shadows/. Reprint please indicate the source.

Copyright notice: This article blog original article. Blogs, without consent, may not be reproduced.

Create material Design-style Android apps-custom shadows and cropping views