Using full width cards to maximize content
Cards are one of the most common components of material design. A card is used to group related content in the style of a piece of paper, which makes it perfect for the display of items in lists and grids. Cards usually have a drop shadow and a small margin that prevents them from touching other elements.
In February 2015, the Google+ app showed cards that look different. The Google+ team has always been experimenting a lot with design. Just remember that they replaced the navigation drawer with a special drop-down menu, a navigation pattern that hasn’t yet found its way into any other Google app. In contrast to regular cards, the new cards in the Google+ app have no horizontal margin and fill the screen from one edge to the other. However, they only expand to the screen width if the posts are displayed as a list. In a staggered grid, which is the layout Google+ uses for larger screen widths, the regular horizontal margins and round edges are still applied. In other words, the new cards are used in lists, the regular cards are used in grids. Now, four months after the new cards were first spotted in the app, they are still present. This indicates that both the users and the team are satisfied with the change.
The benefit of these full width cards is the ability to display images and videos at their maximum size. No pixels are wasted on margins or borders, which leads to an immersive viewing experience.
During the development of Imagine, a material design Instagram client for Android, we also came across this topic. We show the feed of Instagram posts as regular cards in a list. Some weeks after we published the app, we were receiving a couple of emails from users that loved the app, although they did not like the waste of space left and right of a card. That is certainly also because they were used to the full width display of images from the official Instagram app. When we saw the new cards in the Google+ app, we realized that this style would perfectly fit our needs. Consequently, we added the option to display the cards just like the Google+ app does, which satisfies the users that reached out to us.
After using the full width option ourselves for a while, we found that it really improves the viewing experience of the app. Recently, we started a quick poll in our Google+ community about which card design our users prefer. At the time of writing, 43% prefer the full width cards, 57% prefer the regular cards (282 votes in total). Although it is not the majority of users, it is a noteworthy group that definitely favors full width cards over regular cards.
The need of maximizing horizontal image space can also be observed in the Facebook app. Although the app uses regular cards, an image inside is wider than the card itself and almost touches the display edges. The small drop shadow makes it look like it is sitting on top of the card. This can be considered as material design but looks really weird in my opinion.
Today, the Google+ app is not the only place where Google uses full width cards. You can also find them in Google I/O 2015, Inbox and System settings. However, these apps are mainly using cards to group list items and don’t show full width imagery (except Google I/O in the top card). Thus, one can best check out the Google+ app to get an idea of using full with cards in its most valuable form.
What about the guidelines?
The material design guidelines clearly recommend an 8dp padding from the edge of the screen to the card. Based on that, one can argue that full width cards are against the guidelines. However, always remember that those are just guidelines, not strict rules. If a component does not fully comply with the guidelines but clearly does improve the user experience of an app, there is no reason to hold it back. Furthermore, the guidelines are a living document, which means that they will be updated over time. When new patterns arise, there is a good chance they will be added to the guidelines in the future.
Implementation
To transform a regular CardView to a full width CardView, we obviously first need to remove any horizontal padding of the parent view and any horizontal margin of the card itself. On Lollipop and newer, we then just set the card corner radius to 0dp and we’re done. On pre-Lollipop, CardView unfortunately adds padding to its content to draw shadows to that area. That padding can’t be removed so we have to apply a negative horizontal margin of 3dp to the card. I recommend creating different dimension resource values for the different platform versions.
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/card_margin_horizontal"
android:layout_marginRight="@dimen/card_margin_horizontal"
card_view:cardCornerRadius="0dp">res/values/dimens.xml:
<resources>
<dimen name="card_margin_horizontal">-3dp</dimen>
</resources>res/values-v21/dimens.xml:
<resources>
<dimen name="card_margin_horizontal">0dp</dimen>
</resources>
