coil-compose

Load images in Jetpack Compose with Coil's AsyncImage and ImageRequest.

119|14|Updated Mar 1, 2026
One-click install
npx skills add https://github.com/rcosteira79/android-skills --skill coil-compose-rcosteira79
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: coil-compose
Source: https://github.com/rcosteira79/android-skills/tree/main/skills/coil-compose
Command: npx skills add https://github.com/rcosteira79/android-skills --skill coil-compose-rcosteira79

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies and optimizes the process of loading and displaying images within Jetpack Compose UI, addressing common performance and implementation challenges.

Core Features & Use Cases

  • Efficient Image Loading: Utilizes Coil's AsyncImage for automatic size resolution and efficient bitmap handling.
  • Customizable States: Supports custom composables for loading, success, and error states using SubcomposeAsyncImage.
  • Painter Requirement: Provides rememberAsyncImagePainter for scenarios requiring a Painter object, with emphasis on explicit size configuration.
  • ImageRequest Configuration: Demonstrates how to configure ImageRequest for caching, transformations, and crossfading.
  • Hilt Integration: Shows how to set up a shared ImageLoader instance using Hilt for app-wide cache management.

Quick Start

Use the coil-compose skill to display an image from the URL 'https://example.com/image.jpg' using AsyncImage with a placeholder.

Frequently Asked Questions about coil-compose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load images from a URL in Jetpack Compose?

Load images in Jetpack Compose using Coil's `AsyncImage` composable, which handles automatic size resolution and efficient bitmap management for network URLs. It provides a straightforward way to display remote images without manual bitmap decoding.

What is the best way to handle loading and error states for image loading in Jetpack Compose?

Handle custom loading, success, and error states for image loading in Jetpack Compose using Coil's `SubcomposeAsyncImage`. This composable allows you to provide specific composables for each state, offering granular control over UI feedback during network requests.

When should I use rememberAsyncImagePainter instead of AsyncImage for Coil image loading?

Use `rememberAsyncImagePainter` for Coil image loading when your Jetpack Compose implementation requires a `Painter` object. You must explicitly configure its size to ensure proper bitmap loading and avoid performance issues.

How do I configure ImageRequest for caching and crossfading in Jetpack Compose?

Configure `ImageRequest` in Jetpack Compose to apply caching, transformations, and crossfading for Coil image loading. This setup allows fine-tuning of how images are fetched, processed, and displayed within your UI components.

Does Coil work with Hilt for shared ImageLoader instance management?

Coil integrates with Hilt to set up a shared `ImageLoader` instance for Jetpack Compose applications. This enables app-wide image cache management and consistent memory optimization across different composables.

What are the performance considerations for loading images inside lazy lists in Jetpack Compose?

Performance considerations for image loading in Jetpack Compose lazy lists involve selecting appropriate Coil components like `AsyncImage` to ensure efficient bitmap handling. Proper component selection prevents memory leaks and scroll jank.