Android layout examples that match "Metrics and Grids" recommendations

Question

After trying to make sense of the Metrics and Grids page of the (fairly new) Android Design website, I gave up on a lot of things. So, basically, I'm trying to find the original layouts that are used in Android 4, so that I can apply the same concepts.

To make this question more objective and not fail under the "too broad" axe of stackoverflow, I ask you for the layout that is used to recreate, exactly and fully, the examples on that page. Did Google provide them in the samples? Maybe a well known didactic repository that strives to conform with standards?

Just as an example, it's not clear what to do to recreate the "48/3 metrics" (16/16/16) in order to make the text fit in it. What if I want to use 1-line of small text? Would it be 16/wrap_content/16, or 16/16/16 to make it consistent with other layouts around the set? What if...

I believe this would not only help the small devs, but also and most importantly, help standardize the look and feel of apps in Android Play. The site is a good start, but far from ideal.

Added details

I never asked a question with this much upvotes, and I didn't even expect that (I have other questions that I regard as "better", but by far not as many votes and favs). Not that I care about votes, of course, but that is to show that there is a great demand for what I'm asking (a bit of an ad populum here, but still...).

Replies to comments

@Ricardo Amaral:

I'm indeed sorry if I wasn't clear enough:

• Mandating a standard and requesting unambiguity from it are different issues. One of the reasons I like Android is the degree of freedom we have, so I'm very much aware of the impossibility of mandating most of the common practices.
• I believe it relates to the concept of "reinvent the wheel" within the concept of freedom.
• Again, those were just examples. Some things are not clear... which are paddings of the outer container, and margins of the inner views? Many times that makes a difference in selectors, dragging etc. etc. etc., and that again translates into a familiar look and feel for the user. One thing feels like splitting hairs, but it quickly adds up to a lot of small differences. And the user notices it... it looks like it lacks that last "finishing touch".

@Michael Slade:

I know they're examples, that they may have been wireframed from templates. As said, I'm already reusing code from the SDK, and I know they're just examples and that we can deviate from them. Again, after all this time, nobody answered.

Optionality benefits from precision. That's what I'm trying to say and ask. Because it's a recommendation doesn't mean its guidelines can be whatever you want them to be. If you do that, it's not the recommendation anymore. That's the whole point of recommendations, by the way: provide an implementarion theory without forcing anyone.

Thanks everyone!

Derogatory

I think you are tackling this issue from the wrong point of view. Those are only meant as guidelines for proper element size/alignment. For a more consistent UI and harmony between each element. And they are just examples (not templates), doesn't mean you can't deviate from them if it doesn't fit your app. For instance, your example, it really depends on what that "1-line of small text" is for. Without knowing much about the situation, I would say, leave it at 1-line and maybe make it auto-scroll. Another alternative, have an 8dp top/bottom margin and split the content in 2 lines (8/16/16/8). – Rox

I still think you are looking at it the wrong way. Which are paddings and which are margins? If that doesn't have any impact in the look, should it matter? It's all the same from the user point of view, it's blank space. I see those as guidelines for proper alignment, that's all. If you use paddings instead of margins to achieve the look you want while still conforming with those guidelines it's irrelevant. That's what I think. – Rox

I think you are reading too much into the whole thing... All your elements are properly aligned and the breathing space between them conforms to the guidelines on that page? If check and check, then it's all good :) – Rox

I still think it makes a difference visually, but I'm starting to think you're right about being too "obsessive" with it. Anyway, I'll just wait for recommendations about possible layout repositories and will hopefully end this question. Thanks for the argumentation. – Derogatory

The metrics and grids page specifies the nr of dps for various types of ui elements that Google recommends. You use those numbers, your ui will look the way Google likes it. So what's your question? – Muscid

In second paragraph: did Google provide the layouts for the examples in that page? If so, where? Someone coded it to show, I guess. That's it. And no, it won't look that way, because there is plenty of room for ambiguity that adds up to a different UI experience. I'm doing it, so I've seen. I've done sketches in paper, and I need to fill the gaps with subjectivity, and won't match native ICS apps. I've found myself holding a precision ruler in front of the screen. :) "Eyemeter" if never the way. Look at the section headers in the page for another example. – Derogatory

Btw, please don't think of this as a freeloader question for layouts. I'm already looking at the sources (platforms\android-15\data\res\layout) and actually applying to my project what I feel it's right for my goal at the moment. But I still believe that the answer, if it exists, would help provide a "reference" for devs (preferably a didactic reference, not a collection of examples), eliminating this share of guesswork, which is currently needed. Thanks! – Derogatory

It's worth noting that for the metrics related to widget padding (4DP around buttons and text fields, etc.), the Holo versions of those controls already follow the guidelines. It's really up to the app to just use a 16DP vertical grid for layout where possible. – Bipolar

Answer 1

Hate to break it to you but it's likely that the images on the page you like were created with a drawing program, and there are no example to go with them.

Without someone actually going to the effort to create samples for you, your best bet is to go through the samples that come with the android SDK - they will follow the guidelines in most cases.

And remember, they are just guidelines. At the end of the day it's up to you to create a pleasant and smooth user experience, however you see fit.

Linolinocut