Material 3 Carousels

Overview

Carousels display a collection of items that scroll into or out of view.

Material 3 Carousels, built on RecyclerView with CarouselLayoutManager and MaskableFrameLayout, support four strategies: Multi-browse, Uncontained, Hero (start or center-aligned), and Full-screen. They emphasize visuals with optional text, using masking for stylized transitions. This guide covers implementation, accessibility, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use RecyclerView with CarouselLayoutManager
• Apply MaskableFrameLayout for item masking
• Use Theme.Material3.* for styling

Accessibility

• Set android:contentDescription on item content (e.g., images)
• Ensure items are focusable for accessibility services like TalkBack
• Use CarouselSnapHelper for clear navigation

Behavior and Configuration

• Configure strategies (MultiBrowseCarouselStrategy, HeroCarouselStrategy, etc.)
• Enable snapping with CarouselSnapHelper
• Adjust item sizes via MaskableFrameLayout width
• Handle mask changes with OnMaskChangedListener

      
val recyclerView = findViewById<RecyclerView>(R.id.carousel_recycler_view)
recyclerView.layoutManager = CarouselLayoutManager(MultiBrowseCarouselStrategy())
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(recyclerView)
(recyclerView.getChildAt(0) as MaskableFrameLayout).setOnMaskChangedListener { maskRect ->
    // Handle mask size changes
}
      
    

Carousel Strategies

• Multi-browse: Quick browsing with varied item sizes
• Uncontained: Fixed-size items, partially visible at edges
• Hero: Highlights large content, start or center-aligned
• Full-screen: Single item fills the container

Multi-browse Carousel

• Shows large, medium, and small items for quick browsing
• Ideal for thumbnail galleries

Example

      
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/carousel_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="196dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"/>
      
    

      
<!-- res/layout/carousel_item.xml -->
<com.google.android.material.carousel.MaskableFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/carousel_item_container"
    android:layout_width="150dp"
    android:layout_height="match_parent"
    android:layout_marginStart="4dp"
    android:layout_marginEnd="4dp"
    android:foreground="?attr/selectableItemBackground"
    app:shapeAppearance="?attr/shapeAppearanceCornerExtraLarge">
    <ImageView
        android:id="@+id/carousel_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/image_desc"
        android:scaleType="centerCrop"/>
</com.google.android.material.carousel.MaskableFrameLayout>
      
    

      
val recyclerView = findViewById<RecyclerView>(R.id.carousel_recycler_view)
recyclerView.layoutManager = CarouselLayoutManager(MultiBrowseCarouselStrategy())
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(recyclerView)
      
    

Multi-browse Carousel Anatomy

Component	Description	Behavior
Container	RecyclerView, holds items	Scrolls horizontally, 196dp height
Large Item	Primary MaskableFrameLayout, e.g., 150dp width	Fully unmasked at start
Medium Item	Smaller MaskableFrameLayout	Partially masked, mid-scroll
Small Item	Smallest MaskableFrameLayout	Heavily masked, near edges

Hero Carousel

• Highlights large content, start or center-aligned
• Ideal for movies or media

Example

      
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/carousel_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="196dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"
    app:carousel_alignment="center"/>
      
    

      
val recyclerView = findViewById<RecyclerView>(R.id.carousel_recycler_view)
recyclerView.layoutManager = CarouselLayoutManager(HeroCarouselStrategy())
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(recyclerView)
(recyclerView.getChildAt(0) as MaskableFrameLayout).setOnMaskChangedListener { maskRect ->
    // Handle mask size changes
}
      
    

Hero Carousel Anatomy

Component	Description	Behavior
Container	RecyclerView, holds items	Scrolls horizontally, 196dp height
Large Item	Focal MaskableFrameLayout, e.g., 150dp width	Fully unmasked, centered or start-aligned
Small Item	Smaller MaskableFrameLayout	Heavily masked, adjacent to focal item

Full-screen Carousel

• Shows one full-size item at a time
• Ideal for vertical portrait layouts

Example

      
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/carousel_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"
    android:orientation="vertical"/>
      
    

      
val recyclerView = findViewById<RecyclerView>(R.id.carousel_recycler_view)
recyclerView.layoutManager = CarouselLayoutManager(FullScreenCarouselStrategy(), RecyclerView.VERTICAL)
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(recyclerView)
      
    

Full-screen Carousel Anatomy

Component	Description	Behavior
Container	RecyclerView, fills screen	Scrolls vertically, full height
Large Item	Single MaskableFrameLayout, full size	Fully unmasked, fills container

Uncontained Carousel

• Fixed-size items, partially visible at edges
• Ideal for maintaining aspect ratios

Example

      
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/carousel_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="196dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    app:layoutManager="com.google.android.material.carousel.CarouselLayoutManager"/>
      
    

      
val recyclerView = findViewById<RecyclerView>(R.id.carousel_recycler_view)
recyclerView.layoutManager = CarouselLayoutManager(UncontainedCarouselStrategy())
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(recyclerView)
      
    

Uncontained Carousel Anatomy

Component	Description	Behavior
Container	RecyclerView, holds items	Scrolls horizontally, 196dp height
Large Item	MaskableFrameLayout, fixed size	Partially visible at edges, no size alteration

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Carousel	android:orientation	setOrientation	horizontal	Sets scroll direction
Carousel	app:carouselAlignment	setCarouselAlignment	start	Sets focal item alignment
Item	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraLarge	Sets item corner shape
Item	android:layout_width	N/A	N/A (e.g., 150dp)	Sets unmasked item width

Theming Carousels

• Customize item shape via shapeAppearance
• Adjust sizes via RecyclerView and MaskableFrameLayout

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="shapeAppearanceCornerExtraLarge">@style/ShapeAppearance.App.Large</item>
</style>
<style name="ShapeAppearance.App.Large" parent="ShapeAppearance.Material3.Corner.Large">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">24dp</item>
</style>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Carousels
• Covers design, behavior, theming specifications
• Includes accessibility and masking behavior
• Refer to Material Design documentation for full details

FAQ

What is a Material 3 Carousel?

• A RecyclerView-based component for scrolling items

---

How many strategies are there?

• Four strategies: Multi-browse, Hero, Full-screen, Uncontained

---

When to use the Hero Strategy?

• Use for highlighting large content like movies

---

How to make carousels accessible?

• Set content descriptions; ensure focusable navigation

---

Can I customize carousel appearance?

• Yes, adjust shape and sizes via layout and theming

---

How to add the Material 3 library?

• Include Material Components for Android library

---

Are there updates for the latest standards?

• Reflects latest Material 3 standards for Carousels