### Assist Chip Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Chip.md

Example of an activated assist chip in a layout. Ensure minimum touch target size for accessibility.

```xml
<TextView
  android:id="@+id/textView_1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/label_1"
  android:textAlignment="viewEnd"/>

<com.google.android.material.chip.Chip
  android:id="@+id/chip_1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="@string/chip_text_1"
  app:chipIcon="@drawable/circle_1"
  app:ensureMinTouchTargetSize="true"/>
```

--------------------------------

### Floating Toolbar Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingToolbar.md

This example demonstrates how to implement a vibrant floating toolbar at the bottom of the screen. It includes an icon button with a bold style.

```xml
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
    android:id="@+id/floating_toolbar_bottom"
    android:layout_margin="16dp"
    style="?attr/floatingToolbarVibrantStyle"
    android:layout_gravity="center|bottom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.google.android.material.overflow.OverflowLinearLayout
      android:id="@+id/floating_toolbar_child_bottom"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:orientation="horizontal">

      <Button
          android:id="@+id/floating_toolbar_vibrant_button_bold"
          style="@style/Widget.Material3.FloatingToolbar.IconButton.Vibrant"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:checkable="true"
          android:contentDescription="@string/floating_toolbar_button_bold_content_description"
          app:icon="@drawable/ic_format_bold_24px" />
      ...
```

--------------------------------

### Start Activity with Transition Options

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Initiate navigation to another Activity with transition options using `ActivityOptions.makeSceneTransitionAnimation`.

```kotlin
val bundle = ActivityOptions.makeSceneTransitionAnimation(this).toBundle()
startActivity(Intent(this, ActivityB::class.java), bundle)
```

--------------------------------

### Install Catalog App

Source: https://github.com/material-components/material-components-android/blob/master/docs/catalog-app.md

Run this Gradle command to install the Material Components Catalog app on your device.

```sh
./gradlew :catalog:installDebug
```

--------------------------------

### Deprecated SwitchMaterial Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Switch.md

Example demonstrating a list of five SwitchMaterial components in a layout, including checked and disabled states.

```xml
<com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:checked="true"
    android:text="@string/label_1"/>
<com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="@string/label_2"/>
<com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="@string/label_3"/>
<com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:text="@string/label_4"/>
<com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:enabled="false"
    android:text="@string/label_5"/>
```

--------------------------------

### Material Button Theming Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/CommonButton.md

Illustrates Material theming applied to text, outlined, and filled button types. This example showcases how to customize button appearance through theming attributes.

```xml
<Button
    style="?attr/materialButtonOutlinedStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Outlined button"
/>

<Button
    style="?attr/materialButtonStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Filled button"
/>
```

--------------------------------

### Split button XML layout example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/SplitButton.md

Example of how to define a split button in an XML layout. Ensure you are using a Material Components theme for auto-inflation.

```xml
<com.google.android.material.button.MaterialSplitButton
    android:id="@+id/split_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:icon="@drawable/ic_arrow_down"
    app:text="Button"
    app:menuText="Menu" />
```

--------------------------------

### FAB Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Use this XML layout to implement a regular FAB with a plus icon. Ensure the `app:srcCompat` attribute points to your drawable resource.

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ... 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- Main content -->

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      android:id="@+id/floating_action_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|end"
      android:layout_margin="16dp"
      android:contentDescription="@string/fab_content_desc"
      app:srcCompat="@drawable/ic_plus_24"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

--------------------------------

### Configure Enter Transition for Fragment B

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Sets up a MaterialFadeThrough transition for a Fragment's entry. This transition is triggered when the Fragment appears and requires no specific setup beyond assignment.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  enterTransition = MaterialFadeThrough()
}
```

--------------------------------

### Start Container Transform Transition

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Initiate the container transform by creating an Intent for the target activity and using `ActivityOptions.makeSceneTransitionAnimation` with the shared element and its transition name.

```kotlin
val intent = Intent(this, ActivityB::class.java)

val options = ActivityOptions.makeSceneTransitionAnimation(
  this,
  startView,
  "shared_element_container" // The transition name to be matched in Activity B.
)
startActivity(intent, options.toBundle())
```

--------------------------------

### Outlined MaterialCardView Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Card.md

An example of an outlined MaterialCardView. This style includes a visual boundary around the card for greater emphasis. It demonstrates a common layout with media, text, and action buttons.

```xml
<com.google.android.material.card.MaterialCardView
    android:id="@+id/card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Media -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="194dp"
            app:srcCompat="@drawable/media"
            android:scaleType="centerCrop"
            android:contentDescription="@string/content_description_media"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- Title, secondary and supporting text -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/title"
                android:textAppearance="?attr/textAppearanceTitleMedium" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@string/secondary_text"
                android:textAppearance="?attr/textAppearanceBodyMedium"
                android:textColor="?android:attr/textColorSecondary" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="@string/supporting_text"
                android:textAppearance="?attr/textAppearanceBodyMedium"
                android:textColor="?android:attr/textColorSecondary" />

        </LinearLayout>

        <!-- Buttons -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:orientation="horizontal">
            <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:text="@string/action_1"
                style="?attr/borderlessButtonStyle" />
            <com.google.android.material.button.MaterialButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/action_2"
                style="?attr/borderlessButtonStyle" />
        </LinearLayout>

    </LinearLayout>

