How to Construct a Google Now Style Card Entirely with XML

In this tutorial Ill be showing you how to build a card that looks similar to ones in Google Now. This is a very technical guide that will require a beginner to intermediate understanding of Android development. Below is an image of the end result of this tutorial.

Concept Overview
Arrangement of multiple nested elements o This will include nesting complex Relative Layouts within Linear Layouts Wrapping all common elements in styles Overlapping elements within a Relative Layout

Arrangement of Nested Elements

Container
The first step will be to conceptually break the final product into smaller parts. We can see to start that there are two halves that are aligned vertically: the top half with the name and the bottom half with all of the information pertaining to that user.

Here you can see that the outermost layout is a vertical orientation to contain the two elements. The nested layouts each have a weight of 1 so that they share the 140dp evenly. When dealing with weights, it is often times necessary to give your element a height of 0dp (or width of 0dp, in the case of horizontal layouts) so that it doesnt confuse the compiler. With weights it is safe to assume that the weighted elements will share an equal amount of space within the parent.

Top Half of the Card

The top half of the card will be a simple Linear Layout with a horizontal orientation. This is because you may want to include more information along the x axis of the top half. Originally my design for this card included a contacts image to the left of the name. This was easily accommodated by the horizontal orientation. Within this Linear Layout will be a simply styled Text View. Below is the code snippet accompanying this description:

The commented out section was the contacts image that was originally included. The Text View has a simple style on it. This style included the font Roboto Light as well as a size of 18sp. A guide for applying this font can be found at this link.

Bottom Half of the Card

The bottom half is a little bit more complicated. Its best to start with the easy attributes we know this half will have a horizontal orientation due to the natural layout of the attribute elements (Sent, Rate, and Replies). Within this horizontal layout there will have to be three other Linear Layouts and one Relative Layout. Each one of those individual layouts will be vertically oriented with two simple Text Views.

Above you will see an example of the Sent and Rate sections. They are both Linear Layouts with two nested Text Views. The Text Views are styled with specific fonts and text sizes (16sp for the top and 18sp for the bottom).

The attribute container is pretty self-explanatory but Ill include a description for those that are new. You can also consult the Android Documentation to find where to put the style class.

layout_height : It is set to match_parent because we want each individual piece to fill the entire height. layout_width : It is set to wrap_content because we will be using weights. Each element should be exactly as wide as its contents. layout_weight : This is set to 1 because each Linear Layout should take up the same amount of space. This is much better than hard-coding a padding because now this card will be able to scale correctly when the phone is in landscape mode.

Here you can see that the contact attribute elements are evenly spaced; the card still has the same clean, uniform look as in portrait mode. gravity : This is set to center because we want the elements to automatically pad themselves. This way, if the card were to be rendered on a very narrow phone with a skewed aspect ratio, then the attribute elements would dynamically readjust as they did in the portrait vs landscape example. orientation : This is set to vertical because the attribute label is directly on top of the attribute itself.

Overlapping Elements

Perhaps the most difficult part of this tutorial is the concept of overlapping elements. Since this icon wont be used on any other screens, there is no need to pull its attributes into a style. To start, we have to contain this entire element in a Relative Layout. The reason for this is that it is impossible to overlap elements with a Linear Layout as the name suggests, the elements are arranged linearly. This is opposed to Relative Layout where you specify the location of each element with relation to the others. Within this Relative Layout will be an Image View (the conversation icon) and a Text View (which represents the orange circle and the 3).

The Image View is set to be center_vertical so that it centers itself within the container. The width and height are hard coded since proportionally it satisfies the requirement (the container is 140dp so each half is 70dp). The Text View is then set to align to the right of the Image View. This is done with the line android:layout_alignRight=@id/msg_icon. This will put the Text View to the right side of this icon. The last step is creating a circular background. You do this by creating a new drawable with the shape of an oval. Then when you specify that the heigh and width at 15dp, it gives the background a perfectly circular shape.

Conclusion
Youre now done making a Google Now type card with complex objects within it. In my next tutorial Ill cover applying the background shadow to the entire card. Please post any questions in the comments.

Reflective Note This type of writing would most likely be found on a blog or as the answer to a question on a forum. In computer science, I go through about two or three tutorials of this style a day. When youre learning a new language it is extremely important to have very specific tutorials that teach you to create certain objects or perform certain tasks. I picked a visual example of a tutorial (instead of one that was extremely code-intensive) since they are the most fun to layout and easiest to explain. I actually took a real block of code from my personal side project and chose to explain it since this type of tutorial will actually be extremely useful to people online. I couldnt find anything that covered the same material on any popular tutorial websites so hopefully this will act as a unique contribution to my field. Ill probably post it as a blog at some point once I write a few more. The tutorial itself is 944 words and the reflective note is 164 words. Ill definitely include this paper in my portfolio since, as I said, this is type of writing is used by every developer very often. I might actually rewrite it to be more complicated if I really plan to post it online (and definitely complete the shadows follow up tutorial).