Design
Guidelines
The
Design files
Download components and adjust theming styles for color, typography, and elevation. Files available: Figma: Material baseline*, Figma: Material dark theme*, and Adobe XD (maintained by Adobe).
*These files are available under Apache 2.0. By downloading these files, you agree to the Google Terms of Service. The Google Privacy Policy describes how data is handled in this service.
Examples
Android
Setup
Our Android getting started page explains how to set up your environment, what repositories are required, how to inherit from our theme, and how to add components.
Tutorials
- Material Components 101: Java
- Material Components 101: Kotlin
- For more: Check out all developer tutorials
Examples
The Material Android examples Github repository contains source code for demo applications built using the MDC-Android library and showcases customizations of color, typography, and shape made with Material Theming.
To preview all components available in the MDC-Android library, run the catalog module in Android Studio or by running the following Gradle command:
./gradlew :catalog:installDebug
iOS
Setup
Material Components for iOS use the standard iOS toolchain: Xcode and CocoaPods, the open-source dependency system. Use the build environment page to find Xcode settings and supported library versions to maximize compatibility with our source.
Tutorials
- Material Components 101: Objective-C
- Material Components 101: Swift
- For more: Check out all developer tutorials
Examples
To preview all components available in the MDC-iOS library, build and run the catalog.
Web
Setup
The Web getting started page explains how to quickly setup using a CDN or install components locally using npm. It also includes information on bundling the Sass and JavaScript from MDC Node modules using a bundler such as webpack.
To start exploring Material Components and Theming without setting up an environment, remix one of the Material Starter Kits on Glitch.
Framework support: MDC Web is adaptable to major web frameworks such as Angular, Vue, and React. Take a look at our framework wrappers page for a list of available wrapper libraries.
Tutorials
- Material Components 101: Web
- For more: Check out all developer tutorials
Examples
Take a look at the Material Design page on Glitch, featuring projects and examples of Material Components and Theming in use.
Flutter
Setup
Flutter comes bundled with Material Design widgets that work on mobile, web, and desktop. All available Material Components can be found in Flutter's Material Components catalog.
To start using them in your app, add:
xxxxxxxxxx
import package:flutter/material.dart
Tutorials
- Material Components 101: Flutter
- Watch: Intro to Flutter design and Using Material Design with Flutter
- For more: Check out all developer tutorials
Examples
The Flutter Gallery includes example apps, widget demos, and a Material Design template, all of which can be used in your own Flutter apps. The source code is available on Github and includes more examples.