Skip to main content
Android UI Design with Kotlin
CHAPTER 06 Beginner

Working with Images, Icons, and Cards

Updated: May 31, 2026
5 min read

# CHAPTER 6

Working with Images, Icons, and Cards

1. Introduction

Visual elements like images, icons, and cards are the heartbeat of modern app design. A wall of text is boring, but a well-placed image or a beautifully elevated card can instantly make an app feel premium and engaging. In this chapter, we will explore how to display images using ImageView, incorporate scalable vector icons, and group content into elegant, elevated surfaces using MaterialCardView.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Display images in your app using ImageView and scaleType.
  • Import and use scalable vector assets for sharp, lightweight icons.
  • Understand elevation and drop shadows in Material Design.
  • Use MaterialCardView to create beautiful, rounded UI components.
  • Build a real-world Ecommerce Product Card.

3. ImageView Basics

The ImageView component is used to display images (like PNGs, JPEGs, or WebP) or vector graphics.

#### Scale Types Because screen sizes vary, your image might not perfectly fit its ImageView container. The android:scaleType attribute dictates how the image adapts:

  • centerCrop: Scales the image uniformly so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view. It crops the excess. (Highly recommended for profile pictures and hero images).
  • fitCenter: Scales the image uniformly to fit inside the view without cropping, centering it.
  • centerInside: Centers the image inside the view, shrinking it if it's larger than the view.

xml
12345 
<ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:src="@drawable/sample_image"
    android:scaleType="centerCrop" />

4. Vector Assets and Icons

Instead of using multiple PNG files for different screen densities, Android allows you to use VectorDrawables (XML files based on SVG).
  • They scale perfectly without losing quality.
  • They have a tiny file size.
  • You can easily change their color (tint) using android:tint.

How to add an icon in Android Studio: Right-click on the res/drawable folder -> New -> Vector Asset -> Click the "Clip Art" icon to choose from hundreds of built-in Material icons.

5. MaterialCardView

A Card is a sheet of material that serves as an entry point to more detailed information. Cards have rounded corners and an elegant drop shadow (elevation). To use it, ensure you are using the Material Components theme.

Key properties of MaterialCardView:

  • app:cardCornerRadius: Defines how round the corners are.
  • app:cardElevation: Defines the height of the drop shadow.
  • app:strokeColor & app:strokeWidth: For outlined cards.

6. Mini Project: Ecommerce Product Card UI

Let's combine MaterialCardView, ImageView, and TextView to create a beautiful product card.
xml
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="160dp"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="12dp"
    app:cardElevation="6dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Product Image -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:src="@drawable/placeholder_shoes"
            android:scaleType="centerCrop" />

        <!-- Product Details Container -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="12dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Running Shoes"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="#212121"
                android:maxLines="1"
                android:ellipsize="end" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="$89.99"
                android:textSize="14sp"
                android:textColor="#388E3C"
                android:textStyle="bold"
                android:layout_marginTop="4dp" />

        </LinearLayout>
    </LinearLayout>

</com.google.android.material.card.MaterialCardView>

7. Design Principles

  • Use High-Quality Assets: Low-resolution images ruin even the best layouts.
  • Consistent Corner Radii: If your cards have an 8dp corner radius, ensure your dialogs and buttons follow a similar visual language.
  • Subtle Elevation: Avoid excessive elevation (shadows). Elevation implies hierarchy; use it to show that a card is "lifted" above the background, not floating in outer space.

8. Common Mistakes

  • Oversized Images: Loading massive 4K images into a tiny ImageView without resizing them programmatically can cause OutOfMemory errors and crash your app.
  • Missing scaleType: Failing to define a scale type often results in awkward white spaces around your image.

9. Best Practices

  • Use Vector Assets for all flat icons. Use WebP or highly compressed JPEGs for photos.
  • Use app:tint to colorize icons dynamically to support Light/Dark mode transitions seamlessly.

10. Exercises

  1. 1. Create a MaterialCardView with a thick blue stroke outline instead of a drop shadow.
  1. 2. Change the scaleType of an ImageView from centerCrop to fitCenter and observe the difference.

11. UI Design Challenges

Challenge: Design a "Music Track" item. It should be a horizontal MaterialCardView. On the left, display the album art (ImageView). Next to it, stack the Song Title and Artist Name. On the far right, add a Vector Asset icon of a "Play" button.

12. MCQ Quiz with Answers

Question 1

Which scaleType ensures the image completely fills the ImageView without distorting its aspect ratio, but may crop the edges?

Question 2

What is the main advantage of using Vector Assets over PNGs for icons?

13. Interview Questions

  • Q: What causes an OutOfMemory error in Android, and how can ImageView contribute to it?
  • Q: Explain the concept of Elevation in Material Design.
  • Q: How do VectorDrawables work under the hood in Android?

14. FAQs

Q: How do I load images from a URL/Internet into an ImageView? A: You should not do this manually. Instead, use a powerful third-party image loading library like Glide or Coil. They handle downloading, caching, and memory management automatically!

15. Summary

In this chapter, we learned how to elevate our UI—literally and figuratively. We explored ImageView and its vital scaleType attribute, transitioned to scalable Vector Assets for icons, and learned how to group content beautifully using MaterialCardView with rounded corners and drop shadows.

16. Next Chapter Recommendation

Cards and linear layouts are great, but as designs get more complex, nesting layouts hurts performance. Next, we will unlock the ultimate tool for complex, flat UI hierarchies in Chapter 7: ConstraintLayout Mastery.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter TextView, Buttons, and Input Fields
Next Chapter ConstraintLayout Mastery

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5