Thoroughly understand Material Design

Material Design
Are based onAndroidenvironment
Material Design
iOS
Web

Material Design is a new Design specification that Google announced at I/O 2014. This design style brings a lot of changes to Android UI design. Make the page beautiful.

Material Design is a Design language that combines traditional excellent Design and technological innovation.

Material Design is inspired by real Material materials in the real world. The Material Design language emphasizes highlighting the core functions according to the user’s behavior, thus providing the user with operational guidance through bright, vivid color difference. Add appropriate actions to guide the user.

Material Design emphasizes authenticity and three-dimensional sense. Material Design’s three dimensions are reflected in light, drawing surfaces and casting shadows. All material objects contain x, Y, and Z dimensions. The Z-axis represents altitude, not material thickness, which many sources are wrong about. The thickness of the material is always 1 DP cannot be changed. X and y correspond to the length and width of the material, which can be changed.

The material here is a control in the Android world. We can think of the control as an object in the real world. The thickness of each object is fixed, always 1DP, x,y, which corresponds to the length and width of the control.

In order to reflect the feeling of real objects, concepts such as light and shadow are introduced, which we will explain below.

To match this design specification, Android has introduced a number of related controls. You can reference these controls individually or directly through the Android.design package. In conjunction with Material desig, Android offers new themes, new themed components, and custom shadows and new animation apis

Take a look at the new controls Android has added to work with Material Design:

Some basic concepts

3D

In the real physical world, it’s a three-dimensional environment. All objects have x, Y, and Z dimensions. In Material Design, each object (that is, your control) is 1 dp thick.

And then these controls have the idea of altitude, and then they have the idea of shadows, and that gives them a 3-D feel.

The concept of Z

Because of the emphasis on real-world authenticity, the introduction of Z represents the elevation of the control. For example: on A desktop, you put A book A, and then on A you put A book B. At this point, there must be A sense of hierarchy, the elevation of B relative to the desktop is not the same as the elevation of A relative to the desktop. In Android, Z is used to represent the elevation of the control.

In order to meet the hierarchical requirements of Material Design, Android 5.0 has added the Z-axis, which is used to represent the altitude of the control. The altitude effect is reflected in the shadow.

Z = elevation + translationZ

The Z value in View consists of two parts:

Note the Settings for translationZ, if you simply set the control height, it should be setelevation. Rather thantranslationZ

  • Elevation: used to specify the static elevation of the control. An elevation property can also be set in code via setElevation.

    In Android, the attribute elevation represents the altitude. This value is always valid, but it may not be visible if there is no shadow. It can only be seen in the elevation demo below.

  • TranslationZ height is an offset distance that is used for animation effects, otherwise do not use it.

    Translation Z is dynamic, when creating an item, add a button, when pressing the button the shadow will become larger. In fact, Elevation is not changing, but the Translation Z attribute is changing. This is Android using the default status list animation, changing the Z property.

    The default FAB has a 6DP Elevation, and the translation Z value starts to increase when the button is pressed. The ViewPropertyAnimator moves the view by changing the translation Z value from 0 dp to 6 dp. If the button is released and the ViewPropertyAnimator plays the animation, change the translationZ from 6 dp to 0 dp. We can create a custom state list animation for our view to add to the view.

The Z property enlarges the View’s display area. If its size is greater than or equal to the size of the parent View, its shadow effect will not be displayed. The View will not shrink to show the shadow because of the Z property.

The Z attribute not only affects the shadow effect of the view, but also affects the order in which the view is drawn. Within the same parent view, the smaller the Z attribute, the earlier the time to draw. The larger the z attribute is, the later it will be drawn. The later one will overshadow the first one. Only if the Z attribute is the same, it will be drawn in the order of addition.

At an altitude of

Altitude is introduced to show the sense of hierarchy. In the real world, there is the concept of altitude, and the value of Z represents altitude.

Elevation refers to the distance from one surface to another. The elevation of an element indicates the distance between the elements’ surfaces and the depth of the shadows.