</com.google.android.material.card.MaterialCardView>
```

--------------------------------

### Start date picker in text input mode

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Configure the date picker to open in text input mode by default.

```kotlin
MaterialDatePicker.Builder.datePicker()
      ...
    .setInputMode(MaterialDatePicker.INPUT_MODE_TEXT)
```

--------------------------------

### Small FAB layout example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Use `?attr/floatingActionButtonSmallStyle` to define a small FAB, suitable for smaller screens or visual continuity. Place it within a `CoordinatorLayout` for integrated behaviors.

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

  <!-- Main content -->

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      ...
      style="?attr/floatingActionButtonSmallStyle"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

--------------------------------

### Set first day of the week

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Customize the displayed first day of the week in the calendar picker. This example sets Monday as the first day.

```kotlin
val constraintsBuilder = 
   CalendarConstraints.Builder()
       .setFirstDayOfWeek(Calendar.MONDAY)
```

--------------------------------

### Bottom Navigation Menu Resource with Four Items

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md

An example menu resource defining four items for a bottom navigation bar. Ensure icons and string resources are correctly defined.

```xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
      android:id="@+id/page_1"
      android:enabled="true"
      android:icon="@drawable/ic_star"
      android:title="@string/page_1"/>
  <item
      android:id="@+id/page_2"
      android:enabled="true"
      android:icon="@drawable/ic_star"
      android:title="@string/page_2"/>
  <item
      android:id="@+id/page_3"
      android:enabled="true"
      android:icon="@drawable/ic_star"
      android:title="@string/page_3"/>
  <item
      android:id="@+id/page_4"
      android:enabled="true"
      android:icon="@drawable/ic_star"
      android:title="@string/page_4"/>
</menu>
```

--------------------------------

### Add start icon to TextInputLayout

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md

Use app:startIconDrawable and app:startIconContentDescription to add a leading icon to a text field.

```xml
<com.google.android.material.textfield.TextInputLayout
    ... 
    app:startIconDrawable="@drawable/ic_search_24dp"
    app:startIconContentDescription="@string/content_description_start_icon">

    ...

</com.google.android.material.textfield.TextInputLayout>
```

--------------------------------

### Setup TabLayout with ViewPager

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Tabs.md

Connect a TabLayout with a ViewPager to synchronize tab selections and page swipes. This method should be called after setting the adapter on the ViewPager.

```kotlin
tabLayout.setupWithViewPager(viewPager)
```

--------------------------------

### Docked Toolbar Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DockedToolbar.md

This XML layout demonstrates how to integrate a DockedToolbarLayout within a CoordinatorLayout. It includes a NestedScrollView for content and configures the DockedToolbarLayout with a HideViewOnScrollBehavior. The toolbar itself contains an OverflowLinearLayout with sample buttons.

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
  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="match_parent">

  <!-- sample screen content -->
  <androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">

      <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/content" />
    </LinearLayout>
  </androidx.core.widget.NestedScrollView>

  <com.google.android.material.dockedtoolbar.DockedToolbarLayout
    android:id="@+id/docked_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:layout_behavior="com.google.android.material.behavior.HideViewOnScrollBehavior">

    <!-- docked toolbar sample content -->
    <com.google.android.material.overflow.OverflowLinearLayout
      android:id="@+id/docked_toolbar_child"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:orientation="horizontal">
      <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minWidth="48dp"
        android:layout_weight="1"
        app:layout_overflowText="@string/docked_toolbar_back_button_description"
        app:layout_overflowIcon="@drawable/ic_arrow_back_24px">
        <Button
          android:id="@+id/docked_toolbar_back_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          style="?attr/materialIconButtonStyle"
          android:contentDescription="@string/docked_toolbar_back_button_description"
          app:icon="@drawable/ic_arrow_back_24px" />
      </FrameLayout>

      <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minWidth="48dp"
        android:layout_weight="1"
        app:layout_overflowText="@string/docked_toolbar_add_button_description"
        app:layout_overflowIcon="@drawable/ic_add_24px">
        <Button
          android:id="@+id/docked_toolbar_add_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          style="?attr/materialIconButtonStyle"
          android:contentDescription="@string/docked_toolbar_add_button_description"
          app:icon="@drawable/ic_add_24px" />
      </FrameLayout>

      <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minWidth="48dp"
        android:layout_weight="1"
        app:layout_overflowText="@string/docked_toolbar_forward_button_description"
        app:layout_overflowIcon="@drawable/ic_arrow_forward_24px">
        <Button
          android:id="@+id/docked_toolbar_forward_button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          style="?attr/materialIconButtonStyle"
          android:contentDescription="@string/docked_toolbar_forward_button_description"
          app:icon="@drawable/ic_arrow_forward_24px" />
      </FrameLayout>
    </com.google.android.material.overflow.OverflowLinearLayout>

  </com.google.android.material.dockedtoolbar.DockedToolbarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

--------------------------------

### Configure Exit Transition for Fragment A

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Sets up a MaterialFadeThrough transition for a Fragment's exit. This transition is triggered when the Fragment disappears and requires no specific setup beyond assignment.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)

  exitTransition = MaterialFadeThrough()
}
```

