Material 3 Dividers

Overview

Dividers are thin lines that group content in lists or layouts.

Material 3 Dividers, using MaterialDivider for static layouts and MaterialDividerItemDecoration for RecyclerView lists, support three types: Full-bleed, Inset, and Middle. They enhance visual hierarchy and imply parent/child relationships. This guide covers implementation, configuration, and theming.

Getting Started

• Add Material Components for Android library dependency
• Use MaterialDivider for static layouts
• Use MaterialDividerItemDecoration for RecyclerView
• Apply Theme.Material3.* for styling

Accessibility

• Dividers are decorative; no accessibility precautions needed
• Ensure surrounding content is accessible (e.g., labels for screen readers)

Configuration and Behavior

• Configure thickness, color, and insets via attributes or methods
• Hide last divider in lists with setLastItemDecorated(false)
• Support horizontal and vertical orientations

      
val divider = MaterialDividerItemDecoration(context, LinearLayoutManager.VERTICAL)
divider.setDividerInsetStart(16)
divider.setDividerInsetEnd(16)
divider.setLastItemDecorated(false)
recyclerView.addItemDecoration(divider)
      
    

Divider Types

• Full-bleed: Spans entire width for major sections
• Inset: Indented from edges for refined separation
• Middle: Separates RecyclerView items, often inset

Full-bleed Divider

• Spans entire layout width
• Ideal for separating unrelated content or interactive areas

Example

      
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/section_1"/>
    <com.google.android.material.divider.MaterialDivider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/section_2"/>
</LinearLayout>
      
    

Full-bleed Divider Anatomy

Component	Description	Behavior
Line	1dp (regular) or 8dp (heavy), colorOutlineVariant	Spans full width, no insets

Inset Divider

• Indented from start and/or end edges
• Ideal for refined separation within sections

Example

      
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/section_1"/>
    <com.google.android.material.divider.MaterialDivider
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:dividerInsetStart="16dp"
        app:dividerInsetEnd="16dp"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="@string/section_2"/>
</LinearLayout>
      
    

      
val divider = findViewById<MaterialDivider>(R.id.divider)
divider.setDividerInsetStart(16)
divider.setDividerInsetEnd(16)
      
    

Inset Divider Anatomy

Component	Description	Behavior
Line	1dp (regular) or 8dp (heavy), colorOutlineVariant	Indented by start/end insets

Middle Divider

• Separates RecyclerView items, often inset
• Optional last divider hiding

Example

      
<androidx.recyclerview.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
      
    

      
val divider = MaterialDividerItemDecoration(context, LinearLayoutManager.VERTICAL)
divider.setDividerInsetStart(16)
divider.setDividerInsetEnd(16)
divider.setLastItemDecorated(false)
recyclerView.addItemDecoration(divider)
      
    

Middle Divider Anatomy

Component	Description	Behavior
Line	1dp (regular), colorOutlineVariant	Separates list items, optional insets

Attributes and Usage

Element	Attribute	Related Method(s)	Default Value	Usage Description
Divider	app:dividerThickness	setDividerThickness, getDividerThickness	1dp (regular), 8dp (heavy)	Sets divider thickness
Divider	app:dividerColor	setDividerColor, getDividerColor	?attr/colorOutlineVariant	Sets divider color
Divider	app:dividerInsetStart	setDividerInsetStart, getDividerInsetStart	0dp	Sets start inset
Divider	app:dividerInsetEnd	setDividerInsetEnd, getDividerInsetEnd	0dp	Sets end inset
Divider	app:lastItemDecorated	setLastItemDecorated, isLastItemDecorated	true	Shows/hides last list divider

Theming Dividers

• Customize color and thickness
• Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="colorOutline">@color/shrine_pink_900</item>
</style>
      
    

      
<style name="Theme.App" parent="Theme.Material3.*">
    <item name="materialDividerStyle">@style/Widget.App.MaterialDivider</item>
</style>
<style name="Widget.App.MaterialDivider" parent="Widget.Material3.MaterialDivider">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.MaterialDivider</item>
    <item name="dividerColor">@color/shrine_pink_900</item>
</style>
<style name="ThemeOverlay.App.MaterialDivider" parent="">
    <item name="colorOutline">@color/shrine_pink_900</item>
</style>
      
    

      
<com.google.android.material.divider.MaterialDivider
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/Widget.App.MaterialDivider"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
      
    

Material Design Documentation

• Adheres to Material Design guidelines for Dividers
• Covers design, behavior, theming specifications
• Includes configuration for static and list dividers
• Refer to Material Design documentation for full details

FAQ

What are Material 3 Dividers?

• Lines that separate content into clear groups

---

How many divider types are there?

• Three types: Full-bleed, Inset, Middle

---

When to use an Inset Divider?

• Use for refined separation within sections

---

Do dividers need accessibility?

• No, they are decorative; ensure surrounding content is accessible

---

Can I customize divider appearance?

• Yes, adjust color and thickness via res/values/styles.xml

---

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 Dividers