Elevation is the distance between two surfaces along the Z-axis, also in dp, and the elevation of a child element is relative to its parent element.

Altitude is divided into static altitude and dynamic altitude deviation.

Static elevation: All elements have a static elevation (elevation).

Dynamic altitude deviation: refers to the distance moved from the stationary state to the target altitude (translationZ)

Elevation of components:

  • The elevations of the same component are the same in different applications. For example, the elevations of the floating buttons in different applications are the same
  • The same component on different platforms and devices may have different elevations, depending on the depth of the environment. TVS, for example, have more depth than desktops because the screen is larger and the user can see farther. Similarly, televisions and desktops have more depth than mobile devices.

Some types of components have responsive elevations that change their altitude based on user input (such as normal status, get focus, press) and system events. These elevation changes are usually achieved by dynamic elevation shifts.

Dynamic elevation offset is the distance the component moves from the stationary altitude to the target altitude. All components add the same altitude by default when pressed. Once the input event completes or cancels, the component returns to its original resting altitude.

In this figure, the altitude of the control is different, showing a sense of hierarchy.

For example, in this picture, the mobile phone screen can be regarded as a horizontal plane with an altitude of 0. There are many controls on it. Their altitude is different, which shows a sense of hierarchy.

Altitude demonstration

CardView and TextView

  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </androidx.cardview.widget.CardView>
        <TextView
            
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"/> </RelativeLayout> So TextView won't be displayed, because TextView's default altitude is 0, and it's blocked by Cardview, because Cardview's default altitude is 2dp, If you set the elevation of the TextView to 3DP then the TextView will be displayed.Copy the code

Standard altitude for general controls

  • Application bar: 4DP
  • Button: static state 2DP Pressed state: 8DP
  • Float operation button (FAB) static: 6DP down: 12DP
  • Card static: 2DP Floating state: 8DP
  • Menu and submenu: Menu: 8DP Submenu: 9DP (+1 for each submenu)
  • Dialog 24 dp
  • Drawer navigation 16DP
  • Refresh indicator 3DP
  • Quick entry/Search bar static 2DP scrolling 3DP
  • snackbar 6dp
  • Switch 1 dp

The hierarchy of objects

All objects are described in parent-child terms, with child elements inheriting variable attributes of the parent, such as position, rotation, and altitude. Hierarchical objects belong to the same level in the hierarchy.

For example: we have a layer of paper on the table, if we put another paper, our eyes will feel a depth.

The same effect, the left side has a sense of depth, a sense of layers.

Depth

Depth means that all elements in the material environment move horizontally, vertically, and at different depths along the Z axis, in the positive direction of the Z axis and at the height of points within the range. It’s just altitude.

outline

By default, all views are rectangular. Although you can give a view a circular image with a background that displays circular content on the screen, the size of the view is actually rectangular and the image is actually rectangular, except that the area outside the circle is transparent.

To solve this problem, the view added a new description that specifies the shape of the content to display. This is called the outline.

Outlines represent the outer shape of graphic objects and determine ripple areas for touch feedback.

Every view has a default contour (some views don’t have a default contour, such as TextView). If we customize a View, its contours should be implemented by ourselves.

Outline implementation

Shape setting background, view will automatically determine the shape of the outline, ② by color setting background, view default contour and view size. ③ But through the image background setting, the view can not know the shape of the contour, this time you need to manually specify

Manually specify contour

When the default contour doesn’t work, or we define our own View, we need to specify the contour ourselves in code.

In your code, you can specify the outline of a view by using the setOutlineProvider.

The Outline related class Outline

Outline is a class under Android. graphic.

Define a simple shape to be used as the boundary region of the graph

It can be evaluated as a View, it can be evaluated by Drawable, it can be used to drive the shadow shape cast, or it can be used to crop the contents of the View

Anyway, this class is used to specify the contours of a View. The outline of the View can also be set via the outlineProvider property, which defaults to background and other values bounds none paddingBounds