--------------------------------

### Standard Side Sheet Basic Usage in XML

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/SideSheet.md

This XML layout demonstrates the basic setup for a standard side sheet within a CoordinatorLayout. Ensure the correct layout_behavior is applied.

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
  ...>

  <FrameLayout
    ... 
    android:id="@id/standard_side_sheet"
    app:layout_behavior="com.google.android.material.sidesheet.SideSheetBehavior">

    <!-- Side sheet content. -->

  </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

--------------------------------

### Wrap Context for Dynamic Colors

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md

Use this helper method to get a context with the dynamic color theme overlay applied, if available on the device. Ensure M3 base themes are applied first.

```java
context = DynamicColors.wrapContextIfAvailable(context);
```

--------------------------------

### Outlined Text Field Code Interaction

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md

Provides Kotlin code examples for interacting with an outlined text field. Use `editText?.text.toString()` to get the input and `doOnTextChanged` to observe changes.

```kotlin
// Get input text
val inputText = outlinedTextField.editText?.text.toString()

outlinedTextField.editText?.doOnTextChanged { inputText, _, _, _ ->
    // Respond to input text change
}
```

--------------------------------

### Instantiating and Configuring MaterialTimePicker

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TimePicker.md

Demonstrates how to create a MaterialTimePicker instance using its builder, setting the time format, initial hour and minute, and a title. It also shows how to determine the system's 24-hour format and apply it.

```APIDOC
## Instantiating and Configuring MaterialTimePicker

### Description
This section shows how to create a `MaterialTimePicker` using `MaterialTimePicker.Builder`, allowing configuration of time format, initial time, and title. It also includes logic to adapt to the system's 24-hour format.

### Method
N/A (Code examples for instantiation)

### Endpoint
N/A

### Parameters
#### Request Body
N/A

### Request Example
```kt
// Example using 12-hour format
val picker12Hour = MaterialTimePicker.Builder()
    .setTimeFormat(TimeFormat.CLOCK_12H)
    .setHour(12)
    .setMinute(10)
    .setTitleText("Select Appointment time")
    .build()

// Example adapting to system's 24-hour format
val isSystem24Hour = is24HourFormat(this)
val clockFormat = if (isSystem24Hour) TimeFormat.CLOCK_24H else TimeFormat.CLOCK_12H

val pickerSystemFormat = MaterialTimePicker.Builder()
    .setTimeFormat(clockFormat)
    .setHour(14)
    .setMinute(30)
    .setTitleText("Set Event Time")
    .build()
```

### Response
N/A

### Response Example
N/A
```

--------------------------------

### Configure Activity Enter Transition

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Configure a `MaterialFadeThrough` enter transition for Activity B, setting `allowEnterTransitionOverlap` to true to play transitions concurrently.

```kotlin
// ActivityB.kt

override fun onCreate(savedInstanceState: Bundle?) {

  window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

  val enter = MaterialFadeThrough().apply {
    addTarget(R.id.b_container)
  }
  window.enterTransition = enter

  // Allow Activity A’s exit transition to play at the same time as this Activity’s
  // enter transition instead of playing them sequentially.
  window.allowEnterTransitionOverlap = true

  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_b)
  ...
}
```

--------------------------------

### Navigation Icon Drawable

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/BottomAppBar.md

Example of a vector drawable for the navigation icon, specifying tint color. This is a minimal example; actual drawables may contain more path data.

```xml
<vector
    ... 
    android:tint="?attr/colorControlNormal">
    ...
</vector>
```

--------------------------------

### Configure Activity Enter Transition

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Configure a `MaterialSharedAxis` enter transition for Activity B. Ensure `window.allowEnterTransitionOverlap` is set to true to play enter and exit transitions concurrently.

```kotlin
// ActivityB.kt

override fun onCreate(savedInstanceState: Bundle?) {

  window.requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

  val enter = MaterialSharedAxis(MaterialSharedAxis.X, true).apply {
    addTarget(R.id.b_container)
  }
  window.enterTransition = enter
  // TODO: Configure a return transition in the backwards direction.

  // Allow Activity A’s exit transition to play at the same time as this Activity’s
  // enter transition instead of playing them sequentially.
  window.allowEnterTransitionOverlap = true

  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_b)
  ...
}
```

