Using Icons, Images, and Vector Drawables in Android

Course: Android App Development

Topic: Using Icons, Images, and Vector Drawables

Course Link: Android App Development Course

Demo Link: Register for a Course Demo

Website: JustAcademy

1. Introduction

Icons, images, and vector drawables are essential components of Android user interface development. They improve visual appearance, communicate actions, support navigation, and make applications easier to understand.

Android supports bitmap images, drawable resources, XML vector graphics, and Material icons. Developers can display these assets using traditional XML layouts and Kotlin or through Jetpack Compose.

2. Learning Objectives

• Understand icons, bitmap images, and drawable resources.
• Organize visual assets inside Android resource directories.
• Display images using ImageView and Compose Image.
• Create and use VectorDrawable resources.
• Apply image tinting, cropping, scaling, and alignment.
• Use icons in buttons, app bars, and navigation components.
• Optimize images for screen density and performance.
• Apply accessibility best practices.

3. Understanding Icons, Images, and Drawables

3.1 Icons

An icon is a small visual symbol representing an action or concept. Examples include search, home, settings, delete, favorite, and notification icons.

3.2 Images

Images are visual assets such as photographs, product pictures, profile pictures, illustrations, and banners. Common formats include PNG, JPEG, and WebP.

3.3 Drawable Resources

A drawable is an Android resource that can be rendered on the screen. It may be a bitmap, vector graphic, shape, selector, layer list, or other visual definition.

4. Organizing Android Image Resources

Android stores application resources inside the res directory.

app/src/main/res/
├── drawable/
│   ├── ic_home.xml
│   ├── ic_search.xml
│   └── rounded_background.xml
├── drawable-mdpi/
├── drawable-hdpi/
├── drawable-xhdpi/
├── drawable-xxhdpi/
├── drawable-xxxhdpi/
├── mipmap-mdpi/
├── mipmap-hdpi/
└── mipmap-xxxhdpi/

The drawable directory commonly stores vector graphics, shapes, and other drawable resources. Density-specific directories can contain bitmap versions optimized for different screen densities. Mipmap resources are commonly used for launcher icons.

4.1 Screen Density

Android can select suitable density-specific bitmap resources for a device. Vector drawables are useful for simple icons because they scale without the pixelation commonly seen when enlarging bitmap images.

5. Common Image Formats

Choose a format based on image complexity, quality requirements, transparency, and file size. Vector graphics are not a replacement for photographs.

6. Displaying Images Using ImageView

ImageView is a standard Android View component used to display drawable resources and bitmap images.

6.1 Add an Image Resource

Place an image named course_banner.png inside an appropriate drawable resource directory.

6.2 Create an ImageView in XML

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/courseImage"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:src="@drawable/course_banner"
    android:contentDescription="Android course banner"
    android:scaleType="centerCrop" />

6.3 Important Attributes

6.4 Load an Image Using Kotlin

val courseImage =
    findViewById<ImageView>(R.id.courseImage)

courseImage.setImageResource(
    R.drawable.course_banner
)

The setImageResource() method updates the ImageView using a drawable resource identifier.

7. Understanding Image Scaling

The scaleType attribute determines how an image is positioned and scaled within an ImageView.

Use centerCrop for profile pictures and image cards where filling the area is important. Use fitCenter when the entire image must remain visible.

8. Understanding Vector Drawables

8.1 What Is a Vector Drawable?

A VectorDrawable is an XML-defined graphic that describes shapes using paths, coordinates, and color information. Unlike a bitmap, it does not store the image as a fixed grid of pixels. Android renders its paths at the requested size, making it suitable for scalable interface graphics.

Official documentation: Android Vector Drawables Overview.

8.2 Advantages

• Scale cleanly across different display sizes.
• Reduce the need for multiple bitmap versions of simple icons.
• Support path-based shapes and colors.
• Can be maintained as XML resources.
• Can support animation through compatible animated vector resources.

8.3 Limitations

• Photographs and highly detailed artwork are generally better suited to bitmap formats.
• Complex vector paths can increase rendering cost.
• Older Android versions may require appropriate compatibility support.
• Imported SVG features may need adjustment when converted to Android vector XML.

9. Creating a Vector Drawable in Android Studio

1. Open the Android project.
2. Right-click the res/drawable directory.
3. Select New → Vector Asset.
4. Choose an available clip-art icon or import a supported SVG file.
5. Configure the asset name and available visual settings.
6. Click Finish to generate the XML resource.
7. Reference the drawable using @drawable/your_icon in XML.

