Text Protection Sand-material DESIGNW

Ok, about this material design is said to be rotten, he was more and more familiar with the degree of developers, but with the market's thin figure formed a sharp contrast, so that whenever I mentioned material Design as Xiang Lin sister-in-laws.

Some people say that MD in some looks very broad, tell you a trick, if you are an independent developer, or your app to the UI is relatively low, or you do not have UI resources around, you can follow the MD specification copy a relatively pleasing to the application, Even after exploding the so-called UI design out of the low design.

Today, to introduce a dry, MD's official website address will not paste, and some will have, no, you can not see (to FQ), to a Chinese version, thank these English Daniel (although some of the responses are not appropriate), sincere thanks, people should have the heart of Thanksgiving, the address is as follows: http://design.1sters.com/.

Dry goods come, text protection yarn-protection scrims, yarn is gauze yarn, not sand, attached address: http://wiki.jikexueyuan.com/project/material-design/style/imagery.html

A better illustration

　　

Please note that the nickname this column, the background is an excessive color, this part of the role of excessive color is the text protection yarn, sometimes in the design will be found due to the uncertainty of the background color, will lead to floating in the above text does not have a good contrast, in order to protect the readability of text, the text protection yarn is the application of this design

This is my recent application, I belong to the kind of independent app developers, there is no good UI resources, completely self reference MD design, completely self-sufficient, but for a programmer, is not too harsh, hehe.

Below I will write how to implement this text to protect the yarn through the program code, do not need to design cut diagram Oh, this much saves money.

It must be drawable.

Scrim_bottom.xml

　　

<?xml version= "1.0" encoding= "Utf-8"?>
<shape xmlns:android= "Http://schemas.android.com/apk/res/android" >
<gradient
Android:angle= "90"
Android:startcolor= "@color/translucent_scrim_bottom"
Android:centercolor= "@color/translucent_scrim_bottom_center"
Android:endcolor= "@android: Color/transparent"/>
</shape>

It's simple, right? is just a gradient, then the key is the selection of gradient values, I quote the original text:

　　Dark Yarn (Dark scrims) The ideal transparency should be between 20%-40%, bright yarn (light scrims) The ideal transparency should be between 40%-60%, depending on the specific content to be determined.

　　We know in Android that the color is expressed in 16 binary values, such as White is #ffffff, six is not right, then if the white with transparency, is in the beginning with 2 bits to represent the transparency, the first two bits: 00 is completely transparent, FF is completely opaque, such as # 33FFFFFF, with the transparency of the color value is eight-bit, right?

The dark yarn, is the black 20%-40% between, we convert this value into the transparency color value (this is some do not know how to do the UI how to calculate, exactly say no this concept, hehe), then the calculation formula is as follows:

255 *% Conversion 16 binary, for example, to 20% of the transparency, 255 * 20% = 51, 51 is converted to 16 binary 33. Then a 20% transparency of the Black is written as #33ffffff.

Then the calculation formula will be, we can customize the transparency according to our own needs, if your UI will only tell you the percentage, you will also calculate it yourself, right?

Value I will not paste, because in the actual use of 20% to 40% percent does not reach a very good effect, to illustrate a point, do not scripted, to be flexible use, experience the spirit!

　　

　　

Text Protection Sand-material DESIGNW