 Hi, guys. Can you hear me, everybody? Yes, OK. So let's get started. I'm here to talk about new material design patterns in Android L on the web everywhere. So I'm Soham, a little bit about me. I'm the founder at Trivius, also the creator of this Android application called Skyro. It's on the Play Store. We have a lot of users and also an organizer with BLRDroid. How many of you have heard about BLRDroid? Great. So we organize meetups. We meet almost once a month and you should come at our meetup. So we're at BLRDroid.org. Here's how you can reach out to me. I tweet at S0H4M. Here's a little bit about the agenda for today. We'll begin with understanding more about material design. So how many of you have heard about material design? So how many of you have seen a phone running material design or seen material design? So cool. A lot of you have seen that. So we'll begin by understanding what is the philosophy behind material design. A lot of you have seen material design. But how many of you have kind of understood what material design is and why it's been created? Next, we'll look at the concept of bold, graphic, and intentional, and some of the design principles behind material design. We'll also have a look at motion, animation, and how that's done. And finally, we'll also have a look at some of the elements in material design. That's the kind of takeaway that you can have from the session. You'll understand how buttons and some of the other elements are different from KitKat and how you can change that in your application. That's the takeaway. So what are the goals of material design? So this is the first question that you should come. That should come in your mind. So the goals of material design are, we've had design for a long time. Design is not something that's new. Design is there in print, in magazines, in newspapers. Design is there in almost everything, in architecture, even in software. So design is there everywhere. So the goal of material design is to create a visual language that combines these classical good principles of good design that's everywhere, and combine it with technology and science. So you have design principles everywhere, like I talked about architecture, about magazines, a lot of other places. The idea is to combine that with a new medium, which is technology, science, and so on. Goal is also to create a platform that works across different form factors. You have TVs, you have Android Wear devices, you have a bunch of other devices. Goal is to create a visual language that works uniformly across different black problems. So a lot of the stuff that I talk about today will be on google.com slash design. A lot of the presentations are from assets and stuff are from there. We'll just be covering a subset of the whole feature set of material design. We'll just get started. And if you want to know more, please go to google.com slash design. So what is material design? That's the first question. So material design is a comprehensive guide for visual, motion, and interaction design. So to understand that, let's look at something called affordances. How many of you have heard about this term called affordances? One, two, OK, cool. So when you look at this, what is the first thing that you kind of understand? That comes to your mind when you look at this picture. What's the first thing that comes to your mind? Tea? What else? Boiled water. Simplicity. The idea here is, when you see a cup, or a kettle, or anything like that, the first object that you note, that your brain notes, is the handle. Intuitively, nobody teaches you to look at the handle. But you know it's a handle. And that's how you identify this thing. If you didn't have a handle, it would be a completely different kind of an object. You see the handle, and you know that it's something that can be lifted, or something that can be held. So your brain, just by looking at the shape of it, by sensing it, it knows that it can be held, and you can put something in it. It takes it one step further, and it knows that you would rather put something like tea or coffee than put wine in this. The idea here is that, intuitively, without any kind of teaching, your brain knows how to use this device, or this object. That is called an affordance. An affordance is a situation where an object's sensory characteristics intuitively imply its functionality and use. What that means is, for example, if you have a door which has a handle, just by looking at the handle itself, your brain knows how to use the door. Nobody teaches you how to use the door. You see the handle, you know how to pull it, or push it. In a similar way, if you have a knob, you know that you're supposed to twist the knob. The idea is that we're trying to create devices, objects, that you already know how to use. That's called an affordance. So a knob affords twisting. That's the action that is afforded by the knob itself. So in a very similar way, you see chairs. They are a certain shape. Just by looking at the shape of the chair, you know that you're supposed to sit on it. A chair affords sitting. So this is the concept of an affordance. Coming back to material design. So material design really tries to enhance this concept of an affordance. So we have the affordance of a material. And the material here is paper and ink. So how many of you have interacted with paper before? Everybody? You've either read something, you've written on something. So everybody's familiar with the concept of paper. So we already know how to interact with paper. And that is what material design tries to use. So what happens in a virtual medium, like a TV or a tablet or whatever, you don't really know how to use that. So the first time you're using that, you have to learn a lot of new things. Like this is how you go back home. This is how you interact with the paper, interact with the medium and so on and so forth. But with material design, everything is basically a sheet of paper. So they're trying to tell you that since you know how to use paper, and you know how paper affords different kinds of characteristics, the same thing will happen to you when you use a virtual medium that uses paper. So they're trying to bring this paper concepts in a virtual medium, which is on a tablet, on a watch and other places as well. So you'll have surfaces, you'll have edges, just like a piece of paper has surfaces, edges. You'll have the same thing in a virtual medium. So let's talk more about paper. So here, typically in Android before this or in the web, all the objects that you would create are created very haphazardly. So you would create like a button and action bar and 10 other things, right? In material design, we encourage you to think that each object, each button, each action bar, each list is a separate element. It's a separate set, it's a separate piece of paper. It's very thin, it's about one DP thin, and all of those are separate sheets of paper. Is that clear? So you can have different objects over here, you have different action bars and lists and so on. All of those are different pieces of paper. And the cool thing is here is, if there are different objects, independent sheets of paper, you can assign different properties to those pieces of paper. So for example, you have a button, you have a background. So let's say we are designing a music player application. The background might be an album art. So the album art is basically the base sheet of paper. On top of that, you might have a list of the songs or the list of albums that you're playing. That is another sheet of paper. On top of that, you might have multiple other buttons, like let's say playing music, pausing, rewind and so on. Those are again separate sheets of paper. And on top of that, right, you have the system navigation bar and the status bar, which are again separate sheets of paper. So these are all arranged vertically and they have different heights. The most important thing is closest to you. Or it's at a very high level. So for example, the background is at Z depth. It's called Z depth in material design. It's a Z depth of zero. And buttons on top of that have different Z depth. So the object that's very important that you really want to give the most priority to, for example, your notifications. You wanna know how much, you know, what's a network reception like. So that's at the very top. So you have separate objects and each of those objects have different heights in material design. So this is an example of a simple button or a simple square object. So what we've tried to do is, you know, when you press that button, the height of the object increases, the importance increases. So because you're pressing, the object that is being pressed has more importance at that particular point. So the height of that increases. So here is an animation of how that works. As you click on the button, the button kind of increases in height. The importance of that increases. And that's shown by a shadow, which is generated in Android L as well in Polymer. And you can see the shadow looks very natural and it can be varied. You can have different levels of height. So that's the first concept of material design, which is called paper or material. So what we've tried to do over here is create a simple email application based on the concept of material. So on the left hand side, what is this called? Navigation drawer. So this is where you would keep a lot of navigational elements. So you have a list of the emails that you want to see, but at the same time, you want to have a list of navigation items. So as you pull the navigation drawer from the left hand side, you can see how it is above all the other elements in the page. You can see it's above the list of emails. It casts a shadow on the emails and everything is in the back. This is the most important thing and this is at the very front of the screen. This is a material design or a material-based email application. What's the most important thing that you do in an email app? What's the most important thing? Read email, right? That's the most important thing. So you can see 70 to 80% of the screen is reserved for just showing the email, okay? That forms our base sheet of paper, okay? What's the next most important thing? Writing an email, what else? Yeah? Searching. Starring and so on and so forth. So there are different actions. So the most important thing is reading. So we have devoted most of the screen real estate for that. On top of that, we have a button which is dedicated for composing a new email, which is very important action, right? You want to be able to do that at any point in time. So see how the new compose email button is there at the bottom right and it's floating on top of everything else, okay? It's got a different height and it's a separate sheet of paper, okay? So when you scroll the list of emails, the object itself, the new email button, doesn't float with the other items. It doesn't kind of scroll with it. It's a separate sheet. It's floating on top, so it stays in place. Now a very similar way, you can see, you know, it casts a shadow on the surrounding area and you can see at the top also, the action bar also has a slight shadow. So it's also at a different Z depth or a different height. So objects like this, right? You have different heights and material design. You kind of bring on the principles of height and importance to it. Finally, this is the example of composing a new window. So in this case, right, you don't have a particular action. Like in the previous case, you had a very clear action which is super important, which is composing an email. You want to highlight that, okay? Over here, we don't have that very important action that you really need to highlight. The only thing that you can do when you compose a new email is either send the email or discard it, right? So there's no need to kind of highlight that. So when you highlight an action, it's called a floating action but not FAB. We'll be talking about that in a little more detail. But it's not always necessary, as in the case of composing an email, it's just not necessary. So you can just go away and just be done with an action bar. So that was the concept of material, okay? Concept of paper and that's the first principle of material design. Second principle of material design is called bold graphic and intentional. It's inspired by print design, okay? So it's inspired by stuff like magazines, newspapers and so on. A lot of concepts of print design are really good, like typography, grid, space, scale, color, imagery. So these are very common principles in print design and these days, right, in mobile applications, we don't necessarily bring those principles onto a mobile design. So for the first time, Google has kind of put these guidelines together. So you use those concepts over here as well. It's like a set of guidelines that have been put. And using these, you can create hierarchy, meaning and focus. And once you do that, it'll be like a guide to the user. It'll be like a waypoint. Like this is what you're supposed to do. This is the first thing that you're supposed to understand. So let me illustrate that with an example. So this is the email application that we looked at before. You can see that it's using the first concept, which is material, okay? But if you use the second concept, which is the best practices of print design, it looks something like this, the same email application. You've transformed it from the first case to the second case, okay? Which do you think, according to you guys, is better? The right one? For a lot of you, right one? Why is that? Why do you think the right one is a little better than the one on the left? Color contrast, what else? Readability, that's very, very important, right? It's easier to read. You feel like, you know, it's much easier to read. It's very easy to kind of understand what's going on in the email. What else? Font and typography, very, very good point, right? The typo, like you can see how different elements are in different font phases. So for example, the subject is a little bolder font. The color is different and so on and so forth. There's imagery, right? You've seen the image of a person. Let's quickly see why that's better. So in print design, we typically read from top to down and from left to right, okay? So as you're scanning this piece of email, right? The first thing that you notice in a row is the image of a person. Okay, that's a common behavior. Go from top to down, left to right. Now you see the image of a person, the first thing that you see. So it's very easy to know that this email is from this person. Okay, you don't have any questions about that. So as you're scanning the email, you know it's from this person. You know the context right away, without having to read the subject or at times without having to read anything. So you go down, you see this email is from Ali Connors and you're just, okay, I don't have to think about this email. I know what to reply. I'll look at this later, right? Other things like the title, the subject of the email and how the person's name and all are in different font faces. They've not used a divider to say, okay, this is the title, this is the person who's sending the email, this is the body of the email. They've not used all of that. They've just used typography, color, and position along with imagery to kind of bring all these elements out. And you keep the most important content on the left-hand side, which is the most distinguishing content, and the least distinguishing content, which is on the right-hand side. And the color of that is also the least distinguished color. Most of the times when you're going through this email, you'll not even notice that there is a time, like 15 minutes or something there. But it's just there in case you want to notice it. Another important principle of print design is grids. When you're designing an Android application, unless you have a very good designer, they will not typically use a grid. The first time, Android has created very clear guidelines for grids. Okay, there are key lines, there are illustrator files that you can download and kind of use it to make sure that your whole application, the different elements are in grid them, right? It's in a visual rhythm. And you will not notice this while kind of developing the application, but once your users kind of use it, they've noticed that these grids and the spacing and the width and margins and so on help the user consume the text in a better way. So that's about the second concept, which is bold. So that's about print design and all the concepts around print design. Next we look at authentic motion. So, till now, right, till before material design, motion or animation has just been used very loosely, right? There's not been any guidelines around motion. So people would use it whenever they want. So if you're using, if you're seeing a slideshow kind of an application, you'd see a huge explosion happening and you know, the slide, next slide comes in and there's a huge explosion and you see, okay, wow, it's really cool, but it doesn't serve any purpose. It's just some random animation that's there. There's no guidelines for that, right? For the first time, Android and Google have kind of brought this concept of authentic motion, where animation is designed to kind of bring in the spatial relationships, functionality and intention of the system. Lots of complex terms. Let me quickly give you an example of what that means. This is a music player application in Android, okay? There's a mock-up of that. So what happens if you click on a particular album? Okay, let's say I click on the album on the right. You can see how it animates and goes into the full album view, okay? When you click back, it goes back into the place wherever it was designed, okay? So this kind of animation has a very clear purpose, okay? When you click on the particular album, it expands. That element is shared between that screen and the detailed screen. So this animation has a very clear purpose. You're helping the user navigate from one screen to the other screen and there's a relationship between both the screens and you're building a relationship based on the transition elements. So whenever you're designing animations, especially in Android L or in Material Design, make sure that there is a certain purpose for those animations. So this is the first one where there is a relationship between two elements in different screens. It's called activity transitions in Android. This is the second kind of animation. It's very, very common. I'm not sure if you can see it, but when you click on any element, there's a small ripple that goes out that goes to show that this is the place where you've clicked and gives instant feedback to the user. The second example, you can see a button. Whenever you click on the button, it kind of, the height kind of increases, okay? And that's also a Material Design animation. So whenever you're using animations here, it has to solve some problem. Don't just randomly do animations. That's the key takeaway here. So we covered the three basic principles of Material Design. Let's understand what is the implication of that. Let's understand what are the elements that were there in KitKat and how they change in Material Design. We'll look at a couple of elements. If you have more time, we'll look at more elements. The first thing we look at is some code. In case you're designing any Material Design application, first thing in Android that you have to do is change the theme of the application. So whatever theme you have, you make sure that it's derived from the Material theme. Okay, it's android.theme.material. And you can really style your themes in a very comprehensive fashion. You have primary colors, you have primary dark, you have accent colors, and tons of other colors. So what does this mean? It means that this is my application. It's the settings of my application. This, on the left-hand side, is the old settings. It's using the Holo theme. You can see how it looks very nice and very sober and so on. And on the right-hand side, it's a new Material Design-based setting screen. I have changed all the colors. You can see how the action bar, the status bar, everything is colored differently. And you can see how the titles and the buttons and all are, all color differently. All this has just been done because I've customized the theme and I've changed the colors. This is the first thing that you absolutely need to do. Next, we'll look at some buttons. So these are three buttons in Material Design. You had a typical button before, which was just a normal button. In Material Design, you have three separate kinds of buttons. The first is called a floating action button or a FAB. This is something important. It's a new concept and it's a button which is really, really important. You can only have one FAB in an application and this kind of floats above all the other content in the screen. You also have another button, which is the raised button. This is very similar to the older kind of button, but again, this has a shadow which is cast on the remaining screen. And the final thing is a flat button, which is again a completely new concept in Material Design. Let's look at some examples. On the left-hand side, you see Google Maps-like application. Again, the map itself is the base sheet of paper. On top of that, you have information about the point you're interested in, which is, let's say, a chocolate place. So that's a separate sheet of paper. It casts a shadow on the base sheet of paper. And on top of that, the most important action that you need to perform in that place is navigating to that particular place. So that is elevated and it's given a lot of importance and that is a navigation floating action button or a FAB. See how it floats above all the remaining content and it's bringing out the importance that this is the most important action that needs to be performed at that time. In the second case, you have the raised button, which is like a button which has a shadow on top of text itself. And it's your regular button and you can click it and it elevates when you click on it. The final option you see over there is a dialogue. It's a normal dialogue in Android L and you can see how the disagree and agree buttons are just flat buttons. The problem here is that many times the flat buttons don't have any kind of border or guidelines to show you that this is a button. So the only thing that differentiates the text, the content from the button itself is just the typography, right? It's in blue in color, it's at the very bottom right hand side and it's all in caps. So there's a certain spacing between the content and the button itself. So that's how you know that this is a button, not part of the content itself. So when should you use any of the buttons? So if you're using most common use cases, you would use the raise button, which is like a typical use case. If you want the content to be very close to the actual button itself, you would use a flat button. So it has the lowest importance. It's almost part of the content. Then the next most important thing is the raise button and the most important out of all of them is the floating action button. This is an example of a dialogue again. And you can see how they have removed all the dividers, right? A completely divider free world. So you have the title. The only way to differentiate that this is a title is by the typography. It's dark black and the font face is different and so on. And the actual content is lighter in color and the buttons have a specific height and width and padding and it's at the bottom right of the screen. So this has been designed very, very carefully. If you change this, the buttons will be very close to the content. You don't know which is the button, is the content and so on. When should you use a flat button as opposed to a raise button? If you have a clear dividing line, right? Between the content and the button itself, then I would recommend you to use a flat button. If you don't have any clear dividing line, if you have the content and you want to show something within that content itself, then use a raise button. Some examples. So what is wrong in this picture? On the right-hand side here, you can see here. Buttons are? Yeah? Yes, so you don't know if this is a button or not. You know, you can't make out if this is an action or not. So if you say morning pizza and just below that, you have first stop and uninstalled. These two are supposed to be buttons. But in this case, these are flat buttons. So you don't know if this is content or this is a button. So it's a very common problem, right? In this case, what should you do? Raise button, simple. You can see how easily you can distinguish between the content and the button itself if you use a raise button. So whenever in doubt, right? Whenever you have any problems understanding the content itself, just use raise buttons. In this case, okay, we have a card. So cards are very complex objects, but you have this clear area at the bottom, which has been dedicated for actions, okay? Over here, you have a dividing line and you have these two raise buttons. So in this case, it's not nearly necessary to make it a raise button. If you make it a flat button, which is all capital, you know, you still, the user can still make out, okay, these are actions because these are at the bottom area of the card itself. So you can just play around with all the three types of buttons. Let me show you some quick code of how to use a flat button in Android L. Only line to make it go from a flat, from a normal button to a flat button is you have to add the style, okay? The style line that you see at the very end. It's called a borderless button style. You add this one line and it becomes a flat button. This is very, very straightforward. The last kind of button is a floating action button. This is when, as I've discussed, it's the content is there and you have some action. There's one action which is very, very important. You want to highlight it. So it's floating on top of all the other content. You can have different sizes of the floating action button or FAB in short, you have a bigger FAB and you have a mini FAB, which is on the right-hand side. And the FAB can float on top of the content. It can be part of any part of paper element. So there are different guidelines around how you can place the FAB. But remember, you can only have one FAB at any time. So some code around the FAB itself, there's no direct way of creating an FAB. You have to, there's no FAB tag in XML, okay? So what you have to do is you have to create this circular element yourself. Or the other option is use any of the libraries that are available. So there are two libraries that I'd like to quickly highlight. One is called Future Simple. Creates a very nice FAB, as you can see on the right-hand side. You can specify the color of the shadow and of the element itself, the ripple color, when you click on it, what happens and so on and so forth. This is the library. It's called Future Simple. The second one is called Macaw Star. And it's also a very simple library. The cool thing about this is, you can attach it to a list view. And as you scroll the list view, the button might hide. So you can have those options of hiding the button and so on, okay? Any questions about FAB? Any general questions? Okay. Let's quickly go on to cards. So before Android L or Material Design, Google had a lot of guidelines around other design patterns, but not around cards. Google now was created, but there were no guidelines around how to use cards. Google Plus was using it, Google Now was using it. My application was using it, but then I thought of the design pattern of my own and kind of improvised on top of that. But for the first time, you have very clear guidelines around how to create a card, okay? These are again guidelines. You can completely use your own discretion in creating cards. You can see, you can have a normal card and you can have rich media at the top. For example, a picture, you can have content at the bottom and the whole card is clickable. This is one type of a card. You can have another card where you have actions at the very bottom. So for example, the multiple actions. So if you're building a music player application or a Instagram application, so if you wanna like the card, you wanna share a content or a couple of actions, you can do that at the bottom. At the top, you have the content area where you have the image or the text and so on. You can have more complex cards with grids and you can have horizontal actions if you want to have multiple options as well. You can have simpler cards where you have just title, subheading and so on with a couple of actions. So these are guidelines. I'm just covering a couple of them. The details about these card patterns are there on the Android side, the multiple card patterns. Best part is there are illustrator as well as sketch and Photoshop guidelines for these. Like there are files that you can download and modify them to create your own designs. So to create these cards, right? There's this view called a card view. So it's there in the support library and you can create this card view. You can specify the radius, the corner radius and you can specify the shadow, the elevation and how it should animate when you click on it. A lot of those things are there for you. You don't have to create this card from scratch. Lots of libraries which are creating cards but in Android L, you don't need to do that. You can just use the card view. And of course, this is the dependency. You have to use the card view dependency. It's in the support library. And you can use it from version seven onwards, API level seven. So this is a slide, okay? With some content, let's say a news content. So you have news content and which do you think is better over here? You have a normal list on the left-hand side and you have a card on the right-hand side. On the right-hand side, you have the same content in the form of cards. Left-hand side, it's just a simple list. Which looks a little better or which do you think is easier to read? Everybody thinks right? Left? Okay. So a lot of doubts over there. The actual fact is that most humans right can read the left-hand side, like a screenshot over here, the content over there in a much easier fashion. Why? Because a card is a very complex element. So if you see the right-hand side, the brain sees one card and it has to process that card and then move on to the next card. It's an individual element. So don't overuse cards. When it's nice at some places, but when the elements themselves are not that complex, it's recommended to kind of use a normal list view because in a list view, the brain just reads the list and quickly goes down bottom. It's not a separate element. So the readability and the perception of speed is much, much faster. The user will not quickly notice it, but over a week or a month, they will feel that they are reading less and less. The amount of content that they can read very fast is actually going down. So if you don't have a lot of complex elements, stick to lists. They are very good. It's been designed in a way the brain can kind of calculate and read it faster. Some quick notes about progress. So lots of progress bar modifications have been made. There are now really nice progress bars for determinate, indeterminate, buffering and so on and so forth. And you should use it very, very generously. So for example, this is a YouTube application when the content is ready to be loaded, you just load it and then there's a buffering indicator. So you have, first time, you have a separate buffering progress bar, which works really, really well in videos like this. You can see it buffers and then you load the whole thing. The buffering progress bar, these are again completely ready to use. You also have different indeterminate progress bar. So right now, you don't know how much time it'll take. So initially you show the indeterminate progress bar at the top. Then once you have the internet connection, you know how much time it'll take. So show a determinate progress bar. Again, all of this is there in the framework itself. Another kind of progress bar. You click on an element, you can show the progress bar at the bottom itself. So again, you click on an element, it breaks into another separate piece of card and then you load it and then it expands to show more content. Again, you might also have infinite scrolling in your application. For the first time, there are very clear guidelines around how to use these infinite scrolling progress bars. You go down, you scroll down and there is a simple loading indicator and the content then comes in from the bottom. That's a new design pattern again. Content comes in from the bottom. And again, for the first time, there is a push to refresh framework inside the application itself. Very clear guidelines and a couple of good apps that I've seen that have implemented this. Very, very clear progress bars for this as well. So that's it about the presentation itself. Lots of resources that you can use to better understand what is good for you and what is good for your application. Lots of design icons, templates, sticker sheets and icons. A lot of the elements that you've seen here are available on Google Design site and they're available in Illustrator format, Photoshop as well as Sketch. You can go and check it out. I would also highly recommend looking at a couple of the Google IO 2014 design sessions. There are about six or seven sessions. If you want to know about the science, the animations and the physics behind it and so on, lots of good talks around that. Especially recommend Roman Gees and Chet Haas's talk. It has a nice video with an actual implementation of all these things that I've talked about. The source code is also there on GitHub. Love to take some questions. I'm not sure how much time we have and this is my email address. That's my blog and the slide is available at speakerdex.com slash so on. So, happy to take some questions. Kirsten's? Thank you. Any questions on how to implement or buttons or anything? So these things are available in Android L. So I know cards like there are a couple of card libraries available for pre-Android Ls. So are these things, are they third party libraries for other elements also? For KitKat or like say, because most of the devices currently are running that, good question. So for cards, card view is there in the support library that's there from version seven. You can use the official one now. Good thing about that is there are shadows and there are different animations which they take care of. For the other stuff, ripple animation and the other animations, there are third party libraries but I wouldn't recommend using it because all the Android L animations they run on a separate thread. It has its own render thread which makes the animations really, really smooth. You use the same thing like ripple animation. You can see how it ripples out, right? You click multiple items, there are multiple ripples. So if you don't have a dedicated thread for kind of doing that, it's very difficult. So there are two or three libraries for ripples, for buttons and so on but I wouldn't recommend using them. But for cards and all, you can use the official library. What else? Buttons, again, buttons will work only in Android L. There are the libraries I've talked about floating action button. Those are for version seven and on. You can use those. Okay, thanks. Any other questions? Yeah, sure. So very good question. So a lot of these things are also there for the web, especially for the web. So for large screen devices, if you're using Android TV all the same things just carry over because you're using Android essentially but if you're using the web, this polymer, right? Which is a great project. This is something called the polymer playground. Just look it up. You can create, there are readymade dialogues, the action bar which is now called the tooltip. So lots of other elements are predefined for you as web components. So you can use that. The design elements are also there on Android Wear, the cards and all these things. So those kind of carry on everywhere. Any questions? Cool. Thank you guys and you can check out the slide over there.