Display images Collection
Image( painter = painterResource(id = R.drawable.dog), contentDescription = stringResource(id = R.string.dog_content_description) )
Load and display an image
@Composable fun AnimatedVectorDrawable() { val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated) var atEnd by remember { mutableStateOf(false) } Image( painter = rememberAnimatedVectorPainter(image, atEnd), contentDescription = "Timer", modifier = Modifier.clickable { atEnd = !atEnd }, contentScale = ContentScale.Crop ) }
Display an animated image
class OverlayImagePainter constructor( private val image: ImageBitmap, private val imageOverlay: ImageBitmap, private val srcOffset: IntOffset = IntOffset.Zero, private val srcSize: IntSize = IntSize(image.width, image.height), private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height) ) : Painter() { private val size: IntSize = validateSize(srcOffset, srcSize) override fun DrawScope.onDraw() { // Draw the first image without any blend mode. drawImage( image, srcOffset, srcSize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ) ) drawImage( imageOverlay, srcOffset, overlaySize, dstSize = IntSize( this@onDraw.size.width.roundToInt(), this@onDraw.size.height.roundToInt() ), blendMode = BlendMode.Overlay ) } // See the guide for all the code }
Display layered images on a canvas
val hexagon = remember { RoundedPolygon( 6, rounding = CornerRounding(0.2f) ) } val clip = remember(hexagon) { RoundedPolygonShape(polygon = hexagon) } Box( modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center ) { Image( painter = painterResource(id = R.drawable.dog), contentDescription = "Dog", contentScale = ContentScale.Crop, modifier = Modifier .graphicsLayer { this.shadowElevation = 6.dp.toPx() this.shape = clip this.clip = true this.ambientShadowColor = Color.Black this.spotShadowColor = Color.Black } .size(200.dp) ) }
Display an image clipped to a shape
5 quick animations
7 minutes
These 5 quick and easy animations can help make your app come to life in just a few minutes. Make your Compose app stand out even if you don't have the time to learn everything there is to know about animations.
Intro to drawing
9 minutes
After you're comfortable working in Compose, you might want to start drawing your own custom components. This video covers how to get started with custom drawing.
Animation in Compose
5 minutes
See how to animate state values, using transitions, animating visibility or size changes and simple crossfades by using the Compose animation APIs.
Draw ClickableText in Compose
5 minutes
See how to use Compose APIs specifically designed to draw text on a canvas. This segment shows the code to draw an emoji font in a rounded rectangle.
Draw text in Compose
2 minutes
See how to use Compose APIs specifically designed to draw text on a canvas. This segment shows the code to draw an emoji font in a rounded rectangle.