Posted by Nick Rout

wrap up header image

It’s a wrap_content!

The third matter within the MAD Skills sequence of movies and articles on Modern Android Development is full. This time round we lined Material Design Components (a.ok.a MDC). This library gives the Material Components as Android widgets and makes it straightforward to implement design patterns seen on, akin to Material Theming, Dark Theme, and Motion.

Check out the episodes and hyperlinks beneath to see what we lined. We designed these movies to carefully comply with our current sequence of MDC articles in addition to current pattern apps and codelabs, so that you’ve received quite a lot of methods to interact with the content material. We additionally had a Q&A episode that includes engineers from the MDC group!

Episode 1: Why use MDC?

The first episode by Nick Butcher is an summary video of this complete MAD Skills sequence, together with why we advocate MDC, then deep-dives on Material Theming, Dark Theme and Motion. It additionally covers MDC interop with Jetpack Compose and updates to Android Studio templates that embody MDC and themes/types greatest practices.

Or in article kind:

Episode 2: Material Theming

Episode 2 by Nick Rout covers Material Theming and goes by way of a tutorial on the way to implement it on Android utilizing MDC. Key matters embody organising a `Theme.MaterialComponents.*` app theme, selecting colour, kind, and form attributes — utilizing instruments on —and eventually including them to your theme to see how widgets mechanically react and adapt their UI. Also lined are useful utility courses that MDC gives for sure situations, like resolving theme colour attributes and making use of form to photographs.

Or in article kind:

Episode 3: Dark Theme

This episode by Chris Banes will get actually darkish… It takes you thru implementing a darkish theme for an Android app utilizing MDC. Topics lined embody utilizing “force dark” for fast conversion (and the way to exclude views from this), manually crafting a darkish theme with design decisions, `.DayNight` MDC app themes, and `.PrimarySurface` MDC widget types, and the way to deal with the system UI.

Or in article kind:

Episode 4: Material Motion

Episode 4 by Nick Rout is all about Material’s movement system. It carefully follows the steps within the current “Building Beautiful Transitions with Material Motion for Android” codelab. It makes use of the Reply pattern app to reveal how you should utilize transition patterns —container remodel, shared axis, fade by way of, and fade —for a smoother, extra comprehensible consumer expertise. It goes by way of situations involving Fragments (together with the Navigation part), Activities, and Views, and can really feel acquainted should you’ve used the AndroidX and platform transition frameworks earlier than.

Or in article kind:

Episode 5: Community tip

Episode 5 is by a member of the Android group—Google Developer Expert (GDE) for Android Zarah Dominguez—who takes us by way of utilizing the MDC catalog app as a reference for widget performance and API examples. She additionally explains the way it’s been helpful to construct a ‘Theme Showcase’ web page within the app she works on, to make sure a cohesive design language throughout totally different screens and flows.

Episode 6: Live Q&A

To wrap issues up, Chet Haase hosted us for a Q&A session together with members of the MDC engineering group —Dan Nizri and Connie Shi. We answered questions requested by you on YouTube Live, Twitter, and elsewhere. We explored the origins of MDC, the way it pertains to AppCompat, and the way it’s developed through the years. Other matters embody greatest practices for organizing your themes and assets, utilizing totally different fonts and typography types, and form theming… A whole lot of form theming. We additionally revealed all of our favourite Material elements! Lastly we regarded to the long run with new elements popping out in MDC and Jetpack Compose, Android’s subsequent technology UI toolkit which has Material Design inbuilt by default.

Sample apps

During the sequence we used two totally different pattern functions to reveal MDC :

  • “Build a Material Theme” (a.ok.a MaterialThemeBuilder) is an interactive undertaking that allows you to create your individual Material theme by customizing values for colour, typography, and form
  • Reply is without doubt one of the Material research; an e mail app that makes use of Material Design elements and Material Theming to create an on-brand communication expertise

These can each discovered alongside one other Material research pattern app — Owl — within the MDC examples GitHub repository.