Ultimate Guide to Material 3 Carousel in Android XML (2025 Tutorial + Examples)

Ultimate Guide to Material 3 Carousel in Android: Tutorial & Examples for 2025 🚀

Overview 📖

Material 3 Carousels display a collection of items that scroll horizontally or vertically, moving items into or out of view. Built on RecyclerView, they support various strategies for different browsing experiences. This guide covers Multi-browse, Hero, Fullscreen, and Uncontained strategies, their implementation, and theming for 2025. 📸

Design and API Documentation 🔗

• Google Material 3 Carousel Spec
• API Reference

Using Carousels 🤖

Add the Material Components for Android library dependency to use Material 3 Carousels. See the Get Started guide. Carousels extend RecyclerView, using CarouselLayoutManager and MaskableFrameLayout for item masking. Use a Theme.Material3.* theme for proper styling. 🛠️

Making Carousels Accessible ♿

Set android:contentDescription on item content (e.g., images) for screen readers like TalkBack. Ensure items are focusable for navigation via accessibility services. See the Android accessibility guide. 🗣️

Behavior and Configuration 🎬

Configure carousel strategies (MultiBrowseCarouselStrategy, HeroCarouselStrategy, etc.) and snapping with CarouselSnapHelper. Adjust item sizes via MaskableFrameLayout width. Example:

      
carouselRecyclerView.layoutManager = CarouselLayoutManager(MultiBrowseCarouselStrategy())
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(carouselRecyclerView)
      
      
    

Carousel Strategies 🌟

Material 3 Carousels support four strategies: Multi-browse (quick browsing), Hero (highlighted content), Fullscreen (single item focus), and Uncontained (fixed-size items). Each suits specific content presentation needs. 📊

1. Multi-browse: Quick browsing of small items.
2. Hero: Highlights large content with focus.
3. Fullscreen: Shows one item at a time.
4. Uncontained: Maintains fixed item sizes.

Multi-browse Strategy 📸

Multi-browse Strategy enables quick browsing of small items, like thumbnails, with varied item sizes. 🖼️

Multi-browse Strategy Example 💻

API and source code:

• CarouselLayoutManager
  • Class description
  • Class source
• MultiBrowseCarouselStrategy
  • Class description
  • Class source

The following example shows a multi-browse carousel.

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

Anatomy and Key Properties 📏

A multi-browse carousel arranges items in varied sizes (large to small). 📸

• Container: RecyclerView, holds items.
• Items: MaskableFrameLayout with variable sizes. 🖼️

Hero Strategy 🎥

Hero Strategy highlights large content, like movies, with a focal item and smaller adjacent items. 🌟

Hero Strategy Example 💻

The following example shows a hero carousel.

      
val recyclerView = findViewById(R.id.carousel_recycler_view)
recyclerView.layoutManager = CarouselLayoutManager(HeroCarouselStrategy())
val snapHelper = CarouselSnapHelper()
snapHelper.attachToRecyclerView(recyclerView)
      
      
    

Anatomy and Key Properties 📏

A hero carousel emphasizes a large focal item. 🎥

• Container: RecyclerView, focal item centered or start-aligned.
• Items: One large, others small. 🌟

Fullscreen Strategy 🖥️

Fullscreen Strategy shows one item at a time, filling the carousel’s space, ideal for vertical portrait layouts. 📷

Fullscreen Strategy Example 💻

The following example shows a fullscreen carousel.

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

Anatomy and Key Properties 📏

A fullscreen carousel displays one full-size item. 📷

• Container: Full RecyclerView size.
• Item: Single item, fully visible. 🖥️

Uncontained Strategy 📏

Uncontained Strategy uses fixed-size items, fitting as many as possible with a partially visible item at the edge. 📐

Uncontained Strategy Example 💻

The following example shows an uncontained carousel.

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

Anatomy and Key Properties 📏

An uncontained carousel uses fixed-size items with partial visibility. 📐

• Container: RecyclerView, fits multiple items.
• Items: Fixed size, partially visible at edges. 🖼️

Attributes (All Strategies) 📋

Element	Attribute	Related method(s)	Default value
Carousel	android:orientation	setOrientation	vertical (if set via XML)
	app:carouselAlignment	setCarouselAlignment	start
Item	app:shapeAppearance	N/A	?attr/shapeAppearanceCornerExtraLarge

Styles 🎨

• Default style: None (uses RecyclerView styling)
• Shape theming: Applied via app:shapeAppearance

See the full list of attrs. 🔗

Theming Carousels 🖌️

Material Theming customizes carousel item shapes via shapeAppearance. 🎨

Theming Example 💻

Theming example for carousel items:

FAQ ❓

What is a Material 3 Carousel? 🤔

A RecyclerView-based component for scrolling items into or out of view. ✅

---

How many strategies are there? 🔢

Four strategies: Multi-browse, Hero, Fullscreen, Uncontained. 📊

---

When to use the Hero Strategy? 🖋️

Use for highlighting large content, like movies, with a focal item. 🌟

---

How to make carousels accessible? ♿

Set android:contentDescription on items; ensure focusable navigation. 🗣️

---

Can I customize carousel appearance? 🎨

Yes, adjust item shape via shapeAppearance and sizes via layout. 🖌️

---

How to add the Material 3 library? 📦

Include the Material Components for Android library. See the Get Started guide. 🛠️

---

Are there updates for 2025? 🗓️

This guide reflects 2025 Material 3 standards for carousels. 🚀