Using of ConstraintLayout to build out CardView with Material Design

Material design guidelines mention that cards can be constructed using blocks of content which include:

• An optional header
• A primary title
• Rich media
• Supporting text
• Actions

These blocks can be organized to promote different types of content. Let’s consider some possible combinations of content blocks to build cards and how they can be implemented using ConstraintLayout.

1 Media 16:9 and supporting text

Taken from Material design guidelines

2 Avatar, media 16:9, supporting text and action buttons

Taken from Material design guidelines

3 Avatar, media 16:9 and action buttons

Taken from Material design guidelines

4 Media 16:9, primary text, subtext, actions and expandable supporting text

Taken from Material design guidelines

Taken from Material design guidelines

5 Primary text, subtext, supporting text and actions

Taken from Material design guidelines

6 Media 16:9 and actions

Taken from Material design guidelines

7 Media 1:1, primary text, subtext and actions

Taken from Material design guidelines

8 Media 1x, primary text, subtext and actions

Taken from Material design guidelines

9 Media 1.5x, primary text, subtext and actions

Taken from Material design guidelines

10 Media 2x, primary text, subtext and actions

Taken from Material design guidelines

11 Media 3x and actions

Taken from Material design guidelines

You can find source code for all the examples above on GitHub.