Android Studio's Vector Asset Studio converts supported vector assets into Android-compatible drawable resources.

10. Creating a Vector Drawable Manually

10.1 Example: Home Icon

Create a file named ic_home.xml in the res/drawable directory.

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#000000"
        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z" />
</vector>

10.2 Understanding Vector Attributes

10.3 Understanding the Viewport

The drawable's width and height define its intrinsic display dimensions. The viewport defines the coordinate system used by its paths. Android maps the viewport to the drawable's dimensions when rendering the image.

11. Displaying Vector Drawables

After creating the vector resource, reference it from an ImageView.

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:padding="12dp"
    app:srcCompat="@drawable/ic_home"
    android:contentDescription="Home" />

Using app:srcCompat with the appropriate AndroidX AppCompat setup is a useful compatibility option for vector drawable resources. Check your project's minimum SDK and resource configuration.

11.1 Load a Vector Drawable Using Kotlin

val homeIcon =
    findViewById<ImageView>(R.id.homeIcon)

homeIcon.setImageResource(
    R.drawable.ic_home
)

12. Applying Tint to Icons

Tinting changes the displayed color of a drawable without requiring a separate resource file for every color variation. It is especially useful for monochrome interface icons.

12.1 Tint in XML

<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_home"
    android:tint="#1565C0"
    android:contentDescription="Home" />

12.2 Tint in Kotlin

import android.content.res.ColorStateList
import androidx.core.content.ContextCompat
import android.widget.ImageView

val icon = findViewById<ImageView>(R.id.homeIcon)

icon.imageTintList = ColorStateList.valueOf(
    ContextCompat.getColor(this, R.color.primary)
)

Define the primary color in your project's color resources. Prefer theme-aware colors when supporting light and dark themes.

13. Using Icons in Buttons and App Bars

Icons commonly appear in buttons, toolbars, navigation controls, and Floating Action Buttons.

13.1 Create an ImageButton

<ImageButton
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/searchButton"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_search"
    android:background="?attr/selectableItemBackgroundBorderless"
    android:contentDescription="Search" />

13.2 Handle the Click Event

val searchButton =
    findViewById<ImageButton>(R.id.searchButton)

searchButton.setOnClickListener {
    // Open the search screen
}

13.3 Best Practices

• Use familiar icons for common actions.
• Keep icon sizes and visual styles consistent.
• Provide meaningful accessibility descriptions for icon-only controls.
• Maintain sufficient contrast against the background.
• Ensure touch targets are large enough to use comfortably.
• Connect interactive icons to meaningful application actions.

14. Using Images and Icons in Jetpack Compose

Jetpack Compose provides the Image and Icon composables for displaying visual resources.

14.1 Display a Drawable Image

@Composable
fun CourseImage() {
    Image(
        painter = painterResource(
            id = R.drawable.course_banner
        ),
        contentDescription = "Android course banner",
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp),
        contentScale = ContentScale.Crop
    )
}

14.2 Display a Vector Icon

@Composable
fun HomeIcon() {
    Icon(
        painter = painterResource(
            id = R.drawable.ic_home
        ),
        contentDescription = "Home",
        tint = MaterialTheme.colorScheme.primary
    )
}

14.3 Use a Material Icon

@Composable
fun SearchAction(
    onSearchClick: () -> Unit
) {
    IconButton(onClick = onSearchClick) {
        Icon(
            imageVector = Icons.Default.Search,
            contentDescription = "Search"
        )
    }
}

Import the appropriate Compose UI, Material, and icon packages. Some icons require the extended Material icons dependency. Custom vector resources can be loaded with painterResource.

14.4 Important Compose Parameters

15. Understanding ContentScale in Compose

16. Creating Shape Drawables

Shape drawables define simple backgrounds using XML. They can create rounded rectangles, borders, and solid-color surfaces without requiring separate bitmap files.

16.1 Rounded Background Example

Create rounded_background.xml inside res/drawable.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#E3F2FD" />
    <corners android:radius="12dp" />
    <stroke
        android:width="1dp"
        android:color="#1565C0" />
    <padding
        android:left="12dp"
        android:top="12dp"
        android:right="12dp"
        android:bottom="12dp" />
</shape>

Apply the drawable as the background of a suitable View. This approach is useful for simple cards, badges, and decorative containers.

17. Image Optimization and Performance

