You can blend or overlay source images to display layered images on a canvas. For example, you can replicate how the Android Framework generates app icons by combining separate background and foreground drawables.

• HowTo

Create a paging list so that users can scroll to access content too large to fit on a single screen. Horizontal paging lists can help users navigate through content such as images, slideshows, or product carousels. Vertical paging lists are useful for content-heavy apps where users may need to scroll through a large number of items, such as articles.

• HowTo

You can animate, character-by-character, the appearance of text, so it looks like a streaming typing effect.

• HowTo

To display images in your app for content and for responses to user actions, load the images from the disk or from an external source on the internet.

• HowTo

A floating action button lets the user perform a primary action in the app.

• HowTo

Scrollable lists can help manage datasets, create responsive designs, and facilitate navigation. To display a finite set of items in your app, you can create a scrollable list using the `verticalScroll` or `horizontalScroll` modifiers.

• HowTo

Use the Paging library to support large lists of items—including an infinite list—in your app by loading and displaying data incrementally. With lazy loading, you can reduce initial load times and optimize memory usage, enhancing performance.

• HowTo

You can style parts of text to improve readability, increase positive user experience, and encourage greater creativity through use of colors and fonts.

• HowTo

Create a top app bar to help users navigate and access functions in your app, using the TopAppBar composable.

• HowTo

You can display nested scrolling items within a list to present complex layouts, such as product catalogs, media galleries, news feeds, and more. Presenting content in this way can enhance the usability of your app, making it easier for users to navigate.

• HowTo

A button triggers a specific action.

• HowTo

You can display a button to let a user snap scroll to a specific point in a list, saving time and increasing user engagement.

• HowTo

A progress indicator shows the status of an operation.

• HowTo

You can draw shadows around the clipped area of the image so that you can display an image in the shape of a clip.

• HowTo

You can auto format a phone number in a text field to save time and increase user engagement, productivity, and efficiency.

• HowTo

Dialogs display pop-up messages or request user input on a layer above the main app content.

• HowTo

You can validate input as the user types in a text field, such as entering a name, email, address, or other contact information. This validation reduces errors and saves your users time.

• HowTo

You can manage large datasets and dynamic content with lazy grids, improving app performance. With lazy grid composables, you can display items in a scrollable container, spanned across multiple columns or rows.

• HowTo

A chip component visually represents complex entities, often with an icon and a label.

• HowTo

A scaffold provides holds together different parts of the UI, such as app bars and floating action buttons, giving apps a coherent look and feel.

• HowTo

You can use a list with multiple item types to display mixed content types such as text, images, and interactive elements.

• HowTo

A range slider lets users make selections from a range of values.

• HowTo

You can filter through a list of strings based on text input to dynamically update a list based on user search queries.

• HowTo

Create a bottom app bar to help users navigate and access functions in your app.

• HowTo

Using page indicators, you can help your users understand their current position within your app's content, providing a visual indication of progress.

• HowTo

A bottom sheet shows secondary content at the bottom of the screen.

• HowTo

A navigation drawer is a slide-in navigation menu.

• HowTo

A card provides a Material Design container for your UI.

• HowTo

You can use a toggle switch to let users choose one of two states.

• HowTo

An app bar is a container at the top or bottom of the screen that contains key features and navigation items.

• HowTo

You can support multiple links in a single string of text to give users options where to go and increase engagement.

• HowTo

A snackbar shows a brief notification at the bottom of the screen.

• HowTo

You can create an icon to hide or show a password based on a user toggle to improve security and enhance the user experience.

• HowTo

You can create a more interactive and engaging user experience in your app by loading a drawable file to display animated images. Animated images are useful for creating loading indicators, success or error indicators, facilitating game development, and various other UI functions.

• HowTo

Parallax scrolling is a technique in which the background content and foreground content scroll at different speeds. You can implement this technique to enhance your app's UI, creating a more dynamic experience as your users scroll.

• HowTo

Enable your app to support an optimized user experience on tablets, foldables, and ChromeOS devices.

• HowTo

Use these Quick Guides to create a home screen scaffold, which can help give your app's home screen a coherent look and feel.

• HowTo
• Video

Work with images onscreen using a vector, bitmap, or directly drawing with a canvas on screen.

• HowTo
• Video

Learn how insets communicate to your app where system decorations are placed, and how Compose APIs help your content automatically move with the system bars, software keyboard, and the taskbar. Don't be afraid to go edge-to-edge!

• Video

Choose the right component for your UI and see how to implement it in your app.

• HowTo

Reject accidental stylus palm touches.

• HowTo

Manage the state of a WebView across configuration changes.

• HowTo

See how to animate state values, using transitions, animating visibility or size changes and crossfades by using the Compose animation APIs.

• Video

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.

• Video

This series of videos introduces various Compose APIs, quickly showing you what's available and how to use them.

• Video

Learn how state flows through your Compose-based app and how the framework can automatically update UI to display new values. See how to create observable states, how to retain state across recompositions or configuration changes, and how to structure your composables for optimal data flow.

• Video

Maintain RecyclerView state during configuration changes.

• HowTo

Explore Compose's Lazy components that make it easy to display lists of items. Learn how to show different item types and even how to implement sticky headers. See how to programmatically control or react to the scroll-position changes.

• Video

Add accessibility features to your app. See how to increase your app's reach and versatility with a small amount of work.

• Video

A look into debugging a performance issue in Jetsnack and how to fix it in Jetpack Compose. Learn why deferring state reads by using a lambda means composition can be skipped.

• Video

Learn how to manage detachable keyboard configuration changes.

• HowTo

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.

• Video

Build your first Jetpack Compose tests. Learn how to use Compose's testing artifacts to write UI tests, use test rules, finders, and assertions.

• Video

See how to build complex designs for your Compose layouts, focusing on layout phase and constraints, subcompose layouts, and intrinsic measurements.

• Video

Compose gives you a simpler and more-performant way of creating scrolling lists, using fewer lines of code than RecyclerView. Learn how to use lazy layouts to create lists that let add content to lists, on demand.

• Video

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.

• Video

Enhance your app's usability and aesthetic appeal by customizing the way it displays text.

• HowTo
• Video

Display and arrange collections of items efficiently with lists and grids.

• HowTo
• Video

Make your app interactive by enabling users to enter text and other inputs.

• HowTo

Restrict app orientation on small screens but not on large screens.

• HowTo