# Material Design Material Design is a design system for building digital products, with associated component libraries for creating consistent web and app interfaces. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## How to Build, Theme, and Audit Material Design 3 UIs with AI Agents DevFeed: [How to Build, Theme, and Audit Material Design 3 UIs with AI Agents]() Original publisher: [Read original article]() Author: Ivan Morgillo Published: 2026-06-02T17:00:00Z Content type: tutorial Language: en Sources: [Ivan Morgillo]() Topics: [Material Design](), [Agent Skill](), [Compose](), [AI Agent](), [Kotlin](), [Accessibility](), [Flutter]() Tags: [accessibility](), [agent-skill](), [ai-agents](), [audit](), [compose](), [css](), [flutter](), [kotlin](), [material-design]() ### AI overview A practical guide to an MIT-licensed agent skill for building and auditing Material Design 3 interfaces. It covers component generation, seed-color theme creation for light and dark modes, responsive app shells, accessibility checks, and support for Compose, Flutter, CSS, and JSON outputs. ### Source excerpt A practical guide to material-3-skill -- components, theme generation, the 10-category MD3 audit, and the real Compose bugs it catches in production code. ## Now in Android #117 -- Google I/O 2025 Part I DevFeed: [Now in Android #117 -- Google I/O 2025 Part I]() Original publisher: [Read original article]() Author: Daniel Galpin Published: 2025-06-05T17:28:56Z Content type: article Language: en Sources: [Android Developers - Medium]() Topics: [Android](), [Material Design](), [Development](), [Google](), [Artificial Intelligence](), [Android XR](), [Large Screen](), [User experience (UX)]() Tags: [2025](), [adaptive](), [ai](), [android](), [android-16](), [android-xr](), [design-patterns](), [development](), [featured](), [gemini](), [google](), [google-i-o](), [google-io-2025](), [material-design](), [now-in-android](), [ux]() ### AI overview This first part of a special Google I/O 2025 edition of Now in Android surveys updates across Material Design, Android form factors, adaptive app development, Android XR, on-device and cloud-based AI, and Android 16. It highlights Material 3 Expressive, including new motion physics, typography, shapes, colors, and component configuration capabilities. ### Source excerpt Now in Android #117 -- Google I/O 2025 Part IDesign, Watches, Cars, Tablets, Adaptive Apps, Android XR, Gemini, and Android 16 Welcome to part one of a special two-part Google I/O 2025 edition of Now in Android. This first post will cover a bunch of changes related to the latest evolution of Material Design, watches, cars, tablets, laptops, and connected displays, the latest in adaptive app development, XR development, how to take advantage of on-device and cloud based AI, and Android 16. https://medium.com/media/f4779f9096112bf2cfff21aec7eeb199/hrefhttps://medium.com/media/d23b17afda66e01541bb4c84ecea4974/href Most of the content of this post is available in the form of a video or podcast, so feel free to watch or listen rather than read on. (Or do all three to help you remember! There won't be a quiz.) The Android Show: I/O Edition -- what Android devs need to know! 🤖 We began the I/O season with a special edition of The Android Show, where we introduced the latest evolution of Material Design, Material 3 Expressive. https://medium.com/media/815112dc9a5b3a849cced5343837f4e6/href The Android Show: I/O Edition - what Android devs need to know! https://medium.com/media/906cc031e2cbb814b2a4964db156a2cc/href Material 3 Expressive adds a new motion physics system, new type styles for variable and static fonts, an expanded shape library with morphing animations, and an expanded range of colors. Fifteen new or updated components now feature more configuration capabilities, shape options, emphasized text, and other expressive updates. The Material team has a post where you can read all about it, including design tactics. M3 Expressive: Engaging UX Design At I/O Build next-level UX with Material 3 Expressive covered how to use the new expressive design patterns; breaking down the research, explaining new guidelines, and including new design files + code. https://medium.com/media/4ce31edc8b396f71acc6192d1ac6160f/href The first beta of the Q3 Android 16 update contains much of ## A Visual Guide to TopAppBar Variants in Jetpack Compose DevFeed: [A Visual Guide to TopAppBar Variants in Jetpack Compose]() Original publisher: [Read original article]() Author: Alex Zhukovich Published: 2025-02-14T01:16:00Z Content type: tutorial Language: en Sources: [Alex Zhuk - Android development and testing]() Topics: [Jetpack Compose](), [Material Design](), [Development](), [Library]() Tags: [components](), [design](), [development](), [display](), [guide](), [jetpack-compose](), [material-design](), [standard](), [typography]() ### AI overview This article explains the predefined TopAppBar variants in the Material 3 library for Jetpack Compose. It compares their default typography and heights and describes options for centered titles, expandable layouts, subtitles, navigation icons, and actions. ### Source excerpt Material 3 offers a variety of pre-built TopAppBar components to streamline your development and ensure consistency with Material Design guidelines. This article explores different TopAppBar variations, including those with centered titles, expandable layouts, and support for subtitles. ## Design system 103: Design system documentation that drives adoption DevFeed: [Design system 103: Design system documentation that drives adoption]() Original publisher: [Read original article]() Author: Carly Ayres Published: 2025-01-23T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Material Design](), [Figma](), [Google](), [ibm](), [GitHub](), [Code]() Tags: [communication](), [design](), [design-systems](), [developer](), [documentation](), [tools]() ### AI overview The article explains how clear, living documentation helps design systems drive adoption by turning abstract principles into practical guidance. It discusses consistency, onboarding, source-of-truth decisions, custom documentation sites, and collaboration between designers and developers, with examples from Razorpay, Bumble, GitHub, HP, Google, IBM, and eBay. ### Source excerpt Clear documentation transforms abstract design principles into practical tools. Here's how leading teams build and maintain living documentation that evolves alongside their design systems. ## Material Design for XR (Developer Preview) DevFeed: [Material Design for XR (Developer Preview)]() Original publisher: [Read original article]() Published: 2024-12-12T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [ui](), [Framework]() Tags: [building](), [design](), [developer](), [developer-preview](), [preview](), [tools](), [ui]() ### AI overview Material Design for XR is presented as a developer preview focused on building user interfaces that adapt to extended reality using familiar frameworks and tools. ### Source excerpt Building UI that adapts for XR with familiar frameworks and tools ## Custom Sliders in Jetpack Compose DevFeed: [Custom Sliders in Jetpack Compose]() Original publisher: [Read original article]() Author: sinasamaki Published: 2024-09-26T21:56:18Z Content type: tutorial Language: en Sources: [sinasamaki]() Topics: [Jetpack Compose](), [Material Design](), [ui](), [Code]() Tags: [article](), [code](), [jetpack-compose](), [material-design](), [modifiers](), [render](), [ui]() ### AI overview A tutorial on customizing Material 3 sliders in Jetpack Compose. It explains how to create custom thumbs and tracks, calculate the active fraction across arbitrary ranges, and build a reusable slider with snapping points and formatted thumb text. ### Source excerpt Create unique and delightful sliders for your app ## Material Design 3 for Compose version 1.3 DevFeed: [Material Design 3 for Compose version 1.3]() Original publisher: [Read original article]() Published: 2024-09-10T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Compose](), [Material Design](), [version]() Tags: [compose](), [exploring](), [material-design](), [material-design-3](), [release](), [version]() ### AI overview An article exploring the 1.3 release of Material Design 3 for Compose. ### Source excerpt Exploring the 1.3 release of Material Design 3 for Compose ## Material Design Components for Android 1.11.0 and 1.12.0 DevFeed: [Material Design Components for Android 1.11.0 and 1.12.0]() Original publisher: [Read original article]() Published: 2024-05-08T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Android](), [color]() Tags: [android](), [color](), [components](), [material-design]() ### AI overview A release update for Material Design Components for Android versions 1.11.0 and 1.12.0, covering new color options and carousel refinements. ### Source excerpt New color options and carousel refinements ## Why Your App Should Have Both Dark And Light Themes DevFeed: [Why Your App Should Have Both Dark And Light Themes]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2024-03-07T04:11:46.439000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [Dark Mode](), [Android](), [Jetpack Compose](), [XML](), [Material Design](), [Flutter]() Tags: [accessibility](), [android](), [android-development](), [dark-mode](), [flutter](), [jetpack-compose](), [material-design](), [xml]() ### AI overview This article explains why apps should support both dark and light themes for accessibility. It discusses how different visual conditions and preferences can make either theme more suitable, then outlines Android support for system theme switching and references implementation guidance for XML themes, Jetpack Compose, Material Design 3, and Flutter. ### Source excerpt You might have heard that your app should have a dark theme available. Some say it's because of preference, but it's actually also an accessibility thing. This blog post itself doesn't have the code to enable dark and light themes for the user. Instead, it explains why having both of them is essential and provides further reading on the topic -- yes, with links to some code and instructions as well. Accessibility of Dark and Light Themes Many people use everything they can in a dark theme. After all, staring at screens for a long time might be easier if the user interface uses darker colors. Using a dark theme instead of a light one also saves some battery. However, many people choose to use the dark theme because it is more accessible for them. For example, some vision issues might cause discomfort because of light or even wash out the rest of the person's vision. A white (or similar) background behind the text can cause these issues. Another reason is that dark themes often have better contrast (if they're designed properly). Now, if the dark theme is so great, why not just have the dark theme for the app and forget about the light theme? While dark theme is more accessible for many, some people benefit from light theme. For example, people with astigmatism may find light theme more accessible, and people with dyslexia might prefer light mode for readability. For reference, see, for example, this article: Dark mode: How accessible design raises the bar - Layth Sihan Luckily, defining light and dark themes in modern Android development is straightforward. Let's discuss the technical considerations of light and dark themes next. Technical Considerations Starting from Android 10 (SDK 29), there is a system setting for switching between dark and light modes. If you define your themes correctly, your app will respect that system-wide setting by default. To define a dark theme for your app using themes from XML files, follow the instructions in Android documentation: Imp ## Refining Compose API for design systems DevFeed: [Refining Compose API for design systems]() Original publisher: [Read original article]() Author: Yury Published: 2024-02-21T11:10:51Z Content type: article Language: en Sources: [Bumble Tech]() Topics: [Design system](), [Jetpack Compose](), [User Interfaces](), [API](), [Material Design]() Tags: [android](), [api](), [compose](), [design-systems](), [jetpack-compose](), [kotlin](), [material-design](), [user-interfaces]() ### AI overview This article explains how to design custom Jetpack Compose components for internal design systems. It compares restrictive APIs, which enforce predefined usage but limit extensibility, with relaxed Slot APIs that accept lambda-generated content and support more flexible component variants. ### Source excerpt Jetpack Compose both makes it easier and promotes usage of an internal design system by creating custom Compose components. But how should we build these components? In this article, we will take a look at possible implementations of a design component, explore their API verbosity and extensibility, and how we can find a balance between these characteristics to make Compose components both easy to use, enforce design system guidelines and extendable on demand. Let's get started! Design System and Compose A design system is a comprehensive set of guidelines, components, and rules that help to build cohesive and consistent user interfaces. The most common design system for Android developers is Material Design 3 which is available for Compose too. Custom design systems might be built on top of existing systems like Material Design or can be created from scratch. Compose provides all the tools that are required for this process. Design System NavigationBar Let's take a look at NavigationBar. A usual NavigationBar that we can see almost in every app. The design system in this case defines the following properties: Margin between the component borders and the content. Margin between the left/middle/right content. Preferred style of the left/right icons. Text style of the title. Restrictive API Compose implementation of NavigationBar is pretty straightforward. @Composable fun NavigationBar( title: String, modifier: Modifier = Modifier, leftButton: IconButton? = null, rightButton: IconButton? = null, ) { Row(modifier) { ... } } @Immutable data class IconButton( val icon: Painter, val onClick: () -> Unit, ) An API that allows only particular use of NavigationBar is a restrictive API. Such API ensures that developers will be able to use the component only in the predefined way, leaving no space for possible mistakes and inconsistency. Great at first sight, but has a major restriction -- missing extensibility. As soon as we continue making our apps bigger, we will eventually f ## Material Design 3 for Compose 1.2 DevFeed: [Material Design 3 for Compose 1.2]() Original publisher: [Read original article]() Published: 2024-02-07T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Compose](), [Material Design]() Tags: [compose](), [design](), [material-design](), [material-design-3](), [release]() ### AI overview This article explores the 1.2 release of Material Design 3 for Compose. ### Source excerpt Exploring the 1.2 release of Material Design 3 for Compose ## Meet Homepage - Your HomeLab Services Dashboard DevFeed: [Meet Homepage - Your HomeLab Services Dashboard]() Original publisher: [Read original article]() Author: Techno Tim Published: 2024-01-15T13:00:00Z Content type: tutorial Language: en Sources: [Techno Tim]() Topics: [Docker](), [Docker Compose](), [API](), [Open Source](), [Tailwind CSS](), [Material Design](), [Kubernetes]() Tags: [api](), [compose](), [configuration](), [container](), [css](), [dark-mode](), [design](), [docker](), [homelab](), [how-to](), [install](), [kubernetes](), [material-design](), [open-source](), [self-hosted](), [services](), [tailwind](), [tailwind-css](), [yaml]() ### AI overview A tutorial on setting up Homepage, an open-source HomeLab services dashboard, with Docker and Docker Compose. It covers configuration files, health checks, customization, icons, dark mode, and service links, with notes on Kubernetes compatibility. ### Source excerpt Meet Homepage, your new HomeLab services dashboard homepage! Homepage is an open source, highly customizable homepage (or startpage) dashboard that runs on Docker and is integrated with over 100 API services. It's easy to set up, looks good by default, and helps you keep track of everything you are running in your HomeLab and more. Today we'll set up Homepage and get it running in Docker in... ## Material Design Components for Android 1.10.0 DevFeed: [Material Design Components for Android 1.10.0]() Original publisher: [Read original article]() Published: 2023-10-25T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Android](), [Material Design]() Tags: [android](), [design](), [updates]() ### AI overview Material Design Components for Android 1.10.0 introduces updates, refinements, and a new way to transition between destinations. ### Source excerpt Updates, refinements and a new way to transition between destinations ## Introducing Firebase and Android Basics with Compose course DevFeed: [Introducing Firebase and Android Basics with Compose course]() Original publisher: [Read original article]() Author: Marina Coelho Published: 2023-06-02T00:00:00Z Content type: release Language: en Sources: [Firebase Blog]() Topics: [Firebase](), [Jetpack Compose](), [Android](), [android-development](), [Firestore](), [Authentication](), [Material Design](), [Monitoring]() Tags: [android](), [android-apps](), [android-development](), [authentication](), [beginner](), [compose](), [firebase](), [firestore](), [jetpack](), [jetpack-compose](), [launch](), [material-design](), [monitoring]() ### AI overview Firebase and the Android team announce the Firebase and Android Basics with Compose course, which teaches learners to build native Android apps with Jetpack Compose and Firebase services. The course covers UI design, recommended architecture, authentication, data storage, remote configuration, and performance monitoring. ### Source excerpt We teamed up with the Android team to build the Firebase and Android Basics with Compose course! ## Material Design Components for Android 1.9.0 DevFeed: [Material Design Components for Android 1.9.0]() Original publisher: [Read original article]() Published: 2023-05-17T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Android]() Tags: [android](), [components](), [material-design]() ### AI overview A release article titled "Material Design Components for Android 1.9.0" highlighting new ways to navigate and interact with applications. ### Source excerpt New ways to navigate in and interact with your applications ## Material Design 3 for Compose gets new components and features DevFeed: [Material Design 3 for Compose gets new components and features]() Original publisher: [Read original article]() Published: 2023-05-10T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Compose](), [Material Design]() Tags: [components](), [compose](), [features](), [material-design](), [material-design-3](), [release]() ### AI overview This article explores the 1.1 release of Material Design 3 for Compose, including new components and features. ### Source excerpt Exploring the 1.1 release of Material Design 3 for Compose ## Material Design at I/O '23 DevFeed: [Material Design at I/O '23]() Original publisher: [Read original article]() Published: 2023-05-01T10:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Google]() Tags: [conference](), [design](), [google](), [material-design]() ### AI overview The article covers Material Design at Google I/O 2023, including Material 3 updates and related online content from Google's annual developer conference. ### Source excerpt Get the latest Material 3 updates and online content at Google's annual developer conference ## Material Design Components for Android 1.8.0 DevFeed: [Material Design Components for Android 1.8.0]() Original publisher: [Read original article]() Published: 2023-02-02T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Android]() Tags: [android](), [applications](), [components](), [material-design]() ### AI overview Material Design Components for Android 1.8.0 introduces new ways to navigate in and interact with applications. ### Source excerpt New ways to navigate in and interact with your applications ## The future of design systems is complicated DevFeed: [The future of design systems is complicated]() Original publisher: [Read original article]() Author: Carly Ayres Published: 2023-01-31T00:00:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Primer](), [Figma](), [Material Design](), [Tooling](), [Accessibility](), [Google](), [Automation]() Tags: [accessibility](), [app](), [automation](), [design-systems](), [digital-design](), [figma](), [google](), [product](), [tooling]() ### AI overview The article examines how design systems are becoming more complex as digital products expand across form factors, use cases, accessibility requirements, performance expectations, and interconnected teams. It discusses the shift away from skeuomorphic metaphors, Google's evolution of Material Design, and the growing influence of tooling, automation, and code-inspired structures. ### Source excerpt We talked to several industry experts about how they're managing the future of design systems--from tooling to automation to accessibility. ## The Best of Material in 2022 DevFeed: [The Best of Material in 2022]() Original publisher: [Read original article]() Published: 2022-12-15T13:00:00Z Content type: article Language: en Sources: [Material.io - Material Design]() Topics: [Material Design]() Tags: [material-design]() ### AI overview A roundup of some of Material Design's top moments from 2022. ### Source excerpt Some of Material Design's top moments from the past year ## Material Design at Android Developer Summit 2022 DevFeed: [Material Design at Android Developer Summit 2022]() Original publisher: [Read original article]() Published: 2022-10-24T10:00:00Z Content type: news Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Android]() Tags: [android](), [code](), [design](), [developer](), [material-design](), [summit](), [tools]() ### AI overview An overview of new Material Design developments presented at Android Developer Summit 2022, covering design, code, and tools. ### Source excerpt Design, code, and tools: everything new in Material at this year's ADS ## Material Design 3 for Compose is now stable DevFeed: [Material Design 3 for Compose is now stable]() Original publisher: [Read original article]() Published: 2022-10-24T08:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Compose](), [Material Design]() Tags: [compose](), [material-design](), [material-design-3](), [release](), [stable]() ### AI overview The article announces the first stable release of Material Design 3 for Compose. ### Source excerpt Exploring the first stable release of Material Design 3 for Compose ## MDC-Android Stable release 1.7.0 DevFeed: [MDC-Android Stable release 1.7.0]() Original publisher: [Read original article]() Published: 2022-10-20T10:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Android]() Tags: [a11y](), [android](), [design](), [material-design](), [material-design-3](), [release](), [stable]() ### AI overview MDC-Android Stable release 1.7.0 includes Material Design 3 shape guidance and improved accessibility. ### Source excerpt with Material Design 3 shape guidance and improved a11y ## Redesigning Material.io to expand visual and interactive expression in Material Design 3 DevFeed: [Redesigning Material.io to expand visual and interactive expression in Material Design 3]() Original publisher: [Read original article]() Published: 2022-10-18T10:00:00Z Content type: article Language: en Sources: [Material.io - Material Design]() Topics: [Material Design]() Tags: [design](), [interactive](), [material-design](), [material-design-3]() ### AI overview The article discusses redesigning Material.io to support greater visual and interactive expression in Material Design 3 guidelines. ### Source excerpt Pushing visual and interactive expression in design guidelines with Material Design 3 [Next page]()