The components of Material Design (Android Dev Summit '18)

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

"upcoming releases: bottom sheet"

What does that mean? Are they going to re-implement it? I would love, the current implementation is really bad, doesn't even allow customization without reflection.

👍︎︎ 3 👤︎︎ u/bernaferrari 📅︎︎ Nov 11 2018 🗫︎ replies

This is a good video. Thanks MDC team. It's still a bit complex, but it's great to hear "how themeing with MDC should be done in 2018"

👍︎︎ 1 👤︎︎ u/leggo_tech 📅︎︎ Nov 11 2018 🗫︎ replies
Captions
[MUSIC PLAYING] CAMERON KETCHAM: Hey. My name is Cameron Ketchum. I work on the Material Design Components Team, or MDC Android for short. And I work out of the New York City office. GAUTHAM SAJITH: And my name is Gautham Sajith. I also work on MDC Android. And I'm based in San Francisco. CAMERON KETCHAM: And we're going to talk a little bit about Material Design Components and how you can theme your app. So quickly, what we're going to discuss. A brief history of Material Design, what Material Theming is, using Material Design Components, the Color, Type, and Shape subsystems, how to apply these subsystems, as well as our release process, and a little bit about contributing. So quickly, just a brief history of Material Design Library. Material Design was first announced in 2014. And there wasn't a Design Library. Then at I/O in 2015, a year later, Google finally announced the Design Support Library, which helped bring a lot of code for Material Design for certain components, including Navigation Drawer, Floating Action Button, Snack Bar, et cetera. But there still wasn't that much. And at I/O this year, we announced Material Theming, with the explicit goal to have a larger engineering team behind it. So we're working on implementing a lot of the components, based on the Material Design spec. So Material Theming. What was the original problem with Material Design? Well, it was a great initial version of a design system. It worked well in a lot of cases. But it fell short with the expression of brand. So here's an example of an email app. And it looks kind of like every other app that use Material Design. And it's kind of hard to tell that it's even an email app, in my opinion. Here's an example of the kinds of things that you can do with Material Theming to make your app stand out. And we're going to get into those details in a bit. So quickly, how does theming work? Basically, Material Theming is a system that we've designed to help you create you unique design for your app. You just need to decide on a few things, such as fonts, colors, shapes, et cetera. And this is a Material Design sketch plugin that can be used, which should help you create design ideas that you can use to build your app. Take a look at material.io for more info about that tool. Here's a few Material studies that we've done, which just show examples of Material Theming. And you can see that they all look quite different. And there's also a lot more of these on material.io. GAUTHAM SAJITH: Cool. So now let's get talking about how to actually get started using the Material Components Library. So imagine this scenario, that we'll come back to a couple of times throughout this talk. You've got this fairly plain app that you built from just straight AppCompat. And your teammate asks you to redesign this using the Material Design spec. So how do you go about doing this? So you may be familiar with the Support Library Design package, this v28 version, that you can use to get our library. And you can use this. However, this is no longer being updated. So you should try and use the conductgoogle.android Material Library, as well as Android X. One thing to note. You can't use the Conduct Android Support and Conduct Google Android packages together. So if you want to switch over to Android X, there's a nice refactor tool on the developer.android site that'll help you refactor your app. And then, the next thing you'll need to do is use our Material Themes. So we provide the themes that correspond to the existing AppCompat themes. And these themes provide you with a range of attributes, to help you do some of the Shape, Color, Type theming that we're going to be talking about, as well as the default styles that you can use across all of our components. So for example, if your theme extends from AppCompat Light, all you need to do is switch over to theme.materialcomponents.light. And you should have all of our attributes, as well as all of our component styles. So as I mentioned, there's a lot of new attributes that we're going to be introducing. And if you try to use our components without these attributes defined, you're going to get a Theme Enforcement Error at runtime. Pretty much the styles look for these attributes in your theme. And if they don't exist, it's going to crash at runtime. So the solution to this is, of course, use our theme. It'll give you all the attributes. If you're not quite ready to switch over to our full theme quite yet-- you just want to get the attributes and none of the styles-- you can use what are called the Bridge themes. And what these Bridge themes do is they provide you all the attributes you need to do styling. But they don't give you any of the default styles. So you can opt into using our component styles one by one, as you're ready to switch over. So for example, if you're extending from a Bridge theme, and you want to opt in to use our BottomAppBar style, you would define the default BottomAppBar style in your theme. And then all of your BottomAppBars would get the Material Component style. CAMERON KETCHAM: So now, we're just going to talk a little bit about some new components. With Material Theming, we introduced a few new things, such as the BottomAppBar. BottomAppBar displays navigation and key actions at the bottom of mobile screens. Which is great for people who are just one-handed, using their thumb to interact with the device. It's pretty simple. It uses a Coordinator Layout, to coordinate the motion between a BottomAppBar and a Floating Action Button. So here, we just have simple XML for the BottomAppBar. A few of the things that you can do is set the vertical offset of the FAB. You can also set the FAB Cradle Margin, which is the distance between the FAB and the BottomAppBar. As well as the Rounded Corner Radius, which is the corner where the BottomAppBar meets the FAB. You can have the BottomAppBar hide on scroll. And you can also set this Alignment Mode. It will automatically animate the FAB for you. And it's useful if you're navigating between different fragments or views and want to give a visual distinction between different screens. If you're already using a toolbar, it's super easy to start using the BottomAppBar. If you're setting the Support Action Bar for the toolbar, just set it for the BottomAppBar instead. And everything else works the same way. But you can also use an On Menu Item Click Listener directly on the BottomAppBar. GAUTHAM SAJITH: We also have what's a revamped version of the Button that we're calling Material Button. It's been revamped to make styling much simpler. So if you just put this Material Button component in your XML, you'll get a styled Button. However, if you're using our full theme, you can actually just use a Button tag in your XML. And we do what's called Custom View Inflation, where this tag will automatically inflate into a Material Button tag. And then of course, you can set the disabled state on this Button. And all the states will transfer over. Colors will transfer over. You can set an icon on this Button, just by setting the icon attribute, as well as this icon style. And this style's optional. But what it'll do is it'll adjust the padding slightly, to achieve a more even visual balance on the Button when the icon is present. You can change the icon size, just using the attribute. You can set the Outline Button style, which is one of the default styles that we provide for this Button, to get this hairline outline Button. You can set the background tint of the Button, by setting the Background Tint attribute. And you can provide a color state list here. So in this case, it's purple when the Button is enabled, and gray when it's disabled. You can set some other attributes, such as Stroke Width, Stroke Color, Corner Radius on this button, to get some styling. You can also create just an icon-only Button. In this case, we're setting the icon, as well as setting the icon padding to zero, so that the icon is centered in the Button. And we're also setting in the content description on this Button. So since there's no text, for accessibility reasons, you should set a content description, so that people will know what the Button's about. You can also set the Ripple color on the Button. So for example, if you just set purple Ripple on here, it'll be applied to the Button. You can set either a color state list or just a hex value here. And as you can see, it's like a purple Ripple on the button. But that's because there's some alpha already inherent in the Ripple. So it's a purple Ripple on top of a green Button. And these are some of the examples of the other components that we provide in this library. We have several different styles of Chips. We have text fields with the filled and outline styles, password show and hide functionality and a character counter. And then we have some highly customizable tab layouts as well. CAMERON KETCHAM: OK. Now a little bit about theming. MDC relies heavily on the built-in theming of Android. So here's just a quick refresher of how themes and styles work. Anything applied directly to a view in XML is used first. So changing an attribute here will only change the single view. You can also update the style. So if you set an attribute in a style, changing this here will affect any views that are using this style. If it's not defined in the style, or there's no style set, it'll go back to the default style. So here, if you want to change the way a whole group of components look, you can set the default style. And finally, if the attribute isn't defined anywhere else, it'll look in the theme. And the way Material Theming works normally is there's a set of top-level attributes that you should override in your theme for typography, colors, shapes, et cetera. And also the default styles for all of the components. But if you need more fine-grained control, you can hook in in any of these layers and change just the color of a single view, or just the color of all of a certain component. So here's an example from our library of the Chip style. It defines a few values which reference theme attributes. And the power of this design comes from the fact that other styles in our library can reference these same attributes. So here's an example of a Button. And both of these have the same shape appearance, which is the Small Component Shape Appearance. That means that if we want to update the look and feel of our app for these shape-- for these small components, all we have to do is update this attribute in one place in our theme. And we'll show you an example of how to do that in a little bit. What are the effects of each of these theme attributes? Unfortunately, it's not totally straightforward. We try to apply theme attributes in a way that will make sense. But it's definitely possible for you to pick values for different colors that may not look great together. You should probably check out material.io for each component to see how it'll all react. But another simple possible-- another simple solution that you could do, potentially, is to make a debug theme, which just sets wacky values to different attributes. And then see how things look. But for instance, here's the BottomAppBar page on the material.io site. And you can see there that the container itself is a surface. And the icons are the On Surface. And we'll talk about what attributes you can modify, as well as things to look out for in the next section. So theming subsystems. We currently have three theming subsystems, Type, Color, and Shape. And these are the knobs that you, as a developer, should tweak in order to theme your app. Hopefully, most of you are familiar with text appearances. But we've incorporated Material Theming, which uses theme attributes, to reference these text appearances. So here's an example of a toolbar which uses the Headline Six attribute, rather than style directly. And here is some copy that uses the Body One attribute. These are the type attributes that we've defined. So if you override any of these in your theme, you can set the style and look of your app. Color's another one. And you're probably familiar with the AppCompat Color Primary and Color Accent. For Material Theming, we have a wider range of colors, so that you have more control over the color of different parts of your app. These are the semantic names of the expanded palette of colors that work with Color Theming. On the top here, we have Primary, Primary Variant, Secondary, Secondary Variant. Those are all the brand colors. Those are the things that you should generally theme to be the style of your app. There's also a Background, Surface, and Error colors. You can style those, but you don't necessarily have to. And then, the On Primary, On Secondary-- those On variant of colors-- those need to be accessible when they're drawn on top of the other color. So for instance, On Primary, that will be drawn on top of the Primary colors. So if you have text that's shown on top of the Primary background, it should be the On Primary color. These are the color attributes that we've defined. You can see that there's a lot of new ones. We tried to reuse some that came from AppCompat. And we also have the Android Color Background that we use, which is just the regular Android version of that attribute. Shape is another subsystem that you can theme. And it all happens with MaterialShapeDrawable. So we're adding MaterialShapeDrawable as the background for shape themable components, such as Buttons, Cards, FAB, BottomAppBar, BottomSheet, Chips, et cetera. And the way it works is with edge and corner treatments. So we have edge and corner treatments defined for rounded and cut corner, which is pretty much every Button or interactable component that you're going to find. But you can always create your own as well. So here's an example of Kotlin code, which defines a rounded corner treatment. And sets that to the MaterialShapeDrawable to apply just rounded corners to everything. And here is the XML version as well. So if you want to do it in XML, we have a new attribute called Shape Appearance. And it's similar to the Text Appearance. The attributes here are the Corner Family and the Corner Size. And this sets it to be a rounded corner with 24 dp radius. And you can override individual corners. So here, we're just overriding the top left corner to be cut and the bottom right corner to have a corner size of zero. And you can do the same thing in XML. One thing to notice is that we're using a Shape Appearance Overlay here, which is basically the same thing. Except for we only define the attributes that we want to override. So it's similar to a theme overlay, in that the Material Button on its own already has a shape appearance by default. And here, we're just setting the top left corner to be cut and the bottom right corner to be zero dp. Everything else will be inherited from the style of the Material Button. One key idea of Material Theming is to add consistency to your app. So we've defined these shape mappings to help. These are different groups of components that can help give your app a more consistent look and feel, by connecting surfaces through shape. So there's small, medium, and large components. And these are the attributes that you can set in your theme. So if you want to restyle all the small components to have a cut right corner or something, you can do that. Here's an example where, just like I said, we're overriding the small component style. So we redefined the small appearance-- the Small Component Shape Appearance in the theme to our style. And here, we're setting the top right corner to be cut. And we're also setting the parent here, so that will inherit all of the other-- the rounded corners for the other parts. Shadow is something that we want to mention as well. Native elevation is supported for convex shapes on lollipop for API 21 and up. But we're backporting shadows to an API of 15 for both concave and convex shapes for common cases, such as rounded or cut corners, as well as for the BottomAppBar. Because this has the cutout inside of it, it won't get native shadows. So we fake the shadow with a gradient. GAUTHAM SAJITH: So now that we've heard a bit about our theming subsystems, let's look at how to actually apply those to your app. So coming back to this scenario again. Say you have this AppCompat app that you want to apply some of these theming subsystems to. So we're going to be building something that looks a little like this. And obviously, when you build your own apps, it'll look much more beautiful and cohesive than this. But we're tweaking as many knobs as we can to show you some of the functionality of what we built. So first thing you'd have to do is if you're using an AppCompat Light No Action Bar theme, you can switch over to the Material Components theme. And in this case, you'll notice we're using the Bridge theme, because we want to opt into using those components one by one. But generally, we recommend that you switch to the full theme, the Regular theme, and see how it looks first before trying out the Bridge theme. So let's say, first thing you do is you set these theme Color attributes. So some of the existing ones that you already know are Color Primary and Color Secondary. Those still exist. And then, some of the new theme Color attributes, such as Color On Primary, On Secondary, Color Surface, and Color On Surface are also set. You'll see this Color Secondary doesn't really show up anywhere in your app yet, but it will. Next thing we want to do is get Material Buttons. So before we had those AppCompat Buttons. And then if you set the Material Button style in your theme, all of your Buttons should turn into Material Buttons when you change the XML tag. As I mentioned before, if you're using our full theme, this inflation happens automatically. So you don't actually have to change this XML at all. We have a bunch of other default styles that we've laid out here. All of our components have a default style that you can set in the theme. It's generally just component name plus style. For example, if you want to set the Card style, you would set Material Card View Style in your theme. And then, we're going to be applying-- you should also change the Card View to Material Card View in this case in your XML. And then we're going to be applying some attributes to these Cards. So for instance, you can set Card Elevation, Stroke Color, and Stroke Width. And that'll show up across all of your Cards, because it's setting the default style. And all the Cards look at this default style. And then, say you wanted to change the base style of all the Buttons. You would define your own Button style and set the parents of it to Outline Button, which is one of our default styles. And then all of your Buttons change into Outline Buttons. We can now apply some shape theming to all of your Buttons. So we're going to define this shape Appearance Shape to Button style. And in that Button style, we're going to set the right corners to be cut and the left corners to be rounded. And we're going to set the corner size. And now, you have this arrow-shaped Button. You can also do this using a Shape Appearance Overlay, since Buttons have a rounded corner by default. You don't really have to set the rounded corner for the left side. So if you use a Shape Appearance Overlay, you can just set what you're changing. And it'll take effect as normal. And then, say we wanted to have some icon Buttons, you would define this Icon Button style. Set the paddings and min widths as you want. And then apply this to your Button directly in the XML, as well as setting that icon and content description. And then you have this Share icon Button, instead of that Share text Button. You can also switch over to the BottomAppBar. So for this, you'd have to set the BottomAppBar style in your theme. And then, remove the Top App Bar from your XML layout. And add this BottomAppBar here. You can also add a floating action button cradled into this BottomAppBar by adding the floating action button to your layout. And then setting the Layout Anchor attribute to point to the ID of the BottomAppBar. You'll notice that this FAB has that teal color from AppCompat. And that's because we haven't set the default floating action button style yet. So once you set that, you'll see that it's now using Color Secondary and Color On Secondary. And it has that Ripple effect as well. Then we can do some text styling for the content of our Cards. Say you want all of your text to be Color On Surface, rather than whatever it was previously. We're going to be using what's called a Material Theme Overlay, which I'll talk about in just a second. But this Material Theme Overlay pretty much sets the theme for all the contents of that component. So in this case, we're setting the text Color Primary and Tertiary to set the text color of our Notes here. And so Material Theme Overlay, you might have heard of Android theme. It's the way you can style a subsection of your view hierarchy. And one common usage of this is to style say a dark-colored toolbar in your app. The shortcoming of Android theme is that it doesn't work in default styles. So for instance, if you wanted to style all of your Cards, you can't really set Android theme. So Material Theme Overlay is an attribute that we've defined that's supported by our components. And it does work in default styles. So you can set this in your default styles for your components. And have it theme the subviews of your components. Lastly, we'll do some TextAppearance theming. So previously the title had this hard-coded text appearance style. Now we're going to be switching over to our new TextAppearance attributes. And similarly, for the text-- for the Note body as well. And then, we can apply some styling to this. So for example, if you change Headline Six to be Comic Sans for instance, you can change-- all the components that use Headline Six in your app should now look like this. So why go through the trouble of doing this? Why go through the trouble of using top-level attributes throughout your styles? What's the reason? And generally, we do this because we want to be able to style your entire app using only these top-level attributes. So say, for instance, your teammate came up to you and said, "Hey, our brand colors are changing now. So actually we want this maroon color instead of these blues that we had." All you'd have to do is switch some of these top-level color attributes. And your whole app is rethemed. Similarly, if you want a dark theme, or a fake dark theme of sorts, all you'd have to do is change a couple of these other Color attributes. And the components should all respond appropriately to that. And you have a different looking app. CAMERON KETCHAM: Now we're going to talk a little bit about custom components, and how you can use styles in some of your components that you've created. There's really nothing magical about the way our components use theming. It's all just basic Android theming. So you can use it in your components as well. You just have to create a default style, pass that default style attribute into your constructor, and use Obtain Styled Attributes. So let's go through that. Here we have a definition of a theme and some attributes. Here we're creating a default style attribute and setting it in our theme. So we have this My Custom View style. And we're setting it to this widget.mycustomview style that we've defined somewhere in our theme. So this will mean that any components that use this My Custom View-- or any of these My Custom Views will use this style by default. You also can create a styleable, which holds a few different attributes. And then you would just need to use these in the constructors. So here's an example of a constructor for a view. Here, we pass in the default style, which we created previously. And we pass this in here, so that it can pick up that default style if nothing else was set. And then raising Obtain Styled attributes. And we pass in the styleable that we just created, as well as the default style attribute that was passed into the constructor. And finally, a fallback style that can be used as a last resort for finding attributes. And then, just read those in. And that's basically how our components work. So you can definitely do it yourself as well. And also extend the systems for your use cases, right? Like if you have the need for more attributes in some case, you can definitely add those in. It might be a little bit more work on your part. Because you'll have to update styles for all of the components that you're using to reference those attributes, since our components that we're writing aren't going to be referencing them. But if you need it, you can definitely do that. Here's an example of an attribute. Just create it, and define it in your style. And then reference it. Define it in your theme, and then reference it in styles or elsewhere. And now, a little bit about our process. We've had a few releases. The 1.0 went out in Jul-- was cut on July 20th. And it's been a little while. But now, with the Android X Jetpack Refactor finish, we can release more frequently. Because they're not tied to the Support Library. So we're trying to ramp up our releases. And we finally cut 1.1 Alpha 1 October 31st. And we're definitely trying to do this more frequently, around once a month at least. The 1.1 Alpha had the Type theming, Color theming, and Dark theming that we've talked about in this, plus lots of bug fixes and performance improvements. In the upcoming releases, we're going to have a Shape theming, which I talked about. In 1.1 Alpha, the Shape theming subsystem exists, but none of the components are actually responding to those themed attributes yet. But with the next release, it should. We also updated some styling for dialogs, bottom sheet menus, those sorts of things are all coming. And as far as contributing and filing issues, GitHub is where our code is. So if you're interested in taking a look, just go on GitHub. You can take a look at all of our code. It's open source. And also, you can check GitHub for instructions on how to submit bug reports. We're trying to figure out what works best. Right now, we're taking bug reports at this issuetracker.google buginizer component. But we're looking at different ways to make it more obvious what we're working on. And trying to integrate more with the community. And here's a few more resources. Material.io site is great, especially the Android section. Definitely check us out on Discord if you're interested in chatting with us, or are interested in helping us have a PR-- an idea for anything. Just come and chat with us. We have a tag on Stack Overflow. So if you have questions about implementation, you can ask something there. We're watching that, and we'll respond. And then we have a few Codelabs. You can find the link to those Codelabs on this GitHub page. And that's pretty much it. Thanks for coming. GAUTHAM SAJITH: Thank you. [APPLAUSE] [MUSIC PLAYING]
Info
Channel: Android Developers
Views: 63,749
Rating: 4.9172153 out of 5
Keywords: type: Conference Talk (Full production);, pr_pr: Android, purpose: Educate
Id: DPH3F0v1jB0
Channel Id: undefined
Length: 29min 20sec (1760 seconds)
Published: Thu Nov 08 2018
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.