Write so many android layouts, do you know the elevation property?

Transferred from: https://www.jianshu.com/p/c1d17a39bc09

First, elevation

We know that in relativelayout, or purer framelayout, the post-written view covers the previously written view.

Like what:

<?xml version="1.0" encoding="Utf-8"?><RelativelayoutXmlns:android="Http://schemas.android.com/apk/res/android"android:orientation="Vertical"Android:layout_width="Match_parent"android:layout_height="Match_parent" ><RelativelayoutAndroid:layout_width="Match_parent"android:layout_height="300DP"Android:background="#ff0000" ><Viewandroid:id= "@+id/vgeeen" android: Layout_width= "200DP" android:layout_height=  "200DP" android:background= "#00ff00 "/> <textview android:id= "@+id/vblue" android:layout_width= "100DP" android:layout_height= "100DP" android: Background= "#0000ff"/> </ Relativelayout></RELATIVELAYOUT>     

Effect

Image.png

Well, this is normal, Vblue now vgeeen above, everything is normal.
At this time, the protagonist elevation debut.

Let's make a few changes and add a line of code to Vblue:android:elevation="1dp"
Now the code becomes:

<?xml version="1.0" encoding="Utf-8"?><RelativelayoutXmlns:android="Http://schemas.android.com/apk/res/android"android:orientation="Vertical"Android:layout_width="Match_parent"android:layout_height="Match_parent" ><RelativelayoutAndroid:layout_width="Match_parent"android:layout_height="300DP"Android:background="#ff0000" ><ViewAndroid:id="@+id/vgeeen"android:layout_width= "200DP" android: Layout_height= "200DP" android:elevation=  "1DP" android:background= "#00ff00"/ > <textview android:id=" @+id/vblue "android:layout_width=" 100DP "android:layout_height= "100DP" android: Background= "#0000ff"/> </ Relativelayout></RELATIVELAYOUT>     

Look at the effect now:

Image.png

My mblue where to go, said the last appearance is the protagonist, Mblue incredibly disappeared!

We know that in the CSS, we often calculate the weight, in just the practice, add Mgreen added android:elevation= "1DP", equivalent in these view inside his weight improved , promoted!

In the Android world, elevation played the role of weight, and each view of the default weight is 0DP, but in Google said he is a shadow of the role, but in fact due to the height of the MD design z caused, I will say later

If we put the above Mgreen elevation set to android:elevation= "0DP", then all the usual, the final appearance of the Mblue will still cover the Mgreen.

Originally, this elevation is 2014, Google launched material design new Android Support Library V7 only after the product (but after so long I have not used elevation attribute, ashamed)

Then why elevation can play the role of similar weight?
Because, in the MD design, the view can cast shadows, the elevation value determines the size and order of the shadows. To set the elevation value

Let's create a new layout and set the android:elevation= "30DP" for TextView to see what effect it will have.

Image.png

Set up

<?xml version="1.0" encoding="Utf-8"?><RelativelayoutXmlns:android="Http://schemas.android.com/apk/res/android"android:orientation= "vertical" android:layout_width="match_parent" android:layout_height= "Match_parent" > <TextView android:layout_width="100DP" android:layout_height=  "100DP" android:background= "#000000" android:layout_centerinparent="true" Android: elevation="30DP"/></relativelayout>        

It has been explained by the adoption of the situation.

Second, Material Design height View height Z

The material design theme introduces a high-level concept to UI elements, with the height of the view represented by attribute Z, which determines the visual effect of the shadow, and the larger the z, the greater the shadow and the softer it becomes. However, Z-values do not affect the size of the view.

The z-value of a view is represented by two components:

• 1, Elevation: Static component
• 2. Translation: The dynamic component for animation

The z-values are calculated as:
Z=elevation+translationZ

Elevation properties and Translationz are good friends.

Specifically, we are not here to elaborate, specific understanding can be consulted material design elevation and shadows, written very good.

Third, the margin from when

So, how did I find this elevation attribute?
Everything has to start from CardView.

We often set up code like that in CardView app:cardElevation="5dp" .
And then I found a view at the bottom of the CardView is not coming out, App:cardelevation is
CardView unique elevation, of course, CardView can also be set elevation.

Summary:

In MD design, views have a high level of concept, denoted by Z, Z is controlled by elevation and translation two, because the concept of this height leads to the effect that the elevation attribute produces weights similar to those in CSS.

Write so many android layouts, do you know the elevation property?