android-coil-compose
Master image loading in Jetpack Compose using Coil's AsyncImage component, painter variants, and subcomposition APIs. This skill covers sizing strategies, placeholder and error state handling, accessibility semantics, and list performance optimization to build stable, responsive image surfaces.
Android Coil Compose loads and displays remote images in Jetpack Compose using AsyncImage and painter APIs with accessible, performant patterns.
AI-generated summary based on this skill's SKILL.md
Install
krutikJain/android-agent-skills/android-coil-compose · repository language: Python
git clone https://github.com/krutikJain/android-agent-skills
cp -r android-agent-skills/skills/android-coil-compose ~/.claude/skills/android-coil-composeFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I load images in Jetpack Compose with Coil?
android-coil-compose enables remote image loading via Coil's AsyncImage composable. Pass a URL string to the model parameter, specify a contentDescription for accessibility, and optionally provide contentScale and modifier for layout control. AsyncImage handles network requests, caching, and lifecycle management automatically, making it the simplest approach for most image-loading scenarios in Compose.
What's the difference between AsyncImage, painter, and subcomposition APIs?
android-coil-compose offers three APIs for different needs. AsyncImage is the highest-level composable, ideal for straightforward image display. rememberAsyncImagePainter wraps the image as a Painter for use in Image() or other paint-accepting composables, useful when you need fine-grained control. SubcomposeAsyncImage defers composition until the image loads, enabling custom placeholder and error layouts without layout thrashing.
How can I implement accessible image loading with placeholders and error states?
android-coil-compose supports accessibility through contentDescription parameters on AsyncImage and Image composables. Use the contentScale parameter to maintain aspect ratios, and leverage SubcomposeAsyncImage's content lambda to define custom placeholder and error UI. Always provide meaningful contentDescription values; omit them only for purely decorative images using contentDescription = null.
How do I optimize image rendering performance in scrollable Compose lists?
android-coil-compose performs best in lazy columns when you use AsyncImage with appropriate sizing constraints and enable Coil's disk and memory caching. Avoid layout thrashing by setting fixed dimensions or using contentScale = ContentScale.Crop. For complex layouts, SubcomposeAsyncImage can defer composition until the image arrives, reducing frame drops during scrolling.
What are jetpack compose image loading best practices?
android-coil-compose best practices include: always set contentDescription for accessibility, use contentScale to control aspect ratio behavior, enable caching via Coil's network module configuration, set explicit size constraints to avoid layout shifts, and use SubcomposeAsyncImage in lists to defer composition. Avoid loading oversized images; resize on the server or use Coil's transformation APIs to reduce memory pressure.
When should I use SubcomposeAsyncImage instead of AsyncImage?
android-coil-compose's SubcomposeAsyncImage shines when you need custom placeholder or error UI that adapts to the final image size, or when you want to defer composition until the image loads to prevent layout thrashing in scrollable lists. Use standard AsyncImage for simple cases where a fixed layout and single placeholder suffice, as it has lower composition overhead.
SKILL.md
rendered from the published skill — quoted content, verbatim
Android Coil Compose
When To Use
- Use this skill when the request is about: coil compose image loading, asyncimage android compose, rememberasyncimagepainter android.
- Primary outcome: Use Coil in Jetpack Compose with
AsyncImage, painter variants, sizing, and accessible image loading patterns. - Reach for this skill when the work is specifically about image loading, placeholders, error states, sizing, or list performance in Compose.
- Read
references/patterns.mdfor theAsyncImagevs painter vs
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 6 files
skills/android-coil-compose/SKILL.md
skills/android-coil-compose/agents/openai.yaml
skills/android-coil-compose/references/official-links.md
skills/android-coil-compose/references/patterns.md
skills/android-coil-compose/references/scenarios.md
skills/android-coil-compose/scripts/run_examples.sh