--------------------------------

### Basic MaterialAlertDialogBuilder Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Dialog.md

Use this snippet to create a basic dialog with a title, supporting text, and up to three action buttons (neutral, negative, positive). Ensure the `context` is available and strings are properly defined.

```kotlin
MaterialAlertDialogBuilder(context)
        .setTitle(resources.getString(R.string.title))
        .setMessage(resources.getString(R.string.supporting_text))
        .setNeutralButton(resources.getString(R.string.cancel)) {
            dialog, which ->
            // Respond to neutral button press
        }
        .setNegativeButton(resources.getString(R.string.decline)) {
            dialog, which ->
            // Respond to negative button press
        }
        .setPositiveButton(resources.getString(R.string.accept)) {
            dialog, which ->
            // Respond to positive button press
        }
        .show()
```

--------------------------------

### Get Elevation Overlay Color with Theme Surface Color

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Dark.md

Use `ElevationOverlayProvider#compositeOverlayWithThemeSurfaceColorIfNeeded` to get the `colorSurface` blended with the elevation overlay color. This method handles theme-level elevation overlay enablement.

```java
elevationOverlayProvider.compositeOverlayWithThemeSurfaceColorIfNeeded(context, color, elevation)
```

--------------------------------

### Get User Selection

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TimePicker.md

Retrieve the selected hour and minute from the time picker after the user has made a selection.

```kotlin
picker.minute
picker.hour
```

--------------------------------

### Fragment A: Show FAB with MaterialFade

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Demonstrates transitioning a Floating Action Button (FAB) into view using MaterialFade with a duration of 150ms.

```kotlin
showButton.setOnClickListener {
   val materialFade = MaterialFade().apply {
     duration = 150L
   }
   TransitionManager.beginDelayedTransition(container, materialFade)
   fab.visibility = View.VISIBLE
}
```

--------------------------------

### Instantiate Material Time Picker

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TimePicker.md

Use MaterialTimePicker.Builder to create a time picker instance. Configure time format, initial hour, minute, and title text.

```kotlin
val picker =
    MaterialTimePicker.Builder()
        .setTimeFormat(TimeFormat.CLOCK_12H)
        .setHour(12)
        .setMinute(10)
        .setTitleText("Select Appointment time")
        .build()
```

--------------------------------

### Material Button Theming Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/ButtonGroup.md

Demonstrates Material Theming for Material Buttons, showcasing text, outlined, and filled button types with custom color and shape. Refer to MaterialButton documentation for API details.

```xml
<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.OutlinedButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_outlined"
    app:strokeColor="@color/pink_500"
    app:cornerRadius="16dp"/>

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    app:icon="@drawable/ic_favorite"
    app:iconTint="@color/pink_500"/>

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.Button.FilledButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_filled"
    app:backgroundTint="@color/pink_500"
    app:cornerRadius="16dp"/>
```

--------------------------------

### Get user selection from date picker

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Retrieve the date or date range selected by the user from the picker instance.

```kotlin
picker.selection
```

--------------------------------

### Deprecated SwitchMaterial Code Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Switch.md

Kotlin code snippets for checking the state of a SwitchMaterial and listening for checked/unchecked state changes.

```kotlin
// To check a switch
switchmaterial.isChecked = true

// To listen for a switch's checked/unchecked state changes
switchmaterial.setOnCheckedChangeListener { buttonView, isChecked
    // Responds to switch being checked/unchecked
}
```

--------------------------------

### List Popup Window Menu Implementation in Kotlin

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md

This code demonstrates how to create and display a list popup window menu when a button is clicked. It sets up the anchor view, adapter, and item click listener.

```kotlin
val listPopupWindowButton = view.findViewById<Button>(R.id.list_popup_button)
val listPopupWindow = ListPopupWindow(context!!, null, R.attr.listPopupWindowStyle)

// Set button as the list popup's anchor
listPopupWindow.anchorView = listPopupWindowButton

// Set list popup's content
val items = listOf("Item 1", "Item 2", "Item 3", "Item 4")
val adapter = ArrayAdapter(requireContext(), R.layout.list_popup_window_item, items)
listPopupWindow.setAdapter(adapter)

// Set list popup's item click listener
listPopupWindow.setOnItemClickListener { parent: AdapterView<*>?, view: View?, position: Int, id: Long ->
  // Respond to list popup window item click.

  // Dismiss popup.
  listPopupWindow.dismiss()
}

// Show list popup window on button click.
listPopupWindowButton.setOnClickListener { v: View? -> listPopupWindow.show() }
```

--------------------------------

### Set up menu for SearchView

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Search.md

Use inflateMenu and setOnMenuItemClickListener to configure the menu for your SearchView. Handle menu item clicks within the listener.

```java
searchView.inflateMenu(R.menu.search_view_menu);
searchView.setOnMenuItemClickListener(
    menuItem -> {
      // Handle menuItem click.
      return true;
    });
```

