Thoroughly understand the shadows in Android

If we want to create a better Android App, I believe we need to follow Material design specifications. In general, Material Design is a three-dimensional environment that contains light, materials, and projections. If we want to follow Material design principles in the development of the APP, it's important to understand the light and shadow.

I'll try to explain the following topics in this article.

• 3D in Android
• Depth (Depth)
• Z-axis, elevation and translation Z.
• Light
• Button state (pressed and stationary)
• Outline
• Custom Viewoutlineprovider

Before going deep into the shadows and light, I want to tell you what our real environment is.

What is 3D?

The real physical environment is a three-dimensional space, which means that all object objects have X, Y, and Z dimensions. The z-axis is aligned vertically with the plane of the monitor, and the positive z-axis extends toward the observer. In the world of Material Design, each object has a thickness of 1DP.

Android's Depth

Material design is different from the others because it adds the concept of Depth (depth). And Depth in the real vision, has the important significance.

We can think that there is a layer of paper on our desk, and if we stick another piece of paper, our eyes will think it has a depth.

Let's imagine it through the application of Material Design.

Let's take a look at the various elements on the screen.

• Screen (surface-depth = 0)
• Cardviews
• APP UI Layout
• Floating action buttons (floating action button)

In this, each element is on top of another element. CardView can scroll, so we can say that the first layer is scrollable content, the second layer is the AppBar layout, the third layer (top level) is a floating action button.

So, how do we define hierarchies? How do we make the user feel the depth? The answer is: Z axis.

What is Z-value in Android?

The Z-value of View has two components:

• Elevation: height, a static value.
• Translation Z:z axis change value, used for animated dynamic values.

I always wondered what the difference was between elevation and translation Z.

Elevation is static, so you'd better not change it dynamically. If you want to animate on the z-axis (such as by pressing a state or stationary state), you need to use the Translation Z property.

Translation Z is dynamic, and when you create a blank item and add a button to it, when you press it you will see the shadow become larger. In fact elevation does not change, but translation Z property is changing. This is Android using the default state list animation to change the Z property.

Z Vaue = elevation + Translationz

If we change the two View with Z-values, let them intersect. How does Android handle layers on the screen? Let me show you with a chart I've designed.

Another question, how do we see the shadow of an object? Do we need a shadow? No, we need a light source.

What are the lights in Android?

The problem is not what? But where it is.

In reality, if we hand a flashlight to the object on the table (from its top), the length of the shadow is shortened and the length of the shadow increases when you lower it.

So where is the light source in Android's Material Design? At the top? Or is there an angle? After some research, I found this phenomenon.

There are two lights in Android, the top one is the key light source, and the other is the ambient light, and the shadow we see is actually a combination of these two lights.

Let's look at the effect of the display.

In Android, we have a lot of widgets. Buttons, CardView, dialogs, drawers, etc. all of these are views. If there is a light source, we have a shadow. So how do we determine Z-values in Android? How does the Material Design prescribe these?

There is one to reflect this situation.

At rest or press the

As I mentioned earlier, in the Android Framework, some animations are implemented for widgets. If you place a floating action button in the layout, it will have a elevation of 6dp by default. But you will notice that when you press the button, the FAB's elevation will be raised to DP.

Let me tell you what happened in this process.

In fact, Fab has a 6DP elevation. When you press the button, theTranslationz value starts to increase. Viewpropertyanimator makes the view move by changing the Translationz value from 0DP to 6DP. If you release the button, Viewpropertyanimator plays the animation, changing the Translationz from 6DP to 0DP. You can create a custom state list animation for your view and add it to your view.

Let's take a look at the flowchart of this process.

The Secret of the Shadow: Outline

Outline is a class that belongs to Android.graphic, see what its documentation says

Defines a simple shape that is used for the bounding area of a graphic.

You can calculate for view, or it can be computed by drawable to drive the shape of the shadow cast by the view, or to trim the contents of the view.

Each View has a default outline to show its shadow. If we create a custom shape that can be drawn, its outline is calculated internally based on its shape. So, if we draw a circle, the contour will be round. If we draw a rectangle, the outline will be a rectangle.

All in all, there is a Outlin that allows you to see this effect in an invisible way. But what if I want to create a custom view and change its boundaries dynamically? Does Android provide Outline for my custom view?

Android, of course, provides us with a custom Outline approach, which is: ViewOutlineProvider .

What is Viewoutlineprovider

In my recent open source scalinglayout Library, I didn't have a shadow effect on my custom view. I thought it was very beautiful, no shadow. But keep in mind the basics of Material Design, 3d,depth,z-value.

In this animation, we may not be sure where those places can be clicked, and there is no shadow in the scale layout.

Next we provide a dynamic outline for the custom view.

publicclassextends ViewOutlineProvider {    @Override    publicvoidgetOutline(View view, Outline outline) {        outline.setRoundRect(00, width, height, radius);    }}

publicclassextends FrameLayout {        //...    newScalingLayoutOutlineProvider(w, h, currentRadius);    setOutlineProvider(viewOutline);    //..    }

This allows us to add a high level of support to the custom View.

For more information on the basics of Viewoutlineprovider, you can find the details in the scalinglayout.

Https://github.com/iammert/ScalingLayout

Author | Mert? Im?ek

Translation | Cheng Xiang Ink Film

Authorized Ink shadow Translation and release

Original address

Today in the public number back to the growth of " growth ", will be my collation of some of the study materials, but also can reply to " Dabigatran ", learning progress together.

Recommended reading:

• From the perspective of Android development, talk about Airbnb's Lottie
• These tools allow you to write a blog when you only need to focus on writing!
• Looking for a day without a Bug? Try Git's dichotomy!!!
• How to search the Open Source Library on Github more precisely? You need these tricks!
• Android Development, encounter Emoji headache?

Thoroughly understand the shadows in Android