Android custom control background and Drawable for flattening

Flat?

It is said that flattening is an evil wind from IOS and WindowsPhone, but it is undeniable:Flattening is the most comfortable and natural way I have ever seen.From the perspective of development, the flat design can free us from many screen adaptation and size adjustment work (although only a little bit) and focus more on functions; at the usage level, as long as the cultural level is not particularly low (no malicious code), the function of quasi-materialized prompts is not so obvious. Of course, this is not to say that quasi-materialized is not good. In short: compared with other expressions,Flattened bunker.

We also made a flat. As mentioned above, flat controls are actually very easy to develop. Here, let's work together to achieve the following effect (the red part is the description of this article, and you can complete the blue part by yourself ):
All elements are simple, In essence, it is a View with a black border and no filling background (Button (in the figure 1) and ViewGroup (in the figure 2 )). Define a flat background for View (part 1 on the way)From the above analysis, we can see that we only need to define a flat background for the components, and try to pursue simplicity in the layout to achieve the flat effect. The following is a thick DP background with white fill color: Bordered_black_blue_bg.xml

If you are not familiar with shape in Android, refer Summary of this studentOr refer to the official api documentation.

Our design also includes:When you click the button, the background color turns blue.Therefore, the above drawable resource is only displayed in the default state. Next we will create a flat Button to show the effect when it is pressed:

Bordered_black_blue_bg_pressed.xml

Next, we will create a selector object for the Button Based on the two drawable files above.

Define a flat background for ViewGroup

We can see that the background of the ViewGroup is consistent with that of the View under normal conditions. Therefore, the contents of their drawable files are consistent. Bordered_black_bg.xml

The layout files of the small entries at location 2:
View_info_item.xml

Flattening ListViewAccording to the above introduction, we can already make a very "sensory" flat button (or TextView, etc.), in order to make the image 2These small entries can be rolled and easy to manage. We put them in the ListView. The layout file is: fragment_department_detail.xml.

We know that ListView is ugly by default, and there is no interval between items, so we can't bear to look straight ~~~~~ In order for ListView to catch up with the flat, we need to configure it. Android: divider = "@ null". Set the interval between items in the ListView to @ null, that is, there is no interval.
Android: dividerHeight = "@ dimen/list_dirver_height", and the configured height is the "distance" between items ". In the preceding xml, the interval is 5dp
Fill in custom data for ListView. Here we will not talk about it. Just inherit a BaseAdapter. Do not start the Activity, Here is the source code of this blog. Any download that requires credits is a da stream (sha) Seek (bi ).