# Material Design 3 for Mobile Application Development > Material Design is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material Design streamlines collaboration between designers and developers, and helps teams quickly build beautiful products. > \- [https://m3.material.io/](https://m3.material.io/) ## **Introduction** Material Design was first introduced in 2014 with the following principles: * Material is the metaphor * Bold, graphic, intentional * Motion provides meaning ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684810347041/c311a422-8bf4-48c9-aae3-54076975ace9.png align="center") --- To talk a little about history, the archived edition of Material Design 1 can be located at this [link](https://m1.material.io/). Before the introduction of Material Design, there were no explicit instructions regarding the design of Android applications. It also suggests **do's** and **don'ts** for UI practices. Subsequently, [Material Design 2](https://m2.material.io/) was unveiled, featuring improved design principles and a range of UI elements. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684811025564/c148f4dd-e303-4575-b9df-246f0d1a0104.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684811067542/4779fbf6-bd9d-4748-af83-632c12187929.png align="center") Generally, Material Design components are first adapted to newer Android OS versions and Google apps. M2 was the successor to the M1 with a refined design system. But the [latest version](https://m3.material.io) of the material design, **Material You** or **M3** is the major overhaul and is visually more appealing than the previous M2. Also, it has a wide range of resources available. --- ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684814433126/50b7b614-9a58-49e9-bb93-e44f5e2da672.png align="center") Here are some quick links to the resources related to Material 3 design, * [Material Design 3](https://m3.material.io/) * [M3 Components](https://m3.material.io/components) * [Figma design kit for M3](https://www.figma.com/community/file/1035203688168086460) * [M3 for Jetpack Compose](https://m3.material.io/develop/android/jetpack-compose) * [M3 for Flutter](https://m3.material.io/develop/flutter) and [Flutter showcase app](https://flutter.github.io/samples/material_3.html) * [Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder) * [Material Design Blog](https://material.io/blog) * [Material Symbols and Icons](https://fonts.google.com/icons) --- ## **Material Design Components** ### **Action Components** These action components include user interaction-related components like clicking and making a new action. The action components contain button, floating action button, icon button, and segmented button. ![Action Components](https://cdn.hashnode.com/res/hashnode/image/upload/v1685500404557/86b76869-1149-4679-b08c-2091e5c00204.png align="right") ### **Communication Components** Communication components include the message and indicator components to notify the counts, status, progress, and message. These components include badges, linear progress indicator, circular progress indicator, and snackbar. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685501746152/f0cdf53f-f34f-4bda-804c-f49cbc4bee76.png align="center") ### **Containment Components** These containment components are used to show the information along with user-related actions. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502592157/fa20a9f8-e9d1-4d54-a79c-dce586e46a27.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502489552/75e105b3-7595-4402-ab4c-ffc7539a4da4.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502537364/c290d5b8-92ea-4836-822f-e33011d9ad65.png align="center") ### **Navigation Components** These navigation components help the user to switch between screens and navigate from one to another. A wide variety of navigation options are provided with the bottom app bar, navigation bar, navigation drawer, navigation rail, and tabs. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502773271/5e61562b-4b2e-4d13-9807-6220bd7ee528.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502817570/754eee1f-3d0b-4ab5-8dcf-73604ccadb23.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502865296/11309196-c958-4c77-a64c-4e2cd146cd16.png align="center") ### **Selection Components** These selection components help the user to choose from the provided options. Generally, checkbox, chips, date pickers, menu, radio button, sliders, switch, and time picker falls under selection components. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685503006085/ef632b7a-fab9-4d5e-b5bc-b288e422659f.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685502959364/39dbe80c-2707-4df4-b864-328b99451b46.png align="center") ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685503035150/347b6c83-f8f4-4bd2-89ad-d931ee79def9.png align="center") ### **Text Input Components** These text input components enable the user to write and edit the text content ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1685503406286/a1ccb5f2-2872-4c64-98fb-84368b697714.png align="center") --- ### **Pros** * Design principles to make consistent UI * Well-researched by the Google Team * Ready to use components with simple API * Interaction animations already implemented inside the components * Customizable to match our own design * Easy to configure and switch the theme * A collection of freely available fonts and icons * Guide to use animations and transitions ### **Cons** * The design may feel obsolete if not updated to newer iterations over a period * The native application feel may not come on iOS devices * Since most Google apps adapt Material Design, some users might associate your app with Google apps * Too many color choices --- ## **Conclusion** The article might feel incomplete without this section, so here it is. 😊 Material design can be used to make a quick prototype of the applications as well as full-fledged scalable production apps. The designers can take these design guidelines to incorporate newer UI concepts to improvise the application's UI/UX to suit the app's requirements. Every design is not perfect and this material design will have another iteration. M4 might come after a few years and M3 will serve its purpose till then.