--------------------------------

### Medium FAB Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Apply the `?attr/floatingActionButtonMediumStyle` attribute in your XML layout to use a medium-sized FAB. This style is recommended for most situations.

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ... 
    >

  <!-- Main content -->

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      ... 
      style="?attr/floatingActionButtonMediumStyle"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

--------------------------------

### M3 Expressive Large FAB

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Example of how to implement a large-sized expressive Floating Action Button using Material Components for Android.

```APIDOC
## M3 Expressive Large FAB

### Description
This section shows an example of a large-sized expressive Floating Action Button (FAB) in both light and dark modes.

### Method
XML Layout

### Endpoint
N/A

### Request Example
```xml
<com.google.android.material.floatingactionbutton.FloatingActionButton
      style="?attr/floatingActionButtonLargeStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="8dp"
      android:contentDescription="@string/m3_expressive_primary_large_fab_content_description"
      app:srcCompat="@drawable/gs_edit_fill1_vd_theme_24"
      app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
```

### Response
N/A
```

--------------------------------

### M3 Expressive Medium FAB

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Example of how to implement a medium-sized expressive Floating Action Button using Material Components for Android.

```APIDOC
## M3 Expressive Medium FAB

### Description
This section shows an example of a medium-sized expressive Floating Action Button (FAB) in both light and dark modes.

### Method
XML Layout

### Endpoint
N/A

### Request Example
```xml
<com.google.android.material.floatingactionbutton.FloatingActionButton
            style="?attr/floatingActionButtonMediumStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:contentDescription="@string/m3_expressive_primary_medium_fab_content_description"
            app:srcCompat="@drawable/gs_edit_fill1_vd_theme_24"
            app:materialThemeOverlay="@style/ThemeOverlay.Material3Expressive.FloatingActionButton.Primary" />
```

### Response
N/A
```

--------------------------------

### Material Button Group with Icon

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/ButtonGroup.md

Example of a Material Button Group with an icon specified. Ensure the icon drawable is available in your resources.

```xml
<com.google.android.material.button.MaterialButtonGroup
    android:contentDescription="@string/cat_button_next_icon"
    android:gravity="center"
    app:iconGravity="textStart"
    app:icon="@drawable/cat_button_next_icon"/>
```

--------------------------------

### Get Header View from Navigation Rail

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationRail.md

Retrieves the currently attached header view from the NavigationRailView. Returns null if no header is attached.

```java
getHeaderView()
```

--------------------------------

### Show the date picker

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Display the built date picker to the user using a FragmentManager and a tag.

```kotlin
picker.show(supportFragmentManager, "tag")
```

--------------------------------

### Get Side Sheet Behavior Programmatically

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/SideSheet.md

Retrieve the SideSheetBehavior instance from a View programmatically. This allows for dynamic adjustment of behavior attributes.

```kotlin
val standardSideSheetBehavior = SideSheetBehavior.from(standardSideSheet)
// Use this to programmatically apply behavior attributes
```

--------------------------------

### Apply Theme to All Docked Toolbars

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DockedToolbar.md

Use theme attributes and a style in `res/values/styles.xml` to apply theming to all docked toolbars. This affects other components as well.

```xml
<style name="Theme.App" parent="Theme.Material3.*">
    ...
    <item name="colorPrimary">@color/shrine_theme_light_primary</item>
    <item name="colorOnPrimary">@color/shrine_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/shrine_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/shrine_theme_light_onPrimaryContainer</item>
    <item name="colorSecondaryContainer">@color/shrine_theme_light_secondaryContainer</item>
    <item name="colorOnSecondaryContainer">@color/shrine_theme_light_onSecondaryContainer</item>
    <item name="colorTertiaryContainer">@color/shrine_theme_light_tertiaryContainer</item>
    <item name="colorOnTertiaryContainer">@color/shrine_theme_light_onTertiaryContainer</item>
    <item name="colorError">@color/shrine_theme_light_error</item>
    <item name="colorErrorContainer">@color/shrine_theme_light_errorContainer</item>
    <item name="colorOnError">@color/shrine_theme_light_onError</item>
    <item name="colorOnErrorContainer">@color/shrine_theme_light_onErrorContainer</item>
    <item name="colorSurface">@color/shrine_theme_light_surface</item>
    <item name="colorOnSurface">@color/shrine_theme_light_onSurface</item>
    <item name="colorOnSurfaceVariant">@color/shrine_theme_light_onSurfaceVariant</item>
</style>
```

--------------------------------

### Set MaterialDivider Insets in Code

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Divider.md

Programmatically set the start and end insets for a MaterialDivider view. This is an alternative to using XML attributes.

```kotlin
divider.setDividerInsetStart(insetStart)
divider.setDividerInsetEnd(insetEnd)
```

--------------------------------

### Adaptive Supporting Panel Demo Activity Implementation