• Resize large images to appropriate display dimensions.
• Choose compression formats according to visual quality requirements.
• Use vector drawables for simple scalable icons.
• Avoid loading unnecessarily large bitmap images into small views.
• Use a suitable image-loading library for remote images.
• Use efficient list components when displaying many images.
• Keep launcher icons in suitable mipmap resources.
• Test visual quality and memory usage on representative devices.

18. Accessibility Best Practices

• Provide meaningful descriptions for important images.
• Use a null content description for purely decorative images when appropriate.
• Give icon-only buttons accessible names.
• Maintain sufficient color contrast.
• Do not rely exclusively on images to communicate essential information.
• Ensure icons are easy to recognize and controls are easy to tap.
• Test with TalkBack and Android accessibility tools.

19. Common Problems and Solutions

20. Practical Exercises

Exercise 1: Display a Profile Image

• Add a profile image to drawable resources.
• Display it using ImageView.
• Apply centerCrop scaling.
• Provide a suitable content description.

Exercise 2: Create a Search Icon

• Generate a search vector drawable.
• Display it inside an ImageButton.
• Apply a theme-based tint.
• Implement its click action.

Exercise 3: Create a Custom Vector

• Create a home icon using vector XML.
• Experiment with path coordinates and colors.
• Display the icon at different sizes.
• Verify that its edges remain sharp.

Exercise 4: Build a Course Card

• Display a course banner.
• Add a vector icon for course information.
• Show a title and description.
• Apply suitable spacing and image scaling.

21. Mini Project: Android Learning Dashboard

Objective: Create a learning dashboard combining bitmap images, vector icons, and drawable backgrounds.

Requirements

1. Create a dashboard screen with a course banner.
2. Display at least three course cards with images and titles.
3. Add vector icons for search, favorite, and profile actions.
4. Use shape drawables or Compose shapes for backgrounds.
5. Implement a click event for an interactive icon.
6. Ensure images display correctly on different screen sizes.
7. Add accessibility descriptions to meaningful images and controls.
8. Test light and dark themes.

Expected Outcome

The dashboard should use consistent imagery, scalable icons, and readable content. Users should be able to identify key actions and navigate the interface easily.

22. Interview Questions and Answers

Q1. What is a drawable in Android?

A drawable is a resource that Android can render on the screen, such as a bitmap, vector graphic, or shape definition.

Q2. What is a VectorDrawable?

A VectorDrawable is an XML-defined graphic that uses paths and shapes to create scalable visual content.

Q3. What is the difference between bitmap and vector graphics?

Bitmap graphics store pixel-based image data and work well for photographs. Vector graphics describe paths and shapes and are well suited to scalable icons.

Q4. What is ImageView?

ImageView is a standard Android View used to display images and drawable resources.

Q5. What is the purpose of mipmap resources?

Mipmap resources are commonly used for launcher icons and their density-specific variants.

Q6. What is image tinting?

Image tinting changes the displayed color of a drawable, particularly useful for monochrome icons.

Q7. What are viewportWidth and viewportHeight?

They define the internal coordinate system used by a vector drawable's paths.

Q8. How do you crop an image in Android?

Use an appropriate ImageView scale type such as centerCrop or Compose ContentScale.Crop.

Q9. Why should images be optimized?

Optimization reduces unnecessary storage and memory consumption and can improve loading performance.

Q10. How can icons be made accessible?

Provide meaningful content descriptions, maintain sufficient contrast, and ensure interactive controls have comfortable touch targets.

23. Quick Revision Checklist

• Understand icons, bitmaps, and drawable resources.
• Know the purpose of drawable and mipmap directories.
• Understand density-specific bitmap resources.
• Display images using ImageView and Compose Image.
• Choose appropriate image scaling and cropping behavior.
• Create vector drawables using Android Studio.
• Understand vector paths and viewport coordinates.
• Apply tinting to suitable icons.
• Use Material icons or custom vector assets in Compose.
• Optimize image resources and check accessibility.

24. Conclusion

Icons, images, and vector drawables are fundamental elements of modern Android interfaces. Bitmap images are appropriate for photographs and detailed visuals, while vector drawables are useful for scalable icons and illustrations. Shape drawables also help developers create reusable backgrounds without additional image files.

By understanding resource management, ImageView, Compose image components, vector paths, tinting, image scaling, and accessibility, developers can create Android applications that are attractive, efficient, and easy to use.

Additional Learning Resources

• Explore the Android App Development Course
• Register for a Course Demo
• Visit JustAcademy
• Official Android Vector Drawables Documentation