Background: Displays the outline by background. If background is the color value, the outline is the size of the view. If background is shape, the shape is used as the outline. Show shadows If the background is a picture or a transparent shape you can only specify the contour using the code 'setOutlineProvider()'. The rectangle size of the bounds:View is the rectangle size of the paddingBounds:View minus PaddedBounds is similar to bounds, but the shadow is offset slightly to the rightCopy the code

If we want to create a custom view and dynamically change its contour, we need to use the ViewOutlineProvider

Using the ViewOutlineProvider class, we can add our own contours to the View

public class MyViewOutlineProvider extends ViewOutlineProvider {

    @Override
    public void getOutline(View view, Outline outline) {
        outline.setRoundRect(0.0, width, height, radius); }}// So that the View has an outline, then setElevation to change the altitude to appear shadows
The specific shadow is set by Z. If the size of the contour is fixed, changing the size of Z will occupy the space of the contour and make it look smaller.
view.setOutProvider(new MyViewOutlienProvider);
// If you do not want the view to have cast shadows, you can set the contour provider to NULL
Copy the code
tailoring

View clipping refers to clipping the View according to the outline, which can change the shape of the View, such as the circular head:

  • I’m gonna set the contour

  • In setting clipping View according to contour, currently only supports clipping rectangle, circle and rounded rectangle

    Tvclip.setcliptooutline (true)// Sets clipping to View

    Check to see if scrapping is supported with the outlin.canclip () method.

shadow

Above, the basic concepts of 3D, altitude and silhouette are introduced, but the ultimate effect of these concepts is the shadow.

Shadows are an important visual indication of an object’s altitude and direction of movement. It is also the only visual element that indicates the distance between the two faces. The elevation of the object determines the appearance of the shadow.

Shadows can also be used to indicate the direction in which objects are moving and whether the distance between surfaces is increasing or decreasing.

Shadows provide hints about altitude, direction of movement, and drawing edges. The effect of shadow is different at different altitudes.

Generally speaking, the higher the altitude is, the larger the shadow will be, and the lower the shadow will be, the smaller the shadow will be. However, if the altitude is too high, the shadow will disappear (generally more than 20dp). When the material surface ratio changes, its shadow should not change, and when the altitude changes, its shadow should change.

The material material can display any shape and color inside, but its content does not increase the thickness of the material.

Shadows are generated by the superposition of materials at different altitudes. In Material Design, virtual light irradiation makes shadows appear on my Material materials. There are two kinds of light here, one is the key light and the other is the environment light. Key lights create sharper directional shadows called key shadows. Ambient light appears from all angles, creating diffused soft shadows called ambient shadows.

Shadows in the material environment are produced by both the key light and the ambient light projection. In Android and iOS development, shadows appear when the light source is blocked by the “shader” surface at various points along the Z axis. On the Web, shadows can be drawn just by manipulating the Y-axis. The following example shows a card with an altitude of 6dp.

Shadow condition

Shadows are determined by both contour and altitude.

Elevation determines the size of the shadow, and silhouette determines the shape of the shadow.

The shadow must have a profile and then be projected at an elevation. Both are necessary. The bottom layer of shadow is native implementation rather than normal 2D gradient effect simulation shadow.

Setting up shadows in Android L takes only two points

  1. Set altitude (via elevation)
  2. Set the outline

There is no shadow effect when a Button elevation is applied, because the shadow effect of a Button is determined by the stateListAnimatior. If you want to add an elevation to a Button, StateListAnimator must be set to “@null”. But if the stateListAnimator is set to null, the elevation animation will not be displayed. To do this, you can set an elevation elevation on the LinearLayout layer inside the Button’s outer layer. Remember that the LinearLayout must have a background. Instead, use the shadow effect of the Button itself, which varies depending on where the Button is placed on the page. See the Button

Please refer to the Materila Design website

Thoroughly understand shadows in Android

All kinds of shadows

Material animation effect