Source: https://github.com/material-components/material-components-android/blob/master/docs/adaptive/CanonicalLayouts.md

This activity follows the general implementation logic and calls methods in the AdaptiveSupportingPanelDemoFragment to update the layout based on the current state.

```java
public class AdaptiveSupportingPanelDemoActivity extends AppCompatActivity {

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.cat_adaptive_supporting_panel_activity);

    if (savedInstanceState == null) {
      getSupportFragmentManager()
          .beginTransaction()
          .add(R.id.container, new AdaptiveSupportingPanelDemoFragment())
          .commit();
    }
  }

  // StateContainer class would be defined here or elsewhere
  // It would handle observing WindowLayoutInfo and updating the fragment
}
```

--------------------------------

### Instantiate a date range picker

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Basic instantiation of a date range picker builder. A title is recommended for clarity.

```kotlin
val dateRangePicker =
    MaterialDatePicker.Builder.dateRangePicker()
        .setTitleText("Select dates")
        .build()
```

--------------------------------

### Open picker at a default month

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Configure the date picker to open to a specific month by setting the 'openAt' constraint. This example opens to February.

```kotlin
calendar[Calendar.MONTH] = Calendar.FEBRUARY
val february = calendar.timeInMillis

val constraintsBuilder =
   CalendarConstraints.Builder()
       .setOpenAt(february)
```

--------------------------------

### Show Popup Menu with Icons in Kotlin

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md

Use this code to display a popup menu with icons. Ensure the menu XML defines icons for each item. This example modifies the menu to make icons visible and applies an inset.

```kotlin
private fun showMenu(v: View, @MenuRes menuRes: Int) {
    val popup = PopupMenu(context!!, v)
    popup.menuInflater.inflate(menuRes, popup.menu)
    ...
    if (popup.menu is MenuBuilder) {
        val menuBuilder = popup.menu as MenuBuilder
        menuBuilder.setOptionalIconsVisible(true)
        for (item in menuBuilder.visibleItems) {
            val iconMarginPx =
                TypedValue.applyDimension(
                    TypedValue.COMPLEX_UNIT_DIP, ICON_MARGIN.toFloat(), resources.displayMetrics)
                .toInt()
            if (item.icon != null) {
              if (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP) {
                  item.icon = InsetDrawable(item.icon, iconMarginPx, 0, iconMarginPx,0)
              } else {
                  item.icon =
                      object : InsetDrawable(item.icon, iconMarginPx, 0, iconMarginPx, 0) {
                          override fun getIntrinsicWidth(): Int {
                              return intrinsicHeight + iconMarginPx + iconMarginPx
                      }
                }
              }
          }
      }
    }
    ...
    popup.show()
}
```

--------------------------------

### Bottom Sheet Theming Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/BottomSheet.md

Demonstrates how to apply Material theming to a bottom sheet, affecting its background color and shape in both collapsed and expanded states. This approach uses theme attributes to apply customizations globally.

```xml
<style name="Theme.App" parent="Theme.Material3.*">
  ...
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.App.BottomSheetDialog</item>
</style>

<style name="ThemeOverlay.App.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/ModalBottomSheetDialog</item>
</style>
```

```xml
<style name="ModalBottomSheetDialog" parent="Widget.Material3.BottomSheet.Modal">
    <item name="backgroundTint">@color/shrine_pink_light</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.LargeComponent</item>
</style>

<style name="ShapeAppearance.App.LargeComponent" parent="ShapeAppearance.Material3.LargeComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">24dp</item>
</style>
```

--------------------------------

### Constrain calendar to this year

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Set the start and end dates for the calendar picker to the beginning and end of the current year, respectively. Requires UTC timezone.

```kotlin
val today = MaterialDatePicker.todayInUtcMilliseconds()
val calendar = Calendar.getInstance(TimeZone.getTimeZone("UTC"))

calendar.timeInMillis = today
calendar[Calendar.MONTH] = Calendar.JANUARY
val janThisYear = calendar.timeInMillis

calendar.timeInMillis = today
calendar[Calendar.MONTH] = Calendar.DECEMBER
val decThisYear = calendar.timeInMillis

// Build constraints.
val constraintsBuilder =
   CalendarConstraints.Builder()
       .setStart(janThisYear)
       .setEnd(decThisYear)
```

--------------------------------

### Set Selected Item Programmatically

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/BottomNavigation.md

Sets the currently selected item in the BottomNavigationView programmatically. This is useful for initial setup or navigating based on application state.

```kotlin
bottomNavigation.selectedItemId = R.id.page_2
```

--------------------------------

### Apply Contrast to All Activities

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Color.md

Call this method in your application class's onCreate() to apply contrast control to all activities. Ensure you pass a DayNight theme for both medium and high contrast overlays to support light and dark themes.

