Android Media & Image Excellence 🎞️🖼️
Professional strategies for high-performance image loading, video streaming, and media management in modern Android applications.
⚡ When to Use
- Image Loading: Performance-first loading with Coil (Compose-native).
- Video Playback: Streaming using ExoPlayer or the new Media3 library.
- Media Management: Displaying local media (Photos/Videos) with proper metadata.
- Image Optimization: Sizing, Caching, and format support (WebP, AVIF).
- Audio Playback: Playing background music or voice notes.
🖼️ Image Loading with Coil (The Android Standard)
- Rule: ALWAYS use Coil for Compose. It's lightweight, efficient, and uses Coroutines.
- Rule: NEVER load the full image if displayed in a small box. Use
size(Size.ORIGINAL)or explicitsize().
1. The AsyncImage Composable
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data(url)
.crossfade(true)
.placeholder(R.drawable.loading)
.error(R.drawable.error)
.build(),
contentDescription = null,
modifier = Modifier.clip(CircleShape)
)
2. Best Practices
- Disk Caching: Ensure
ImageLoaderis configured to cache properly. - Memory Caching: Control cache size for apps with many images.
- SVGs: Use
SvgDecoderfor sharp, vector-based illustrations.
🎥 Video Playback (Media3 / ExoPlayer)
- Rule: Use the Media3 library as the modern wrapper for ExoPlayer.
- Lifecycle: Ensure the player is released in
onDisposeto avoid memory leaks and battery drain.
1. Basic Player Setup
val exoPlayer = remember {
ExoPlayer.Builder(context).build().apply {
setMediaItem(MediaItem.fromUri(url))
prepare()
}
}
AndroidView(
factory = { ctx ->
PlayerView(ctx).apply {
player = exoPlayer
}
},
update = { _ -> },
modifier = Modifier.fillMaxWidth()
)
🚀 Media Optimization Checklist
- Format Support: Prefer WebP or AVIF over JPEG for small payloads.
- Bitmap Downsampling: Only load the necessary resolution into memory.
- Hardware Acceleration: Enable hardware decoding for 4K/HDR videos.
- Placeholder strategy: Use unified placeholders for a smoother UI.
📏 UI Performance & UX
- Shimmer Loading: Use a themed shimmer effect (skeleton) while media is loading.
- Error States: Always provide a "Retry" button or clear error icon for failed media.
- Audio Focus: Ensure your app respects other audio sources (Pause media when music starts elsewhere).
🧪 Testing and Verification
- Slow Network Testing: Use ADB or a proxy to test UI behavior under poor network conditions.
- Memory Profiler: Verify that media is being cleared from the heap when screens are closed.
- Accessibility: Provide
contentDescriptionfor all meaningful images.