Tutorials

Hands-on lessons putting Material into action – from adding a single button to completing a build


Android – Java

Java 101: Material basics

Learn the basics of using Material Components for Android by building a simple app with core components in Java

Java 102: Structure and layout

Learn how to use Material for structure and layout on Android in Java

Java 103: Theming with color, shape, motion, and type

Discover how Material Components for Android make it easy to differentiate your product and express your brand through design in Java

Java 104: Advanced components

Learn to use the backdrop menu – an advanced component – in Java

Java 111: Incorporating Material components into your codebase

Learn how to incorporate individual Material Components into an existing Java code base


Android – Kotlin

Kotlin 101: Material basics

Learn the basics of using Material Components for Android by building a simple app with core components in Kotlin

Kotlin 102: Structure and layout

Learn how to use Material for structure and layout on Android in Kotlin

Kotlin 103: Theming with color, shape, motion, and type

Discover how Material Components for Android make it easy to differentiate your product and express your brand through design in Kotlin

Kotlin 104: Advanced components

Learn to use the backdrop menu – an advanced component – in Kotlin

Kotlin 111: Incorporating Material components into your codebase

Learn how to incorporate individual Material Components into an existing Kotlin code base

Building Beautiful Transitions with Material Motion using Kotlin

Build Material’s motion system into an example app using transitions from the Material Android library


iOS – Objective-C

Objective-C 101: Material basics

Learn the basics of using Material Components for iOS by building a simple app with core components in Objective-C

Objective-C 102: Structure and layout

Learn how to use Material for structure and layout on iOS in Objective-C

Objective-C 103: Theming with color, shape, motion, and type

Discover how Material Components for iOS make it easy to differentiate your product and express your brand through design in Objective-C

Objective-C 104: Advanced components

Learn to use the backdrop menu – an advanced component – in Objective-C

Objective-C 111: Incorporating Material components into your codebase

Learn how to incorporate individual Material Components into an existing Objective-C code base


iOS – Swift

Swift 101: Material basics

Learn the basics of using Material Components for iOS by building a simple app with core components in Swift

Swift 102: Structure and layout

Learn how to use Material for structure and layout on iOS in Swift

Swift 103: Theming with color, shape, motion, and type

Discover how Material Components for iOS make it easy to differentiate your product and express your brand through design in Swift

Swift 104: Advanced components

Learn to use the backdrop menu – an advanced component – in Swift

Swift 111: Incorporating Material components into your codebase

Learn how to incorporate individual Material Components into an existing Swift code base


Web

Web 101: Material basics

Learn the basics of using Material Components for the web by building a simple app with core components

Web 102: Structure and layout

Learn how to use Material for structure and layout on the web

Web 103: Theming with color, shape, motion, and type

Discover how Material Components for the web make it easy to differentiate your product and express your brand

Web 111: Incorporating Material components into your codebase

Learn how to incorporate individual Material Components into an existing web code base

Web 112: Integrating Material Components with web frameworks

Learn how to extend pre-built Material Components into components for any web framework


Flutter

Flutter 101: Material basics

Learn the basics of using Material Components by building a simple app with core components in Flutter

Flutter 102: Structure and layout

Learn how to use Material for structure and layout in Flutter

Flutter 103: Theming with color, shape, motion, and type

Discover how Material Components make it easy to differentiate your product and express your brand through design in Flutter

Flutter 104: Advanced components

Learn to use the backdrop menu – an advanced component – in Flutter

Building Beautiful Transitions with Material Motion for Flutter

Build Material's motion system into an example app using transitions from the Flutter and Flutter Material libraries