```java
ColorContrast.applyToActivitiesIfAvailable(
        this,
        new ColorContrastOptions.Builder()
            .setMediumContrastThemeOverlay(mediumContrastThemeOverlayResId)
            .setHighContrastThemeOverlay(highContrastThemeOverlayResId)
            .build();
);
```

--------------------------------

### Instantiate and Set Content for Modal Side Sheet

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/SideSheet.md

Instantiate a SideSheetDialog with the desired context and set its content view. The dialog can then be shown and hidden programmatically.

```kotlin
val sideSheetDialog = SideSheetDialog(requireContext());
```

```kotlin
sideSheetDialog.setContentView(R.layout.side_sheet_content_layout)
```

--------------------------------

### Custom Item Layout for AutoCompleteTextView

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md

Define a custom layout for items in an `AutoCompleteTextView` to control rendering. This example uses a `TextView` with specific padding and text appearance.

```xml
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:ellipsize="end"
    android:maxLines="1"
    android:textAppearance="?attr/textAppearanceTitleMedium"
/>
```

--------------------------------

### Filled Text Field Layout Example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md

Use this XML layout to implement a filled text field with a label. Ensure you have the necessary string resources defined.

```xml
<com.google.android.material.textfield.TextInputLayout
    style="?attr/textInputFilledStyle"
    android:id="@+id/filledTextField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    />

</com.google.android.material.textfield.TextInputLayout>
```

--------------------------------

### Configure Activity Exit Transition

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Configure a `MaterialSharedAxis` exit transition for Activity A. Use `addTarget` to specify which views should participate in the transition.

```kotlin
// ActivityA.kt

override fun onCreate(savedInstanceState: Bundle?) {
  val exit = MaterialSharedAxis(MaterialSharedAxis.X, true).apply {

    // Only run the transition on the contents of this activity, excluding
    // system bars or app bars if provided by the app’s theme.
    addTarget(R.id.a_container)
  }
  window.exitTransition = exit

  // TODO: Add a reenter transition in the backwards direction to animate
  // Activity B out and Activity A back in in the opposite direction.

  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_a)
}
```

--------------------------------

### Show Popup Menu

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md

Displays a popup menu when a button is clicked. Includes listeners for item clicks and dismissal.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
    ... 
    val button = view.findViewById<Button>(R.id.menu_button)
    button.setOnClickListener { v: View ->
        showMenu(v, R.menu.popup_menu)
    }
}

private fun showMenu(v: View, @MenuRes menuRes: Int) {
    val popup = PopupMenu(context!!, v)
    popup.menuInflater.inflate(menuRes, popup.menu)

    popup.setOnMenuItemClickListener { menuItem: MenuItem ->
        // Respond to menu item click.
    }
    popup.setOnDismissListener {
        // Respond to popup being dismissed.
    }
    // Show the popup menu.
    popup.show()
}
```

```xml
<Button
    android:id="@+id/menu_button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/show_menu"/>
```

```xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/option_1"
          android:title="@string/option_1" />
    <item android:id="@+id/option_2"
          android:title="@string/option_2" />
    <item android:id="@+id/option_3"
          android:title="@string/option_3" />
</menu>
```

--------------------------------

### Theming Motion Duration

Source: https://github.com/material-components/material-components-android/blob/master/docs/theming/Motion.md

Customize animation duration by overriding the default duration attributes in your app's theme. This example sets a custom duration for `motionDurationLong2`.

```xml
<style name="Theme.MyTheme" parent="Theme.Material3.DayNight.NoActionBar">
    ....
    <item name="motionDurationLong2">450</item>
</style>
```

--------------------------------

### Apply Chip Theming with Theme Overlay

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Chip.md

Use a theme overlay in `res/values/styles.xml` to apply theming to all chips without affecting other components. This is useful for component-specific theming.

```xml
<style name="Theme.App" parent="Theme.Material3.*">
    ...
    <item name="chipStyle">@style/Widget.App.Chip</item>
</style>

<style name="Widget.App.Chip" parent="Widget.Material3.Chip.Input">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.Chip</item>
    <item name="android:textAppearance">@style/TextAppearance.App.BodyMedium</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.Corner.Small</item>
    ...
</style>

<style name="ThemeOverlay.App.Chip" parent="">
    <item name="colorOnSurfaceVariant">@color/shrine_pink_900</item>
</style>
```

--------------------------------

### Large FAB layout example

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md

Use `?attr/floatingActionButtonLargeStyle` to define a large FAB in your layout. Ensure it's within a `CoordinatorLayout` for automatic behavior with Snackbars and AppBars.

```xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

  <!-- Main content -->

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      ...
      style="?attr/floatingActionButtonLargeStyle"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

--------------------------------

### Run JVM Tests

Source: https://github.com/material-components/material-components-android/blob/master/docs/contributing.md

Execute the unit tests for the Material Components for Android library. Ensure you are in the project root directory.

```shell
./gradlew test
```

--------------------------------

### Set default date selection

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/DatePicker.md

