Image for post
Image for post

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

Image for post
Image for post
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

Image for post
Image for post
Taken from Material design guidelines

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

Image for post
Image for post
Taken from Material design guidelines
Image for post
Image for post
Taken from Material design guidelines

5 Primary text, subtext, supporting text and actions

Image for post
Image for post
Taken from Material design guidelines

6 Media 16:9 and actions

Image for post
Image for post
Taken from Material design guidelines

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

Image for post
Image for post
Taken from Material design guidelines

8 Media 1x, primary text, subtext and actions

Image for post
Image for post
Taken from Material design guidelines

9 Media 1.5x, primary text, subtext and actions

Image for post
Image for post
Taken from Material design guidelines

10 Media 2x, primary text, subtext and actions

Image for post
Image for post
Taken from Material design guidelines

11 Media 3x and actions

Image for post
Image for post
Taken from Material design guidelines

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


Image for post
Image for post

This article shows how to set the Bitmap into ImageView to keep ratio 16:9.

Since PercentFrameLayout and PercentRelativeLayout were deprecated in API level 26.0.0, I’d suggest you to consider using of ConstraintLayout to keep ratio 16:9 for your ImageView.

ConstraintLayout is really powerful tool to build Responsive UI for Android platform, you can find more details here Build a Responsive UI with ConstraintLayout.

Here is the example how to build your ImageView into ConstraintLayout to keep 16:9 ratio:

Or instead of editing your XML file, edit your layout directly in Layout Editor:

Image for post
Image for post

About

Eugene Brusov

Lead iOS and Android developer at eugenebrusov.com CEO at apploo (http://apploo-mobile.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store