Material Components for Android (MDC-Android)

Progress indicators are used to express an unspecified wait time or to display the length of a process in real time. The Material Components library provides two main variants:

1. Linear progress indicator: A horizontal bar indicating progress.
2. Circular progress indicator: A circular animation indicating progress.

These components consist of an Active indicator, a Track, and a Stop indicator.

Material Components for Android provides three variants of date pickers to allow users to select a single date or a range of dates:

1. Docked date picker: An inline picker that typically appears as part of a layout, often associated with an outlined text field.
2. Modal date picker: A dialog-based picker that overlays the current screen.
3. Modal date input: A dialog-based picker that provides a text field for manual date entry.

For detailed design specifications, refer to the Material 3 (M3) spec.

The NavigationRail component allows users to switch between primary UI destinations on mid-sized devices (like tablets or desktop screens).

There are two primary types of navigation rails:

1. Collapsed navigation rail: The default state, providing a narrow strip of icons.
2. Expanded navigation rail: A wider version that can show more content (labels, etc.), intended to replace the navigation drawer in certain layouts.

For detailed design specifications, refer to the Material 3 (M3) spec.

All Material Components for Android are located within the lib/ directory of the repository. The library is organized by component type, allowing you to find specific implementations in dedicated subdirectories.

To find a specific component's source code or API definition, navigate to lib/java/com/google/android/material/ and look for the component name (e.g., appbar, bottomnavigation, or button).

Material Components for Android provides a variety of button types to allow users to take actions and make choices. Depending on your UI requirements, you can use different specialized button implementations:

• Common buttons: Standard button types for general actions.
• Button groups: A collection of buttons grouped together.
• Split button: A button that combines a primary action with a dropdown menu for related actions.
• Toggle button groups: A group of buttons used to select between mutually exclusive options.
• Icon button: Buttons that use an icon instead of text to represent an action.
• Floating action buttons (FABs): High-emphasis buttons that represent the primary action of a screen.
• Extended floating action buttons (extended FABs): FABs that include both an icon and text for increased clarity.

The DockedToolbar is a Material 3 (M3) component designed to show actions related to the current page. It is intended to replace the deprecated bottom app bar, offering a shorter height and more layout flexibility.

Anatomy of a Docked toolbar consists of:

1. Container
2. Elements

The Navigation bar (formerly called Bottom navigation) allows users to switch between top-level views on smaller devices. In the Android implementation, this component is represented by the BottomNavigationView class.

Key characteristics:

• Typically contains three to five destinations.
• Positioned at the bottom of the screen.
• Each destination consists of an icon and a label text.
• Supports optional badges (small or large) for notifications.

<!-- Note: The class name remains BottomNavigationView despite the design name change to Navigation bar -->
<com.google.android.material.bottomnavigation.BottomNavigationView
    ... />

Chips are compact elements used to represent inputs, attributes, or actions. They help users enter information, make selections, filter content, or trigger actions. There are four primary variants:

1. Assist chip: Used for tasks or actions (e.g., adding an event).
2. Filter chip: Used to filter content (e.g., selecting categories).
3. Input chip: Represents complex information like a contact or entity (e.g., an email address in a 'To' field).
4. Suggestion chip: Used to provide suggestions for user input (e.g., quick replies).

The container transform is a shared element transition pattern designed to create a visible connection between two UI elements.

Unlike traditional shared element transitions that move a specific piece of content (like an image), a container transform treats the bounding container (e.g., a list item row or a FAB) as the shared element. The container transforms its size and shape from the start View/ViewGroup into the end View/ViewGroup (e.g., a full-screen Fragment), while the contents of the containers are swapped during the transition.

Because shadows have low contrast against dark backgrounds, Material uses elevation overlays to communicate UI hierarchy.

Instead of relying solely on shadows, surfaces become lighter and more colorful as they increase in elevation (moving closer to the implied light source). This is achieved by applying a semi-transparent overlay (typically colorPrimary) on top of the colorSurface. The alpha percentage of this overlay increases with elevation.

To avoid performance issues (overdraw), the system calculates a composite blend of the surface color and the overlay color and uses that as the background, rather than drawing multiple layers.

MaterialSharedAxis is an extension of MaterialVisibility. It is composed of a primary and a secondary VisibilityAnimatorProvider.

• Primary Transition: Defines the main motion (e.g., Slide for X/Y, Scale for Z).
• Secondary Transition: By default, this is a FadeThrough.

To create a variant (like a pure scale transition without fading), you can set secondaryAnimatorProvider = null or replace it with a different provider. This allows you to modify the motion while adhering to the pattern's foundation.

// Example: A Z-axis transition that only scales and does not fade out the exiting activity
val exit = MaterialSharedAxis(MaterialSharedAxis.Z, true).apply {
  secondaryAnimatorProvider = null
  addTarget(R.id.main_container)
}
window.exitTransition = exit