Set the initially selected date in a date picker. For date range pickers, provide a Pair of start and end dates.

```kotlin
// Opens the date picker with today's date selected.
MaterialDatePicker.Builder.datePicker()
      ...
    .setSelection(MaterialDatePicker.todayInUtcMilliseconds())
```

```kotlin
// Opens the date range picker with the range of the first day of
// the month to today selected.
MaterialDatePicker.Builder.dateRangePicker()
      ...
    .setSelection(
          Pair(
            MaterialDatePicker.thisMonthInUtcMilliseconds(),
            MaterialDatePicker.todayInUtcMilliseconds()
          )
        )
```

--------------------------------

### Displaying and Handling Time Picker Events

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/TimePicker.md

Provides code examples for showing the time picker dialog to the user and for attaching listeners to handle positive button clicks, negative button clicks, cancellation, and dismissal.

```APIDOC
## Displaying and Handling Time Picker Events

### Description
This section covers how to display the `MaterialTimePicker` dialog to the user using `show()` and how to implement callbacks for user interactions such as confirming the selection, canceling, or dismissing the dialog. It also shows how to retrieve the selected hour and minute.

### Method
N/A (Code examples for usage)

### Endpoint
N/A

### Parameters
#### Request Body
N/A

### Request Example
```kt
// Assuming 'picker' is an instance of MaterialTimePicker and 'fragmentManager' is available
picker.show(fragmentManager, "time_picker_tag")

// Listen for positive button click
picker.addOnPositiveButtonClickListener { view ->
    val selectedHour = picker.hour
    val selectedMinute = picker.minute
    // Handle the selected time
}

// Listen for negative button click
picker.addOnNegativeButtonClickListener { view ->
    // Handle negative action
}

// Listen for cancel event
picker.addOnCancelListener {
    // Handle cancel event
}

// Listen for dismiss event
picker.addOnDismissListener {
    // Handle dismiss event
}

// Retrieving selected values (after confirmation)
val hour = picker.hour
val minute = picker.minute
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Custom Popup Menu Background Drawable

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Menu.md

Define a custom background for popup menus using a shape drawable. This example sets a surface color and rounded corners.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="?attr/colorSurface"/>
  <corners
    android:radius="16dp"/>
  <padding
      android:bottom="8dp"
      android:top="8dp"/>
</shape>
```

--------------------------------

### Adaptive Supporting Panel Demo Fragment Implementation

Source: https://github.com/material-components/material-components-android/blob/master/docs/adaptive/CanonicalLayouts.md

This fragment inflates the layout, sets up a recycler view, and defines constraint sets for different screen configurations. It manages layout changes based on device orientation and foldable states.

```java
public class AdaptiveSupportingPanelDemoFragment extends Fragment {

  @Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setAdaptiveLayout(getResources().getConfiguration());
  }

  @Override
  public void onConfigurationChanged(@NonNull Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    setAdaptiveLayout(newConfig);
  }

  private void setAdaptiveLayout(@NonNull Configuration configuration) {
    View root = getView();
    if (root == null) {
      return;
    }
    ConstraintLayout constraintLayout = root.findViewById(R.id.constraint_layout);
    int orientation = configuration.orientation;
    FoldingFeature foldingFeature = getFoldingFeature();

    if (foldingFeature != null && foldingFeature.getState() == FoldingFeature.State.HALF_OPENED) {
      if (foldingFeature.getOrientation() == FoldingFeature.Orientation.HORIZONTAL) {
        constraintLayout.setLayoutResource(R.layout.cat_adaptive_supporting_panel_fragment_tabletop);
      } else {
        constraintLayout.setLayoutResource(R.layout.cat_adaptive_supporting_panel_fragment_portrait);
      }
    } else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
      constraintLayout.setLayoutResource(R.layout.cat_adaptive_supporting_panel_fragment_landscape);
    } else {
      constraintLayout.setLayoutResource(R.layout.cat_adaptive_supporting_panel_fragment);
    }

    constraintLayout.inflate();
    supportingPanelList = constraintLayout.findViewById(R.id.supportingPanelList);
    supportingPanelList.setAdapter(new SupportingPanelAdapter());
  }

  @Nullable
  private FoldingFeature getFoldingFeature() {
    return getWindowLayoutInfo().getFoldingFeature();
  }

  @NonNull
  private WindowLayoutInfo getWindowLayoutInfo() {
    // In a real app, you would get this from the WindowManager.
    // For demo purposes, we'll return a dummy value.
    return new WindowLayoutInfo.Builder().build();
  }
}
```

--------------------------------

### Initialize CarouselLayoutManager with MultiBrowseStrategy

Source: https://github.com/material-components/material-components-android/blob/master/docs/components/Carousel.md

Use the multi-browse strategy by passing no arguments to the CarouselLayoutManager constructor. This is the default strategy.

```kotlin
CarouselLayoutManager()
```