Android Material UI Design Masterclass with Adobe XD | Stevdza - San | Skillshare

Android Material UI Design Masterclass with Adobe XD

Stevdza - San, Android Developer & UX/UI Designer

Android Material UI Design Masterclass with Adobe XD

Stevdza - San, Android Developer & UX/UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
35 Lessons (6h 40m)
    • 1. Introduction

      3:09
    • 2. Download Adobe Xd

      2:08
    • 3. Introducing with Adobe Xd Interface

      12:07
    • 4. Introducing with Adobe Xd Assets

      10:40
    • 5. Keyboard Shortcuts

      12:04
    • 6. Introducing with Material Design

      7:02
    • 7. Layouts - Material Design

      8:33
    • 8. Colors - Material Design

      16:00
    • 9. Typography - Material Design

      7:41
    • 10. Lets get started - Splash Screen

      18:02
    • 11. Top App Bar - Recipes Screen

      16:15
    • 12. Bottom Navigation - Recipes Screen

      17:32
    • 13. Cards - Recipes Screen

      26:26
    • 14. Floating Action Button - Recipes Screen

      14:31
    • 15. No Internet Connection Screen - Recipes

      10:10
    • 16. Snackbar - Recipes Screen

      12:38
    • 17. Banner - Recipes Screen

      20:32
    • 18. Bottom Sheet - Recipes Screen

      18:26
    • 19. Chips - Recipes Screen

      21:45
    • 20. Button - Recipes Screen

      16:21
    • 21. Filters - Recipes Screen

      7:15
    • 22. Search Widget - Recipes Screen

      8:15
    • 23. Favorite Recipes Screen

      3:02
    • 24. Overflow Menu - Favorite Recipes Screen

      8:56
    • 25. Contextual Menu - Favorite Recipes Screen

      6:39
    • 26. No Favorite Recipes

      4:32
    • 27. Dialog - Favorite Recipes Screen

      20:12
    • 28. Food Joke Screen

      5:30
    • 29. Details Screen/Overview Tab

      29:33
    • 30. Ingredients Tab

      7:50
    • 31. Instructions Tab

      6:39
    • 32. Tabs - One More Thing...

      4:28
    • 33. Prototyping Basics - BONUS

      11:17
    • 34. Apply different Theme to your App Design

      2:57
    • 35. Final Word

      0:57
14 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

199

Students

--

Projects

About This Class

Did you know that in the last few years there is a high demand for UI Designers? The median UI designer salary in the U.S. is $70,000/year for entry-level, and $95,000/year for a seasoned UI Designer. That's totally understandable when you think about it. UI Designers and software engineers are the ones who create something out of nothing. Their imagination, creativity, positive-mindset skill-set and experience deserve to be awarded for pushing high quality and popular products on the market. Knowing that, now it's the right time for you to take things into your own hands and start working towards that goal.

This course will provide you with all the necessary knowledge needed to start building your career as UI designer. In this course we will design an Android Application following all Material Design Guidelines. You'll learn not just how to create beautiful design but also the fundamentals, rules and Guidelines of Material System in general.

So what is this so called Material Design?

Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web. Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces re-imagine the mediums of paper and ink.

We are going to cover Material Design which in this course is primarily focused on Android platform, but the things we learn can also be applied to other platforms as well, with just slight modifications.

So what are we going to design you might be asking?

Well we are going to create a simple and elegant design for Food Recipes application. We are going to design up to 17 different screens with various material design components like Top app bar, banners, bottom navigation, buttons, floating action buttons, cards, chips, dialogs, menus, snackbars, bottom sheets, tabs and more.

You'll learn how to apply Material Design color System to your project, how to combine different fonts in your project and  choose typography type scale system. The type scale is a combination of thirteen font styles that are supported by the type system.

As a design tool we are going to use Adobe Xd. And That's one of the best FREE vector software's out there, with simple, easy to use and user friendly interface. The knowledge you gather throughout this course with Adobe Xd can also be applied to many different areas of graphic design. You can use Adobe Xd for UI/UX design, to design mobile, web, desktop applications, logos, banners, illustrations and basically everything you could think of.

And at the end of this course as a bonus I'm going to show you the basics of prototyping with Adobe Xd. You will learn how to give your design a life with transition animations. Even if prototyping is not in a scope of this course, I'm going to show you some prototyping fundamentals as well.

So what are you waiting for, start learning and improving your skills right away, there is no need for delay.

Meet Your Teacher

Teacher Profile Image

Stevdza - San

Android Developer & UX/UI Designer

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello there and welcome to my course Digital that in the last few years, there is a high demand for UI designers. Yes, the media and UI designers salary in the US is assembly thousands of dollars per year for entry level and $95 thousand per year for a season. The UI designer, and that's totally understandable when you think about it. Ui designers and software engineers are the ones who create something out of nothing, their imagination, creativity, positive mindset, skill set inexperienced deserve to be awarded for pushing high-quality and popular products on the market. Knowing that now is the right time for you to take things into your own hands and start working towards that goal. This course will provide you with all the necessary knowledge needed to start building your career as a UI designer. In this course, we will design an Android application following all material design guidelines, you will learn not just how to create a beautiful design, but also the fundamentals, rules, and guidelines of material design system in general. So what is this so-called material design? Well, material is a design system created by Google to help teams build a high-quality digital experiences for Android, iOS, flutter, and the web. The material design is inspired by the physical world and it's textures, including how they reflect light and cast shadows. Material surfaces re-imagined the mediums of paper and ink. We're going to cover material design, which in this course is primarily focused on Android platform. But the things we learned can also be applied to other platforms as well with just slight modifications. So what are we going to design? You might be asking, well, we're going to create a simple and elegant design for a fully recipes application. We are going to design up to 17 different screens with her various material design components like top, ybar, banners, motto navigation, buttons, floating action buttons, cards, trips, dialogues, menus, snack bars, Bottom Sheets, tabs and more. You will learn how to apply material design and color system to your project. How to combine different fonts in your project. N choose topography type scale system. And the timescale is a combination of 13 font styles that are supported by the type system is a design tool. We're going to use Adobe XD, and that's one of the best free vector softwares out there with simple, easy to use and user friendly interface. The knowledge you'll gather throughout this course with Adobe XD can also be applied to many different areas of a graphic design. You can use Adobe XD for UI, UX design to design mobile web desktop applications, logos and banners, illustrations, and basically everything you could think of. And at the end of this course, as a bonus, I'm going to show you the basics of prototyping with Adobe XD. You will learn how to give your design our life with a transition animations. Even if prototyping is not in the scope of this course, I'm going to show you with some prototyping fundamentals as well. So what are you waiting for and start learning and improving your skills right away. There is no need for delay. 2. Download Adobe Xd: Hello there and welcome back. So before we start creating our UI design for our application, you need to actually download Adobe XD. So you can download Adobe XD on there or official website and you can search on Google. And the first link which will appear will be this one. So our dog, Daisy.com slash products slash X-Y dot HTML. I don't easily is vector software and designed for mostly UI designers. So we tell them you can create UI designs for a website for mobile and desktop applications. But since this is a vector tool, you can also use Adobe's did to create, for example, logos, banners, even Instagram, Stories and storyboards and post and so on. You can also create a different banners in basically everything which you can create with Adobe Illustrator as well. My personal preference is Adobe XD, and that is because it has a simpler and more intuitive interface. And I'm going to show you the interface of this UDL basically in the next video. So if you want to download the Adobe XD, you can just scroll down below until you find the download button. So Adobe is totally free to use. Of course, there are some limitations. So for example, you only have a two gigabyte software cloud storage. And to be honest, that's not very important for us as a designer innocent because we can always save our projects on our own PC. And I always save my projects on a PC, I don't feel was this cloud storage at all. So it's a good thing. So you just need to download the Adobe XD and install that. And of course, if you don't have an account on Adobe website and then you need to create one, because when you install Adobe XD, you will need to connect that count. So when you create that account, I'm going to show you the interface. Ok, so once you create an account on Adobe and connect that account with lobbyists D, Then I'm going to show you the Adobe X-Y interface so that they'll be all for now. 3. Introducing with Adobe Xd Interface: Hello there and welcome back. So I hope that you have already installed the lobbying steam and wants to run your Randall as D. This is the window which you'll see. So first on the top we have a different templates to choose and they want to press this little arrow. And we can see more of those mobile devices templates. For example, iPhone X X S, 11 pro, we have non below Google Big so 3x L or, or pixel four or four XL, or even in iPad or Nexus nine. Next we have here templates for a web. As you can see, whichever those irregular sizes. Then we have templates for a Twitter post, Heller's Facebook post to Facebook cover Instagram posts, story and YouTube video as well. So also, you can create your own customer template size, just type here width and height and press this button. Down below we have a recent term that is this section for our recent files which we have worked with. On the left side, we have home, we have a section to learn something about the obeys the dumbbell or we have a cloud documents and the here will be located all our files which are actually located on our cloud. So I have only one project file or in the cloud. And you can also remove your projects and drives by selecting one of those and clicking Delete. Okay, so let's get back to home in here, for example, it choose a template for a Google Pixel for. So just click this button here and it will immediately open up your oddball. So basically here as you can see, our interface looks very simple. And as you can see, our, our project is automatically created on the cloud. And you can see this icon. That means that our project file is located on the, on the cloud. And if you want to save your product on the desktop, then you need to select this menu. And then below you can see this as a local document. Click that and let's save these, for example, are my projects or hey, let's click save. And now our project is saved on our desktop. Okay? So this here, you can see this is in art board, okay? So if he has the size of a fourth wealth by 870, and that is a size for every pixel x, OK. And you can also change the iron bar name by double-clicking death. And you can change, for example, Screen1 or something else. It's your choice. So this is actually a panel for a layers and their whenever we create some elements here, then those elements will be shown hearing this cell a or a section on the left side we have our doors like a select all the Rectangle tool, ellipse store polygon, line, ban, texts, onboard tool, and the zoom tool as well. So you can just select one of those and just drag them here. Create a different shapes and you'll select all tomorrow around those elements as well. So when you select one of those elements on the right side, you will notice the Properties panel. So here you can select, for example, within height for your, for your element. For example, I'm going to choose 200 in width and height for this, for this ellipse tool, I'll, Okay, here you can see the coordinates for the x and y position. Here, you can change the rotation or the angle or if your element. But since this is a perfect circle, we don't need that. You also have those options to flip horizontally or vertically those items for, so for example, when we create a rectangle here, and when we rotate that rectangle, as you can see, this angle will change. And when we press this flip horizontally, it will flip horizontally and vertically as well. Okay? So that's it. And down below you have this opacity. So you can change the opacity of this element as well. And down below you have blend modes. So those modes are used for different quarters, but I personally, to be honest, I don't use them very much. And down below we have those corner radius, which we can change. So when we press, for example, 20, you can change the radius of all corners, or you can choose a radius for each one of those corners to be different. Ok, so that's one example. Down below. You can turn it off field color, for example, as, as you can see, we can train the field color here or we can type our color hex code here. And when we, when we press this plus button, that color will be added. Our color palette here down below, we can change this border color. We can also the shadow to our element. Then we can change our XY or board the values of this shadow and no, ok, so let me just delete that and that. So you might have noticed here that you have this Home icon and when you press that whole micron, then this Start screen will appear and you can then create another template and so on. Here you have design and that is the main tab which we are going to use. We also have this prototype tab. And this is actually used to create the prototypes for our mobile or web applications. And I'm going to show you this prototype at the end of this course, but for now we're not going to use that. And here you have also this Share tab. So we're okay. So in this share section, we can basically share our aren't born that with the rest of the world. And we can basically create the link here. And that Adobe XD will generate us our Inc., which we can share with our friends or families or even a client. And when you press that link, it will open up in a web browser and then your clients, friends, or family can access your design and see through a web browser here. Or you can check that anyone can. Access your designer with the link or only invited people that's on your here you can say the view settings so you can get the feedback from other people for your design. You can select different options here as well, but those prototyped and share sections will be shown at the end of this course. For now we're going to focus on the design here. Okay, let's create another element here. For example, let's create the circle r k. I'm holding down the shift when I'm creating the perfect circles. So that's a shortcut and I'm going to talk about shortcuts more in other video. So here you also have some few options more which I haven't shown you yet. So I'm going to copy this. And once again, so I'm going to hold down or the plus shift to just drag that circle on the right side. Okay, and let's move this on the dumbbell or a little bit. So now if you're wondering what those options are on the top, so I'm going to show you now. So when we select those two circles and when we press this option are linked up. That means that this circle, which is on the bottom, will align with the element on the top. So let's check it out. And as you can see, now those two elements are aligned. So I'm going to click undo command to undo that. And when he pressed this, then those will align in the middle. So I'm going to click on door control plus zed, and then we will select this one. So then this first circle on the left will align with our bottom circle. Okay? And we can also do that for the sides as well. So as you can see, we can align them on the left or on the right as well. So it's pretty much the same thing. Okay. Let's remove those now. And also I haven't showed you those sections down below. So, so far we have used only the Layers panel here, and that's the most USDA in most popular panel hearing Adobe XD, because here you can see all your layers. So for example, when you create a Seroquel, you will see this ellipse here appearing. And we can also change the name of that ellipse. For example, my name in something and click Enter R, k. So here we have a plug-in. So there are different plugins which you can select from our Adobe XD. And I'm going to talk about the plugins in some of the next video. Next here we have N assets panel. And I'm going to talk more deeply about the assets in the next video. So we'll see, you will see how we can add our colors, characters, or components in this assets, a panel, and we can reuse them later inside our project. So it is a very useful thing. I'm going to show you that later, and that's basically it. So the most important thing for Adobe as d, personally, for me, is that it has a very simple user interface and it is very pleasant to work with Adobe XD. So in the next videos, so when we start working on a UI design, you'll see how easy it is to create a beautiful designs and so on. Okay, so I haven't showed you one more thing and let me just create or zooming actually. So as you can see here, we can also increase the size of our stroke and the healing. We can choose the dash, for example, its type. Then we can increase or decrease this value by using an arrow. So we can create a shape like that. And let me create a line, one line here. Let me just increase the stroke size. And as you can see, those around caps will change this line and we can choose a different style for our line as well. And let me just tell you that. So now I'm going to create two perfect circles. So I'm going to hold down Shift to create that. So oracle, and those are shortcuts will be introduced in the next video or in some of the next video. So you'll see how, how they work. But for now you're just turn it'll follow my steps. And I'm going to copy this one by hardening or the plus shift and moving that on the right side. And the, let me drag this something here. So when I select those two elements, there are also some of the options which I haven't showed you and that is this add, subtract, intravasate and explored. So when you click add, that means that those two elements will merge. So let me just undo that. When you press this substract, as you can see, this is the shape which you are going to get. Let me just click Undo. Let's select this intersect. Then those elements will intersect and you will get a new element here. And the last one is basically something like death. Okay? Alright, so let me just delete those and just create, for example, one rectangle here. And there is one more interesting tour here which I haven't shown you. And that is repeated grid. So when we select it repeated grid, you will see that our element has changed and we can see those green little rectangles. And if I zoom out, you can see that we can drag this on the bottom and we will create a duplicates, all those of those rectangles. So we can also change their margins. So for example, we can decrease them towards six or 0 or even below 0. So that's very convenient tools. For example, when you are creating elements which needs to be repeated multiple times. Or for example, if you are creating a table and something, and you can also duplicate them on the right side as well. So this is a very useful thing. And daughter, it was inside Adobe XD. So that'll be all for this video. Now I have introduced you with Adobe XD interface, and in the next video we're going to explore those tools. Furthermore. 4. Introducing with Adobe Xd Assets: Hello there and welcome back. So in the previous video I have shown you the Adobe is the interface. And in this video I'm going to focus on these assets panel. So let's select it. And here you will see that you can link different assets from other existing cloud that documents. But in this case, I'm not going to show you how to do that. Instead, they were going to create our own customer assets. So down below we see three different assets, colours, character styles, and their components. So first I'm going to show you how you can add those cholera acids. And basically every asset you add here, you can reuse them inside your project later. Okay, so let's start with a color. Okay, I'm going to zoom in here a little bit. So the shortcut for zooming in and out is a control plus a moving your mouse wheel. I'm going to make another video about shortcuts as well. So let's create one ellipse tool or one perfect circles. So hold shift when you are dragging the circle, okay, and I'm going to remove the border color and add this lighter red color. Ok, so basically those colors can be added. Hearing this color palette, you just need to click this plus icon. And as you can see, that color is now added here. Okay? And let me just choose a little bit brighter red color and let's add it to, Okay, so what did we select that element with its red color. And we can click this plus icon. And as you can see, that color is automatically add the inside our assets panel here. So let me copy this object once more again, I'm going to hold off and shift and just drag that element down below. And I'm going to select this lighter color. Ok. So now select that and click this plus icon. So now we have those two calls here. Okay? We can move them around. So let me just say this red color on the top, and we can also change their names. So here for example, I can type red, click Enter, and for the second quarter I could type a light red. Okay? And now for example, we can choose any element on our Canvas and we can apply that color. As you can see, we can apply different color just by using those premade assets, okay? Or we can just select every element and apply the same color. So those colours, character styles, and components are reusable. We can use them later in our project so we don't need to, for example, create the same component every time. Instead, we can just reuse that component from our assets here. Okay, so that's how you can add your callers as acids. And I'm going to remove those now. So now I'm going to show you how you can add a character styles and it is a basically a font. So I'm going to select this text tool and the write something here like for example in Google. And when to use the Select tool, move that here a little bit so I can choose, for example, font name the robot arm with the style of irregular and the size of 20. And I can even change the color here, for example, black, okay? And now. When I click this Add button, this font will be automatically added to our assets here. Just below this character styles. In here, we can see the image of our font-style and it's in the it's color. Then we can see the name of the font and font size, of course. So let me just copy this font. I once again just hold all plus enter and move that on the bottom. Ok, this time I'm going to set the size or 14. I can just choose, for example, a little bit lighter color, for example, this light grey. And they can change the style to light. So now when I click here, as you can see, and the image color here is changed. So now we can see this light gray color as well. And for example, let's say this could be a red color. Okay, and click plus icon. So now we have this, this color indicator for our font as well. So here, for example, we can rename our font and say headline, Black, RK four down. For this point we can say a shared line and color colored. And for example, for this one we can say subtitle. And now when we select to one of our fonts from our canvas, we can just apply that specific font from our styles. And let's choose this quality headline. And of course for this we can choose this subtitle. And then for every text out there which we are going to create in our UI design, we can just select that font and apply this style which we have already added in our assets. So it's a pretty simple and quite useful. Alright, so I'm going to remove those fonts now, and I'm going to show you how to create a reusable components. So I'm going to show you an example with a simple button. Ok, so I have selected a rectangle tool, and here I'm going to create one rectangle. Okay? So just an example, of course here we can increase the size. I'm going to say, for example, 240 by 60. Let's say it's molar here, and we can set the radius here as well. So let's send radius to number ten. Let's remove the boiler color, let's say the red color. And here for the text, I'm going to use the text tool and the right button. I'll select all and change the color of the text to white. Okay, let's center that here. And as you can see, let's switch back to our Layers panel here. And here we can see our tool layers. So this is a background of our button and the text. So now we can group them into one group. So the shortcut is Control plus G. And as you can see, we have grouped those two elements into one. I'm going to rename this group to button. And let's switch back to our acids panel here and select your button. Click this plus icon on our components. And as you can see now we have added our Custom components here, okay, now let me zoom out a little bit. So here we can just drag and drop our button as much as we want. And the style will be the same. Okay? So for example, you can change the style of newly added component here and nothing, and everything will change. And basically it says that this is the original file, okay, so as you can see, when we select this button, it says that it is our original component. And the original component is represented through this icon, which is totally filled. And when we select other components like this one, you will see that this icon is basically half empty. Okay? So that means that this component can be modified without modifying all other components. And if you want to modify, for example, all your, all your components in one place, then you need to select the original default component. Just press this edit main component icon and it will create that original button. So if we remove this original component, clean this inherited component. And when we press this, as you can see, this original component will be added. And then we can apply some different styles to this button. And every other button will have a different style. Okay? Alright, so that's it. And if you're wondering what else we can do with this witness state. So basically those states, a component states are used mostly for prototyping. And when I click this plus icon, I can, for example, add a hover state and unjustly Cantor. So now on this hover states, so select this hover state and click, double click on our component or change the background color a little bit lighter. For example, this one. And now when we select our component, and this is the hover state, and this is the default state. So those two colours are not the same. And for example, when we press this Play button, it will open up application preview. So this is our art board and this is our button. So when we hover over, as you can see, it will change its color, okay, because we have defined our hover style or hover state. So let me just switch faster this prototype section. And here, select this button, and we can select this tree. So instead of a holler, We can select tab trigger. And now when we run this preview, when you hover over, nothing will happen, but when we click on that button, it will change the color. Ok. So this, this state's component states are mostly associated with prototyping. And I'm going to cover this prototyping section at the end of this course and not now. So let's switch it is the designer section. And here basically now you have learned how we can create a different styles for our project and reuse them later when we want. So we call it a color, characters or phones and our components. So for our application, which we are going to design inside this course, we're going to basically create their components, for example, for a header or for a bottom navigation view. And we're going to reuse those components in each and every screen. Okay, that will save us a lot of time and that's it. So now you have learned how you can add your project assets. Your project colors here, styles, components and so on. And in the next video, I'm going to show you the most popular shortcuts which we can use inside Adobe XD to save our work time. 5. Keyboard Shortcuts: Hello there and welcome back. So in this video, I'm going to show you the most popular shortcuts in Adobe XD. So this will be my personal favorite list of shortcuts. And of course there are many more other shortcuts. And I'm going to also leave you a PDF file with the list of all the Adobe XD shortcuts as well. So let's get started. Okay, and the first shortcut I'm going to use is used for zooming in and out. So we need to hold the control and the just use our mouse wheel. As you can see, I'm zooming out and now I'm zooming, zooming in. So for example, if you want to zoom in on the bottom of this art board, then you need to move your mouse there and just hold control and move your mouse wheel. And as you can see, then you will be able to zoom in on that same spot. So the next shortcut is actually for moving on the canvas. And you just need to hold down the space and just move on the canvas. As you can see, we can move around as well. So it's very convenient. And next time we're going to show you the shortcuts for those main tools on the left side. So the first one is select all in the shortcut for that is VI, letter V. Okay? So it is a lot easier to just use that shortcut instead of moving the mouse on the left side every time we want to choose a different tool. So next we have this rectangle. So for example, when we click a letter R, As you can see, we will be able to start creating a rectangle immediately. And when we want to switch back to Select tool, just press V. And as you can see now, we can select that element and for example, delete that. Okay, so the next thing, we have a polygon. So the shortcut for that is why. And as you can see, we can start creating that immediately. So I'll switch back to the Select tool click Vi. And really that next we have a line tool. The shortcut is l. And next we have UPENN told the shortcut is P. For the text tool, shortcut is t. And then we have this art board. Shortcut is a. So when we press that, so when we press the a letter, this sidebar on the right side will change. And then we can select the pre-made templates for our art boards. So our current art bore is Foucault pixel four or four x l. And we can scroll down until we find that the same. And as you can see, just click that and it will immediately create one. Or we can just create a custom one by creating and dragging our mouse like that, okay? And of course you can change the width and height of that onboard as well. So I'm going to remove those are the boards. So I'm going to select the V2. Ok, so select this tool and I'm going to remove that and that and that kid was drilling down below hold space. So next, I'm going to show you how you can copy and paste those shapes. And for example, let's zoom in. So control and mouse wheel. Let's press our shortcut for rectangle, and let's create one rectangle for example. Ok, so now select V8. I select all. And for example, let's press shortcut Control C and then control V. And you will see that the Immediately I, we have created another rectangle here. So we have yours, the common shortcut for a copy and paste, control c and control v. So for example, when we press control v again, as you can see, the, another rectangle will appear on top of that one. So we can more those, as you can see, we have three different rectangles, are K. So those are just the basic copy and paste shortcuts which we have on Windows already. Next though, you can also use a control X to cut and control V to paste that same object. Okay? Alright, so next shortcut is for duplicating. We can use a shortcut Control plus d. And that way, as you can see, we are going to copy, we're going to create another copy. A lot easier than in the previous example. So we'll just press Control D Once again, and you will see another rectangle appearing here. So here are three of them, right? All right, so let's remove them and let's create, for example, ellipse objects. So let's select shortcut E, and let's create, for example, those too. If you want to create a perfect circle, then you need to use a shortcut shift. So just hold shift that when you are dragging these syrup, OK. Now select the Select tool, so v. Alright, and next let's create another one. So I'm going to click Control D to duplicate that. And I'm going to move that on the left side. Okay? And now if we want to select those two, those two objects, we can just use our mouse to select all of them. Or we can use a shortcut control a, and it will select all the elements out there, okay? And we can also use a shortcut by holding shift. So hold Shift and select this one and hold shift. Still, press this. And then you can see by holding shift we can select multiple elements and also we can deselect them as well. So I'm still holding down the Shift and when I click on that object, it will be deselected. And when I click on this one, it will be deselected as well. So I can select and deselect as much as I want by holding down the Shift. Okay? And the next is a shortcut for, for undo and redo. So for example, we have created those two circles. And when I press Control Z, as you can see, it will redo. And when I press controls, again, we'll remove that duplicated ellipse object. And when I press control zed, once again, it will remove that first ellipse as well. So we can use redu, shortcut and that is Control Shift plus zed. And that way we can revive backdoors those objects. So press Control Shift plus and zed once again and once again. So you can see it will appear back. Alright, so next thing I'm going to show you a shortcuts for grouping elements. For example, we have a two elements here, and we can group them into one just by pressing shortcut Control plus and g, Okay? And that way we have created a group here on our Layers panel. Okay? And when we click this folder icon, we can see the actual content of this group and the quanta that are, those two ellipse doors or ellipses are okay, and even though we can change the name of that group by double-clicking on this group. And we can change that to something like for example, group. Ok, so just an example of course. And if we want, if we want to ungroup those elements, we can just use a shortcut TO controller Shift plus and g. And I'm going to hold and press that. And as you can see now, those elements are ungrouped. Okay? So I'm going to zoom in now, so control and the mouse wheel, okay, and let's select this one. So now I'm going to show you a shortcut for revealing the margins. Okay? So just hold the, all too when you select one of those objects. And as you can see, or we can see those margins. So if I zoom out and when I select that element and press all, you will see that the margins are showing to the, this art boards. So we are 117 pixels away from the top of our aren't born. And though, if we are holding down, steal this shift and when we hover over the other element, then it will show us the margins in between those two elements. So this one is very important when you are working with their UI design. Alright? And so I'm going to remove those two are okay. And let's use this rectangle tool. So let's use a shortcut. Are, it's a lot easier and it'll save us a lot of time by using those shortcuts. So let's create this one. Okay? Let's select all, let's move that here vertically, RK. And now I'm going to show you how you can rotate this elements. So hold down the Shift and just tried to rotate this. And as you can see, this is called the constraint rotation. So basically we are targeting the specific angles and we can choose, for example, 90 degree or 304560 and so on. And this is also a convenient way to rotate our elements. Alright, so the next I want to show you one more important, very important shortcuts for resizing our elements. So let me create, for example, this ellipse door. So if you want to create the perfect circle, you need to hold down Shift right? So there is, I'm going to click Control zed to remove that. And if you want to create a perfect circle, but from the center, then you need to hold down 4t plus shift. Okay? So hold down shift and start to directing that. And as you can see, this circle will basically Resize from its center point. Okay? And that this shortcut is also very important. Alright? Okay, so let me just zoom in and if you want to resize, again, just hold the odd parts shift and you can resize this from the center as well. So let me just more that here. And now I'm going to show you a shortcut for a duplicating the item, but without using the regular shortcuts like Control C or control plus D. So we can also hold down all of the plus shift. So as you can see, I'm now holding odd plus shift. And when I move on the drag, click and drag on the right side. As you can see, I'm going to immediately have a copy of this object. And as you can see, when I move my mouse up and down, and this circle will not move on the, on the top or bottom. It will just move on the left or right side. That is because we have used them control plus shift of plus shifts, sorry. So if you just hold all without the shift, then you can just copy that element wherever you want. Okay? So I'm going to undo death. And if you want to copy that object on the straight line, for example, left to right or top and bottom. Then you need to hold down the Shift and all together. So let's hold down all plus shift and let's click and drag on the top, for example, or on the bottom. And as you can see, our element will move only on the top or on the bottom, but will not move on the right, on or on the left side. So this is pretty much convenient if you want to create a multiple elements in the same line. Okay, so this is very important shortcut which I'm using on a regular basis, and that's pretty much it. Okay, so I have covered most of the shortcuts which I am using in in everyday work. And there are a lot of more shortcuts which you can find on our official Adobe XD website. And also I'm going to link you down in this course, the actual PDF file in which we can find order or the shortcuts for this, this UDL basically. So that will be all for this video. 6. Introducing with Material Design: Hello there and welcome back. So with this video, we're going to start introducing with the material design. So material design is a design language which is developed by Google. And here is the official documentation for material design. And the website is called the Material dot io. And this documentation is very well formatted and we can find lots of useful information around here. So in the two or maybe three videos, we're going to go through this material designer documentation and check some of the important things about this material design overall. And later throughout this course, when we start actually designing our app, we're going to visit back this documentation and check some of the guidelines for a specific components, lake bottom navigation view, ActionBar, some of the buttons and so on. So when you visit this website, just click this design on the tonotopy. Okay, and on the left side here you will see some documentation for environmental layout, navigational and color typography and so on. So in this current video, I'm going to show you just a basic things about this material design. So just click surfaces here in these environments section. So the material design can be compared with the physical world. So here it says that in the physical world, objects can be stacked or attached to one another, but it cannot pass through each other. So they cast shadows and reflect light. So basically Material Design can be compared with our real-world objects. And I'm going to scroll down below till we find some good examples. So let me see. Okay, so this documentation is well-formatted and we can find out lots of do's and dont's, which we cannot compare. So basically the height and the width of material that can vary in Material, components are always one DP thick, so we cannot increase the thickness of our components or elements. And down below we can check some of the examples in the video format. So the shadows showed the elevation of a different material surfaces. And down below, we can see that this example doesn't express shadows without changing a surface elevation. And let's scroll down below until we find some more examples here. Okay, so Material components are always a solid and the user input and interaction cannot pass through material. Okay, so that one is also important to notice. And for example, when we are dragging one item over another, we are actually elevating that item and we're casting a shadow on that. So I'm going to show you a video down below which represents that. Very well. So, but before that, let's check it out so we cannot use our material components, lake liquid or a gas instead. They, they change through opacity, size, and position. And of course, the material does not look like a fluid as well, and it not behave like liquid as well. So down below, let's scroll until we find some more examples. So material and never bends or false. Care, let's scroll down below and to find some more good examples. All right, so there are a lot of components, material components here in this documentation which we can find. And the later in this course when we actually start designing our application, we're going to visit those components section and we're going to see the all the specs for those actual components. Okay, so let me go to this elevation section. And here, as you can see, we can see the item here, which is an elevated item and this is a background. So this background has only one DP of elevation. And this box is actually located on top of that because it has a greater elevation. So that's how we represent the items which are stacked on each other. So for example, in our application, the floating action button will have the biggest elevation. And this example is quite useful. So C, So here we can see the action bar, we can see this box and we can see the floating action button. So on the right side, this image is showing us that this box has the lowest elevation, while the header has the bigger elevation than the box. And the floating action button has the highest elevation of all items here, okay? And it is casting a bigger shadow. So down below, I'm going to play one video so you can check it out. So when we drag one item, as you can see, it's elevation grows. And basically that's how we can see that this iter when we drag that is actually on top of all other items. So this example is a quite useful and as you can see, the floating action button actually disappears. So because floating action button at the beginning has the rater elevation then this box. So when we try to drag a box and increase its elevation, then this button disappears. So that's the more convenient way to use. And here it says that temporarily reposition or remove components which might collide with transitioning components. So that means that we have here seen that floating action button is actually removed from the screen so we can actually elevate our item. And below we have many more examples, but I think that you now know how this material components actually works. So basically they are represent the real-world objects and they cannot pass through each other. So that's really important to notice, of course. So you need to be very careful when you are designing. You need to watch over the, the elevation. So here, now we can see that the header and the content are basically merge into one because we don't have an elevation on our header and that is a bad example. So the lack of shadows or other visual cues to indicate edges or n surfaces or lab grids and insufficient contrast between surfaces. As a result, it's difficult to understand which pieces of this UI are grouped together. And that's true. Basically here we have some more examples and we can see that the item is elevated when we click on that. Okay, so that will be all for this video. I think you understood what this material design is all about. And the, the next video we're going to go through this layout section and show you some of the layout within our material design and how you need to handle margins, columns and so on. 7. Layouts - Material Design: Hello there and welcome back. So in the previous video, I have introduced you with material design. And this material dot IO website is the official documentation for our material design. So go ahead and click this and design here. So in this video, we're going to go through some of the most important things which you should know about the layout for material design. So let's clean this layout section here. And I'm going to start from this responsive layout, agreed? So I think that this section is really important to know. And in this section we're going to talk about combs and gutters and margins. What are those actually? So, so the columns are actually the areas on the screen which contains some content. And the gutters are the space between those columns and the elements inside our content area. And the margins are actually the space between our content area and the edges of our screen. So let's go down below. And, and they'd say that columns, column width is defined using percentages rather than a fixed values to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range. And in the breakpoint range is arrange of predetermined screen sizes at which screen is viewed, whether it is a break point for mobile tablet or another size. So here on normal at the breakpoint of 360 DP, this layout uses four columns, okay? And the down below, on the tablet at the breakpoint of 600 dp, this layout uses eight columns. Alright, so when we started designing our layout, we're going to use and guidelines to actually create those columns on our screen so we can count the number of columns and decided the, the actual width for our gutters and margins. So number we can see the gutters in the gutters are the spaces between the columns and they help separate their content. So the gutter width is fixed value at breakpoint range. So to better adapt to the screen and gutter width can change at a different break points. So why during others are more appropriate for our larger screens is they create more white space between the columns. So for example, when we use a smaller screens and then they got there is, for example here we can see 16 dp. And when we use this same layout on tablet, it increase its size to 24 d b, so it is constantly adapting to our layout. Alright, so an umbrella, we can see the margins and margin soundless space between content and the left and the right edges of the screen. So margin with are defined as a fixed values. So the fixed values at each and every point range. To better adapt to the screen, the margin width can change at a different break points and wider margins are more appropriate for a larger screens as they create more whitespace around the perimeter of content. So here, for example, on the mobile devices of offer breakpoint of 360 DP, for example, we can see there are 16 DP margins. And on the tablet, as you can see, the same content, but this time with the modern software 4p instead. So you don't need to always use the margin sulphur 16 VP. That's just one example. You can use less GDP for the margins and for legato Russ as well. So here we can see that this data is actually a little bit different. So here we have a layout of ATP for the gutters. So it's very important to notice that. Width of the gutters can indicate different two person. So here it says that the tighter spacing may suggest the images are closely related to one another so that they are perceived as a part of a collection. So here, for example, we have Gallery and the gutters are smaller. For example, ADP and the user probably will perceive this as a one collection. And on the other hand, when we use a larger gathers, for example, 32 ADP, it creates a more separation between their columns. And this extra space helps each album to be perceived as in individual entity within our collection. So it is important to notice that and they're using too much data. This can be really problematic and they're not good. So don't make gutters to large, such as the same width as the columns. And because too much space, so it doesn't leave enough room for the content and prevents it from appearing unified. So don't use too much of the gutters. So you need to be very careful when you are counting in the resizing your own gutters. And down below we can see for customizing margins that we can also use margins less than 16 BP, for example, here, the margins are the NDP the same as the gutter, and that is totally fine. It looks very nice. And the number we can see this layout which is using a 64 DP margins to limit the width of the continent. And for the News app like this one, it looks very nice and it is no problem at all. But they're using too much margins like this is not good and it makes no room for their content. So that is a bad example, of course. So within the same breakpoint and gutters and margins with can be different from one another, which is totally fine. Of course you can set a higher with further margins and lesser width for the gutters, of course, and for the horizontal grids as well. You can chose a different margins here on the horizontal here, as you can see, they are different and that's totally fine. So when we actually started designing our layout and our screens, you will see that we are going to count those columns and we're going to decide which got us and margin size. We're going to use r k. So none below we can see this breakpoint system as well. You can read that by your own as well. And we can see this for the iOS breakpoints. So it's not the same exactly as the Android. So well, when we are creating the contents on our screen or on our layout, we should not use a fixed values for our With, because when we scale our app on a bigger screen sizes than our content will not scale as well. So that means that we need to use, so that means that we need to use a match constraint or match parent for the width if we're using constraint layout for example. And that way our layout can be scaled in resized to adapt to different screen sizes, which is very important of course. Okay, so now we can see some more information about this, this layout. And I'm going to go to this spacing methods to see, to show you some more examples of spacing for the grids. So here we can see different examples. For example, in this bottom navigation view, which is showing us that the bottom margin should be little in greater or bigger than the top margin. So I don't know if you have noticed this so far, but most applications which are using the Material Design, you can notice that they have a slightly bigger bottom margin for this bottom bar. And this is also important to notice, but when we start designing our bottom navigation view, we're going to visit this Components section actually. And this Components section contains all the material components here. And that way we are going to open that bottle navigation components and documentation. And we're going to check all the specs which we need to follow and the guidelines which are very important to, to remember. But for now, I'm going to close that. And let's scroll a little bit more. So as you can see, the spacing is very important for each and every material component there is. So the padding as well. So for example, in our action bar here, we can see that the space between those two icons are, is a 20 4p. And we need to be consistent with those values in our design and number, we can see some more examples of those columns, margins and the padding. Of course, this is the alignment. Okay. So I'm not going to bother you anymore with this documentation. I think I showed you the most important things about the layout when it comes to material design. And that will be all for this video. 8. Colors - Material Design: Hello there and welcome back. So in this video we're going to read together material design documentation for color system. And at the end of this video, I'm going to show you one interesting web application for automatically generating material and color combinations for your project. So of course we go to this material dot IO website and we're going to click this and designed from the menu. And then we're going to choose a color here. And let's choose this color system first. So we're going to start with this one. So here it says that material design and color system helps you apply color to your UI in a meaningful way. This system, you select a primary and the secondary colors to represent your brand and dark and light variants off each color can then be applied to your UI in different ways. For our project, we are going to have a primary and a secondary color. And the light and dark versions of both of those are case on scroll down below. Here we can see the three principles of color system. So we have, so we have the first-principle, hierarchy Hill. And here it says that the color indicates which elements are interactive, how they relate to other elements and their level of prominence. So important elements should stand out the most. Next we have eligible. So the text and the important elements like icons should meet eligibility standards when appearing on colored backgrounds. And we're going to cover this eligibility a little bit later. And the third one is expressive. So show brand colors at the memorable moments that reinforce your brand's tile. So let's scroll down below and here we can see the baseline material color theme. So every material coral quality is consist of primary and the secondary color and when it's dark and light variants. Okay? And of course, we can see that we have a background as surface and error colors as well. And we have those on primary and secondary on background, on surface, on error. So what those actually means, so when a caller has this ONE word in front of that, that means that those colors are used on top of those other colors. So for example, on primary. So that's color is used on top of this primary color, okay? And on secondary, That means that this color is used on top of this secondary colour. So depends on which color combination that you choose for your project. You will need to test your accessibility for your colors and see if those, for example, secondary colors, can have dark or light colors on top of them. Okay? So we're going to call that topic a little bit later. So let's scroll down below me play this video K Here we can see different variants of primary and secondary, or primary dark and primary light. So here you can see that the color primary is used to pay into the action bar and color primary dark version is used to paint this status bar. Okay? All right, so let's scroll down below. And here we can see that we also have this pink color which is used on this action bar. So probably this is the secondary colour or the primary core color can have two primary variants. So you can also use this color for your action bar. And as you can see in this plus symbol is colored in black. So that means that a white-collar wouldn't pass the accessibility test. Okay, scroll down below so we can see some more examples. Now, k, So here we can see also that we can use a secondary color to paint our floating action button, for example. And let's scroll down below as well so we can see some more examples. So here we have a surface background and error colors. So service colors affect surfaces of components such as cards, sheets, and the menus. The background color appears behind scrollable content. And mostly the baseline begging around in surface color is white and error color indicates errors in components such as invalid text in a text field, for example. So this is those colors which I talked about earlier, so on, so on colors. It's really so App surfaces, user chorus from specific categories in your color palette, such as a primary color. So whenever elements such as text or icon appear in front of those surfaces, those elements should use colors and designed to be clear and legible against the caller's behind them. So this category of colors is called on caller's, referring to the fact that the color elements that appear on top of the surfaces that used the following course on primary, secondary surface color, background color, or error color. Okay, so when a caller appears on top of a primary color, it, it is called on primary color and they are labeled the using the original color categories such as a primary color with the prefix on here down below, we can see that we have this on primary and secondary on background on surface. And we can see the examples here as well. So we have first ONE primary, which is the white collar. And that means that our color is illegible to be placed on top of this ONE primary, because our primary color is this purple color and white can be a good choice for death. So at the end of this video, I'm going to show you one tool which will test this eligibility and accessibility tests for your colors. You will see, and here we can see this on secondary colour, which is used on top of the secondary color, and that is our action button. So as you can see, the appropriate color wouldn't be a black and white, our case. So let's scroll down below and here we can see accessible cores. So to ensure an accessible background behind like in light and dark text, your background can use light or dark variants of your primary and secondary color. And I'm going to play this video so you will see. That this checkmark is changing its color depending on which surface it is located. So let me just scroll down below so you can see our k. So here we can see different variants of this colour. So we have nine hundred and eight hundred and seven hundred and so on. So we can see that our white color of this checkmark is applied on those callers with this number until there are 400. And if the number is less than 400, then the black color is applied. So you need to be very careful when you are choosing your colors. Color primary, and on color primary. So it would be a bad practice tool, for example, add a white color on top of those last four callers. It would, it would not look that good. Okay, so let's scroll down below and let me see what do we have here? We have those material colors as well. But I'm going to show you one tool which will let you choose your colors. So we're going to skip that for now. Let's open this applying color to U-I section and K. So here we can see the guidelines which describes a variety of UI components and elements where color application is important. So we can see that we have sheets and surfaces, top bars, buttons, chips and so on. So here we can see that top and bottom bar uses an application primary color. And you can see that system borrowers use the direct version on this system bar and light version is applied to this action button. So that's a good thing. We have different variants of colors here, for example, those color combinations are very good. This example showed that you need to be very cautious because having the same color on this bottom bar and you're a floating action button can be bad practice, so it can be confusing sometimes. So the bottom navigation in this floating action button have a different colors. Okay, so let's scroll down below and let me play this video here. So you can notice maybe that when we are on top of our application, then our action bar does not have this shadow. And only when we scroll down below this shadow is activating. This is actually a good practice. So just keep that in mind. And let me just scroll down below to see if there is. Some more good examples are, okay, well, we're going to cover most of those when we start actually working on our design. For now, let me just open this text eligibility section. So all texts should be illegible and meet accessibility standards. And that is very important. So black text is recommended for use on a light backgrounds in our white text on a dark background. So if your app has both light and dark themes, make sure that text is available in a contrasting color against each theme. All right, so let's scroll down below and here you will see some examples of bad practices. So here we can see that our black color is on top of this purple or pink color and that which is totally fine. But when we use this gray color on top of that, then it is bad practice and it looks very bad because we cannot, we can barely see there what is saying in these texts. So you should keep that in mind. So there is one more important thing to remember here. So for example, if in your application you have a headline in the subtitle and so on. You need to remember that for their subtitles, you shouldn't use a gray colors. Instead, you should use opacity. So for example, if you're a headline is colored in black, then you are a sub title should have the same color bath with different opacity. So for example, you can add 60% opacity for your subtitle and it should look grayish. And for example, for disabled buttons and components in your application, you should use a black color bath with a capacity of 38%. And that is why you only need a black color. You don't need to add the different variants of grey case. So let's scroll down below to see what we can find here. Okay, so here it says that large headlines in short texts, snippets are the best for core text. So if you want to have a color text, then you should apply that call texts to bigger headlines to your application. And all right, so let's scroll down below and you can see here helper texts or helper texts that gives you a context about fields inputs such as how the input will be used. It can adopt brand chorus, but should be legible is determined by this WCAG standards. So I'm I'm not going to read those standards, but we can read this documentation instead and use one of the tools to generate our colors. So here for example, helper text on a light background, pi there following opacity and the fourth hexes. So high emphasis helper, the text uses Hex off black color with 87% of opacity. And this helper texts, he has only 16. So that's what I was talking about earlier. So you don't need to have grey calls for your subtitles. You just need to use a black color with different capacities. And here for the selected text, as you can see, select text reflects to a brand and you should use the center of your primary or a secondary color to mark your selected text. So selecting texts should be illegible against the selected color and the selected color should be contrast to a background color. Okay, that's it. And now I'm going to show you one tool which is actually available on this URL address. So Material dot io slash resources slash color, and you will access that tool right here. So this is the tool which will help us generate the material colors for our project. And for example, you can see this primary section and a secondary section here. So for example, let's choose a primary color for our project. For example, this one. And it will automatically generate the dark in later versions for your project. Okay, so you have dark and light versions and you can see even in that text on those columns. So as you can see, the text on this primary color is white, and on this darker color is white. But on this light version is the text is called in black. So that means that this light aversion or is not legible to have white text on top of that. And now let's select this secondary box here. And for the secondary color, let's choose, for example, this one, or maybe this one. So here you will see also the color of the text on top of those columns. So on top of that color we can see the text is white and here as well, but on this light merger, that text is actually colored in black. Okay, so also here you have the preview of the application with those color combinations. So you can see that the status bar here have this direct primary color, this ActionBar have this primary color, and this floating action button has this secondary color. Ok, so we can scroll on the right side and we can see some of the more examples for for where those colors can be applied. So you can see these tabs. The color of, I think it is this yeah, primary lite version and so on. So let's scroll to see more examples so we can see the button has the secondary color, ok, so this is a navigation rover. Ok, those are some boxes, background as you can see. So here you can also check this accessibility for your colors. And when we open that, you will see that, for example, in this primary color, black, black text is not eligible. So you cannot use black text on one primary color. I mean, you can, but it wouldn't comply with material design standards. And then we have this light version of our primary color and white text on this color is not eligible. And then we have this dark color. So the black text is not literal here. Then the secondary text, and we can see here the, the black text is not eligible for normal text and for the large test with minimum of 63 opacity. Okay? So now we can see this light, secondary light. We can see that the white text is not eligible normal text and so on. So here you can also check your accessibility for your colors, and you can also check the user interface. There is also an export button. So here you can export those columns. And you will see these colors XML file. So let's open that. And you will see that this tool has automatically generated this resource for your Android Studio project. So now you can just copy that file and apply to your project. Okay, and here also we can apply a custom color so we can find our hex code and just pay that here. Or we can select, for example, a primary, secondary color and choose a specific color from this core path. And we can see if that would look good or bad on our, on our application. So that will be all for this video. 9. Typography - Material Design: Hello there and welcome back. So in the previous video, we have read the documentation about color and color system or for material design. And in this video, we're going to actually read the typography and documentation for material design. So let's open up this design section and let's search for our topography here. So select that and select that pipe system. So this video will be a little shorter than the previous ones in their first, let's start with a timescale. So if you're not familiar with the type scale, the material design type scale includes a range of contrasting styles that support needs or for your products and contents. So the timescale is a combination of 13 styles that are supporting the biotype system. It contains reusable categories of text, each with an intended application and meaning. So let's scroll down below. And the type scale generator is a tool for creating timescales in the corresponding code. So down below we can see that tool for generating a timescale. And our project will actually contain a tool, different fonts. I wanna font, which will be applied for a headlines in the other four subtitles, body and the other stuff. So as you can see here, we can choose, for example, I heading font and body and captions font. So if we put our mouse or this information button, we'll see some very useful information. So let's read them. Saw headlines are the largest text on the screen are reserved for short, important taste or numerals. You can choose an expressive font, such as this play handwriting or a script file. So these unconventional designs can help attract the eye. And subtitles, on the other hand, are typically reserved for medium emphasized text that is shorter in length. So for those subtitles in the smaller texts, we should use a serif or sans-serif typefaces. And down below, when we move our mouse on top of this one, it says that the body text in the related styles are used to display the majority of information on the screen needing to be clearly illegible. It small sizes. So a serif or sans-serif typeface is recommending for those. For those cases, let's first open up our official Google, Google Fonts website. And on this website we can find them many different styles of fonts and that different type faces. So from the categories, this time, I'm going to select only a handwriting. And for example, if we find some beautiful handwriting font, for example, this core get, okay, so let's get back to our screen and let's type that, that font name, our case all, let's select that. And here you will see how this core get phone locks with the combination of roberto. So their core get fond is used the owner headlines and the rubato is used on subtitles, body, and the buttons and other stuff. So you can see that this core get font is used only on a headlines and the tool subtitles, and that this rubato is used on all other texts. So inside our UI design, and we're going to have a two fonts as well. One which will represent our main headlines and the other which will represent other texts, smaller texts. So we're going to choose the fonts for our project in the next videos. But I just wanted to show you how this timescale of 13 fonts looks like. So we can scroll down below and we can see one more example of timescales. So this example timescale uses only the rubato typeface for all headlines, subtitles, body, the captions. And here you can also see that the font sizes, which are applied to those scale categories. So we can see that the minimum size, font size for our heading is 20 SB for Android devices and 20 PT for iOS devices. And the letter spacing for this one is 0.15. and there we're going to focus only on a scale type, font, weight and size and this time, okay, so for example, the lowest heading font has the size of 20 and the style of medium. And we can see the subtitle one in subtitle two are varying from 14 to 16 size and the regular in the medium, we can see body h1 and h2, which are very hitting from 1416 in size. And both are irregular. For the button, we can see that it contains a 14 SP in size with the medium style. But we can also see a little difference here. So our button has capital letters, so all capital letters here and all capital letters, owner, overlying scale category as well. So you do need to keep in mind that those are values for different scale categories for a headline, subtitles, bodies, buttons, and so on. So if you don't know what this overlying is, let me just scroll down the law. And the overline is basically a text which is appearing on top of our headline. Okay, so it's simple as that. And when I scroll up here and you will see that there is a difference between Android and iOS. In Android, we're using SP as a measurement of font size. And when iOS we're using a PT. So basically those are pretty much the same. There is only slight difference, but now importantly the moment R k. So down below we can also see some of the examples right here. And as you can see, it is always a good thing to have headlines with handwriting font or some other script style or display style font. But our body and subtitles may have a different kind of font-style. Okay, so we can scroll down below and check out some of the more examples. But let me go to this Google Fonts just for a second. And here, basically you can find all the fonts you need for your project. In this case, I have chosen this a handwriting category. For example, if I choose this core, get points for my project, I can select it. Here. You can also download your font, it very easily. And down below we can see some information about this square get font. And there is one interesting, a section down below which says a popular peering with core get font. So here we can compare our core, get our current font with some other fonts. So as you can see here, we're comparing forget with Open Sans font. And we can see here how the hearing should look like and how the body texts should like with the Open Sans font. And this looks pretty much nice. So here we can also compare with the rubato here as well. We can even switch those two funds. But of course, the subtitles should be should have a typeface of sense or san-serif, and headings should have some interesting handwriting font. Okay, that's it for this video. Be sure to remember this website for fonts. So phones dot google.com. Here you can find many interesting fonts for your project. And in the next video we're going to start and actually add some colors and fonts to our project. 10. Lets get started - Splash Screen: Hello there and welcome back. So with this video, we are going to finally start building our UI design. So first, open-up Adobe XD. And once you see this window, we need to select the template for our project. And in this case, I have selected the Google Pixel for or for Xcel with the size of 412 by 870. So just select that and we have our project. So by default, Adobe XD, we'll save our project on the cloud, but we instead want to say this project on our own pieces. So let's open up the menu here and click Save as a local document, our case. So I'm going to say that on the desktop and I'm going to name this project my design. Okay, I'm going to click save now, and that's it. Ok. So I'm going to zoom out a little bit. So I'm using shortcuts, which I have already showed you. And now I'm going to change the name of this art board first. So the name of this art board will be splash screen. Because this, in this video we're going to actually create our first screen which has a splash screen are case, so that's good. So the shortcut for saving the project, as you can see when you see this star here, that means that you have unsaved changes. So if you want to save the project, now you need to click this save button or a shorter control plus s. So I'm going to use this shortcut very often. So now I'm pressing Control plus s, And you'll see that this star disappeared. So that means that our project is now saved. Okay, so now that we have created our first project, you can see the dimensions for this art board, 412 by 870, our case. So next, let's switch to this assets, okay? And here we're going to start by adding a colours to our project. Okay? So for that, we need to visit a website called Material dot io slash resources slash color. So here we need to select a color palette for our project. Okay? So first, for the primary color, I'm going to select this one. And for the secondary, I'm going to select, I'm going to select this one. So at the end of this course, we're going to experiment with different colors. But for now, I want to stay in use those colors which I have already chose. So it will be a lot easier for us to change the color of all our project in the end of this course because we are going to define those colors here and we can just change them in one place. And then all colors from our project will be changed as well. So first I'm going to copy this code from this color, from the color primary. I'm using a shortcut Control-C to copy that. And next time we're going to. Click Add here, ok, so it added the white color. And first I'm going to create one ellipse here. So just for the purpose of adding this color k And now select this color, click add. A white color is also needed in this project. So let's first rename this to color primary. Next, let's copy other colors. So we have this dark color. So let's copy this one. Control plus C to copy. Again, let's paste that color here and then just click the plus icon here. So let's call this color primary dark. Okay, let's copy this one now. So primary alight. Let's copy and place that color here. Then cyclists element add is color, and double click on that color. Primary alight, r, k. So the dark color will be on the top end is primary in the middle. Now k. Next we need to add the secondary. So Control-C to copy that code. Then paste inside this circle. Click this plus button. Let's rename this to color secondary. Now k click Enter. We're going to place it color here. Next, this one. Okay, let's place it here. Please add button, rename this to color secondary, dark. Place that down below. And one more. So color secondary light. Okay, Bayes at here. And click this plus. And let's change the name to color primary or sorry, cholera, secondary highlights. And let's click and drag this on the bottom as well. And for this right, we can also change to simple as white. Also, we are going to need some darker color. And for now I'm going to add black color. But at the later sections of this course, we might change this from black to some little bit slightly lighter. But for now let's just add it and let's rename this double click and type black. And let's place that on the bottom. Okay, so for now we have our, our primary color palette with primary color and the secondary as well. So I'm going to select this and click delete to remove that. Okay, so now that we have selected our callers, now we need to choose the font for our project. So go to this website funds dot google.com, and here you need to search for your fonts. So I'm going to first go to this category and select a handwriting fonts. So for this project, I'm going to choose this core get font and you can just click on that and now on this font family, and I'm going to also download a rubato here. So just select this robot or you, or you can type, or you can type or go back and type here. For example, Roberto You can click select that endowed. So I have already downloaded those two fonts, so I'm not going to use them now, but you can download them here. Okay, so now that we have selected the, our color palette and the fonts for our products. Now we can start designing our splash screen. So for that purposes, I'm going to find online resource for my splash screen. So find a beautiful Vector file. So I'm going to go to this website name the free PQ.com. And here I'm going to select the free and vectors. And I'm going to search here for food pattern. Okay, click enter. And here we can download many different duty for vector files for our splash screen background. So I'm going to scroll down below until I find the one which I liked the most. So the one on the left side that caught my attention, and I am going to select that and just click this download button. Okay? And you will just save this file on your desktop. And once the download is finished, we're going to open that file. I'm going to extract this file in a folder or directory. And we're going to use this AI. Okay, so now let's open up our Adobe XD. And here I'm going to use our shortcut Control Shift plus I to actually open this browser window. And here we're going to navigate to this Download folder. And then we're going to open up this directory which we have extracted. And we were to select this AI, okay, so this file can be opened using Adobe Illustrator, but we don't need Adobe Illustrator. We can just open that inside Adobe XD. So click Import. Just wait until this imported here. Okay? So we can see two art boards. We will delete this one because we not need. So just select that and click delete our k And from here. So let me just switch to this layers section first. And we're going to Ungroup this background one group, so select that and press control shift plus g two, Ungroup this, this element. Okay? Now I'm going to select this font and when to delete that. Ok, I'm going to select this one and delete that. And and I'm going to select all other elements here and click Control and G to group them into one group. I'm going to now place them here. And I will delete this text here. We don't need it. Alright, we don't need this oddball anymore. Okay, so I'm going to zoom out using a control and mouse wheel. And I'm going to hold space now to move on the canvas. So click and drag this here. R k. I am going to zoom in now. And first I'm going to create, I'm going to use the Rectangle tool. So the shortcut is R, as you might know already. And I'm going to create a one layer on top of our art board here with the same size of our art board. I'm going to remove the border. Okay? And I'm going to name this layer on background. Ok? And for this color, I'm going to select this fill color. And here I'm going to use a gradient, a linear gradient color, okay? And we're going to create linear gradient color for our background. So I'm going to select this assets from here. Okay? And now what I'm going to do, I'm going to actually add that all those colors inside my color palette. So as you can see, let me just create one. For example, circle here. I'm holding Shift now, okay? And I'm going to select this one. So this one, then I'm going to click this and click plus r K. Then we select this color, then open this ad click plus. So I am going to add all those colors inside this color palette as well. So select this one, then open this click plus, then do the same for the rest of those colors. So basically, I'm adding all those colors inside my color palette as well. So just add those colors here, k. And I want to also add this white color and black colour as well. Okay, that's fine for now. I'm going to remove this circle. And from here I can hear you can leave those colors as they are and when to just place this around here. Okay? And now let's select our background here and please fill. So here we have our linear gradient, ok? And we have one spot and the other spot. So when you select one of those, you will see how how this icon on the, on the background will change. So we're going to select this one and add, for example, this blue color. And we're going to select the other, the other side and select, for example, let's say maybe this color. Ok, so now what I'm going to do, I'm going to zoom out. So control a mouse wheel. I'm going to take this dot, click and drag, and drag that around here, for example. And I'm going to drag, click and drag this one here. Okay, we can select this lot here and just change some other color if we want, of course. So I'm going to select this column instead. And for this dot, I want to select maybe this color so we can experiment to find which color will fit the most. Okay, I think this one is fine. Okay, so there it is. So let's zoom in now and let's place this image at the center of our art board here. Okay, so I think I see this. This font which we haven't, we haven't decided yet. So I'm going to zoom in and double-click on this layer. Then I'm going to hold down the shift to select all other letters. So I'm holding Shift and just selecting those letters so I can delete them all at once. How k Just hold shift and select all those letters carefully. So I'm going to release Shift and click delete. So now here again, click and hold down the Shift and just select those letters as well. So we're going to remove those letters. We don't need them for our background. Okay, now click Delete button. Let's zoom out using a controlling mouse wheel. And here we are going to increase the size. So what I'm going to do now, I'm going to place this vector on the top here, right there. And I'm going to hold down the shift now. So press and hold the Shift and start increasing the size of this of this background. So it might be a little slower because this is a bigger vector file, but don't worry, okay, and once we see this blue line on the bottom, that means that we have increased the size of this, of this background to fit our art board now, okay, so just a little bit, hold down the Shift key K. And now let's move that on the left side. And when we see the line vertically, that means that we have centered our image vertically. Okay, so now you can just click somewhere else on the canvas and you will see that in the rest of this image is hidden. And that is because we are using the cardboard. Okay? So select this image and from here where it says the border color. As you can see, our field color is not selected, and that means that we don't have a fill color here, instead we have a border color. So let's select this one and it's chose a white color. So you will see that hour, our design and got this new color. So again, I see some elements which don't belong here. So I'm going to select this line and clean delete, and select this line and click delete. Okay, so I'm going to switch back to this layer section just for just a second. And here, as you can see in our layer section, we have one big group which contains the many and many other paths. So I'm going to click this directory here, icon, and it will shrink. So now I'm going to double-click on that and I'm going to rename this to splash image and click enter. Okay, so the next thing, what I'm going to do, I'm going to reduce the opacity for this, for this image. So I'm going to reduce the opacity to maybe 30%. So there is a shortcut for this opacity. So we can select this image and we can press number, for example, number one or number two or number three. And this opacity will change its value. So when we press, for example, number four, it will increase the capacity tool to 40%. When we press number five, it will increase the capacity to 50%. And if we press two numbers fast, for example, five number 52 times fast, then it will increase the capacity to 55. Okay, so in this case I think I will go with number three, so 30% opacity, RK. And next we're going to select this text tool or the shortcut is T. So here we are going to write the name for our app, and I'm going to name this app folded. Okay, So we can barely see that. So just use Select tool or shortcut easily, or just clicks somewhere else. Okay, now let's zoom in and let's change the color to white. R k four the font, the font which we have already chose for our project. So forget. Okay, let's hold down the Shift and let's increase the size of this font. Or we can manually type the font size here. For example, let's type number 80. Okay, let's zoom out a little bit. Let's drag and move this element here. And when you move that element and when it is centered vertically, then this line will show, okay? And when this text is centered horizontally, then you will see this horizontal line, okay? And now our text is centered in our image background is centered as well. So there is, we have successfully designed our first screen, which is a splash screen. And in the next video we're going to continue with our app design. And of course, don't forget to save your project. So this little star indicator will tell you that you need to save your projects. So just click shortcut Control plus s And that this little star will disappear. 11. Top App Bar - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed our first screen, which is actually a splash screen. And in this video we are going to design our top application bar or ActionBar. So before we actually start designing our ActionBar here in Adobe XD, let me just open a material design documentation. And here we're going to search for our top bar. And we're going to go through this documentation and see their most important guidelines which we need to follow. So here, go to this material dot IO website, which you already know, and go to the components section here. And after that, we're going to click this EB virus stop. And here we can see the documentation for our ActionBar. Okay, so there's a little difference between action bars on a Android or for example, on iOS. But in this course, we're going to focus on the Android only. But if you want to create application bar for iOS or different platform, then you should go to this documentation and read that. So let's go down below and search for some important stuff. So there are three principles when it comes to top ActionBar. So the top ActionBar is persistent and it stays on the top of our application. The second principle is guiding. So the top barrier provides a reliable way to guide users through an app. In the third one is consistent, so the top bars have a consistent position and content to increase familiarity. Okay, so let's scroll down below and there are two types of top at bars. So the first one is a regular, which we can see here. So this is a regular ActionBar, and we can see this second one, contextual action bar. So this one is used to provide some action for a selected items. And this contextual ActionBar is actually shown where, for example, we select multiple items inside our list or something. Okay, so let's scroll down below and here we can see the anatomy of our top navbar. So on the left side we can see this navigation icon or a drawer icon. Next here we have a title and we have those action items or action icons. And those three dots are actually an overflow menu. Okay, it's very simple. And at the end of this documentation, we're going to check some specs how to design this, this environ. So let's scroll down below. So the barrel holds the content of the top Ambar and there are different heights of the action bar. So we have irregular Bat bar which has the, this is a fixed height and we have a prominent top bar on this second image, as you can see. So this second prominent toolbar is used, for example, when you want to place an image here or some longer title. Next we have this dense for the desktop. So we have the prominent dense, so prominent top bars on desktop k have a dense state to accommodate the denser layouts. You can also place images into your action bars or those prominent top at bars, but you need to be very careful. So the images which you choose for those. In the background, you need to be very careful because if you don't see those overflow menu and action items, then the image is not good for that. And you can see here that with this image we can barely see those action menus and overflow menus and even a title. So you need to be cautious when you're selecting an image for this top bar k. Let's scroll down below. And here we can see the navigation icon. So navigation icon can be Drawer icon or a back arrow, for example, an x number, we have a title so the title can be longer. But for the longer titles, I recommend you to choose a prominent top N bar and not a regular one, because we cannot use longer titles or two lines of titles in this regular air bars so it doesn't look good. So you should avoid that. And you should also avoid having a longer titles in your app bar, regular M bar because we don't want to see those three dots. It's a bad practice and we should definitely not shrink our title text, text size like this. So this is a bad example of case. So let's scroll down below. So there are real differences between action bars on Android and iOS. So for example, I'm going to open up this link just for a second. And here we can see the main difference between two bars, for example, on Android and iOS source here, for example, on iOS, we don't have a color primary dark on our Status Bar, and our title is centered on screen, and our arrow is a little bit different. Okay, so there are more differences between iOS and Android when it comes to material design. But of course, if you want to focus on iOS, then you should also visit this documentation and check it out. So I am going to close that now. And let's scroll down below so you can see those examples already. So when it comes to scrolling and ActionBar, there is an option for us to hide the action bar. When we scroll upwards. When you scroll downwards, we can reveal back our top bar like in this example. So that's a good practice. Down below, we can track her some more examples. So here you can see that the elevation on our action bar is 0 when we scroll all the way up. And then when we try scrolling down and you can see the elevation increases. So that's a good choice as well. But you should always remember to add the elevation on your action bar. So there is another way of extending this action bar. So as you can see here, are calleds scroll down below. So this is a contextual action bar, and I'm going to talk about that in the later videos of this course when we actually start implementing this second text election bars for now I'm going to skip that k. Let's see down below. So here, as you can see, we can see the examples of this on surface and surface colors. So we can also use a different font on on the action bar, and we don't have to use a sense phones, we can use some handwriting fonts as well, but that font should be well formatted here and compliance with the rest of the application, of course. So here we can see that this one has. H6 headline, which has a text size or font size of 20. And the font is married whether of bold, bold, italic. So now K, that's just one example more. Here we have some more examples. I'm going to skip that. I'm going to switch to this specs down below, and that is a very important section. So here we can actually see the extra dimensions for our action bar and the space as the separation between our icons, the title and the margins. So the height of this irregular top hat bar is 56 dp. And of course the, the width of this can be as long as our screen size. Of course, the icons on our ActionBar should have the width and height of 24. So here, as you can see, this icon and all of those icons except this overflow menu has the height and width, or 24 and this one just have width a little bit less, but the height is still 24. So the margins between this start and end is 16. So as you can see here in the space between icons is a 24 dp. And of course the spacing, the top margin of this action bar is 16 and the bottom as well, 16 again, and of course none below. When we scroll down, we can see this extended the top bar. So this time I want to use this extended top bar. The site shouldn't be no more than 128. And as you can see here, the spacing between this icon or navigation icon and our title should be 32, okay? And if you don't have this icon, then just plays this title with the margins of the 16 here instead of the cycle. Okay, basically that's it. So now that we have seen all of those, all of those examples, now we can start in designing our ActionBar. Let's go here and we're going to select our art board tool. So the shortcut is a. And here we can just choose this Google Pixel for which is the same size and our as our splash screen. I'm going to name these recipes screen. Okay, we can change that later if you want. So now we can start designing our ActionBar. So I'm going to zoom in. So hold Control and the mouse wheel and when to use a rectangle tool. So shortcut is r. So let's create just one here. U was V2 or selection tool with a shortcut or V to switch back. And here we're going to set the size to 56, which we saw earlier. We're going to remove the boiler color. We're going to add the color primary so we can add the color from here or even from our color palette. It's pretty much the same. So let's add the color here to color primary. So the size of our Status Bar is actually 24. So we cannot see here actually, but it is a 24. So let's move this down below to 24. And I'm going to switch to Rectangle Tool and create one more rectangle for a status bar. So click Vi to switch back to Select Tool. Remove the border, and let's add a core primary dark here. Ok. So let's zoom out to see how it looks. It looks very nice. And now for this. Our recipe screen, I want to add the two material icons. So I'm going to show you a website where you can find all material icons for your project. So the URL is Material dot io slash resources slash icons. And here you can find basically 95% of all your icons for your app. And there are many icons here which you can search for. We have the search filter here. We can choose filled outlined versions, rounded, two tones. So there are different versions of that. For example, we can use those a little bit around it. So let's search for search now. Okay, so I'm going to select this search icon. So just select that and click this SVG 24. So it will download this icon, SVG format of 24 pixels. And let's search for one more icon. I'm going to search for a sort icon, okay, so I'm going to choose this filter list. So select that click SVG hero, care, let's download that as well. So switch back to our Material design, our k. So here to import those icons, we need to use a shortcut Control Shift plus i, and now this browser window will appear. So let's select both of those icons. So hold control to a to select all of those. Click Import. And as you can see here, let me just place them here. Let's assume you, let's change the color here to to white, or we can use this one example here. So the search icon, as you can see, he has the width and height of 24 and this one as well. So let's switch just a little bit to this layer section for a second. And here we can see that this, those icons are actually grouped. So let's ungroup them here by clicking this directory. And we can see that this icon consists of two elements. So the one is actually icon and the other is a background. So that background actually have the size of 24 in written height. And the one we create some other icons. We should also use this transparent background for the size of our icon. And then on top of that we should add our icon and then group that into one group again. First, let me just add the margins of 16. So we're going to use a guidelines. So the guidelines are actually Alliance which help us separate our content on our art board. So here, when you move your mouse over on this edge, on this Start edge, you can see that your mouse changed. So we're just click and drag that and you will see this line. So we're going to place this line on the right side of the margins of 16. So placed that here and we're going to choose another one. So just click and drag and we are going to place that line or guideline here on the left side now, okay? And we can select guidelines as much as we want, so we can delete them very easily. So just click and hold and drag them at the start position and you will see this Delete icon. So just press your mouse and there it is, so we can remove that. And we can also use horizontal guidelines on the top. So just as you can see, drag that here for example. And now let's remove that. Okay, so our icon here should be centered. So let's, okay, so let's hold all, and you will see that the top and bottom margin, 16. So let's move this icon on the right side to this guideline, R k. So you will see now that we have 16 DP of margins, top, left, top, right, and the bottom. And that this icon should be 24 away from our first icon. So we can use also an arrows too, separate by pixel. So when you press the left arrow, you will be separated one pixel and press again, pressed again, press again. And now we have a 24 DP in their separation here. Ok, so let's zoom out. And that looks good for now. And the last thing we need is to add an actual title here. Okay, so let's use the text tool and let's write here recipes. Ok, so for the font, we are going to use rubato first. So let's switch back to this assets, okay? And I'm going to just move that right here. So the 16, So I'm holding all to see the margins. We can see the 16 on the left, top and bottom, and that's fine. And now for the font that we are going to choose the rubato or maybe forget. So you can use forget font here as well. But for now, this time I'm going to use robot of 10K, but we might change them in the future with a size of 20 and with the style of maybe, maybe medium. Ok, so if we open this official documentation and go to this design section and open up topography or sorry, topography and the type system here. When we scroll down below, we will see this scale type or types scale graph. And we can see that H6 has the rubato medium of 20. So this is just some guidelines which we can follow of course, or we don't have to, but I am going to stick with it. So I'm going to have this font of 20 of medium, and I'm going to add that font here. Okay, so we can also change the name of this font by double-clicking, but for now, I'm going to leave that as it is. So there it is. We have successfully created our ActionBar in our Status Bar. And now we can group these or header. So let's just select all of that. Click Control and G. But first let's watch this layer section. And now click Control G. And we will group that. And we're going to rename this group to action bar. Ok, so let's switch back to our assets. And here we're going to click plus and this components. So now we have added our action bar into our components. So the next time we create our screen, we can just drag this and add that into the second screen. So let's remove that for now. And that's it for this video. 12. Bottom Navigation - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed our top bar or action bar. So we have made the component out of this action bar and that there are a few changes which I want to apply here on our splash screen and on our component. So first let's start with our splash screen. Okay, so I'm going to switch this layers section here and I'm going to select this splash image. So I want to increase the size of this image to fit the whole screen. Okay, so I'm going to move this image, may be here somewhere, and I'm going to hold down the Shift and increase the size on the bottom as well. So maybe something here or k. So I can move that now on the top a little bit to center this image horizontally and vertically as well. So let's move that on the left a little bit. All right, so I think that now our splash screen looks even better and that there are a few changes which I want to apply it to our action bar. So let's switch to this acids component. And here what I want to do, I want to select this action bar here in our components here, right-click and click Edit main component. So now we're going to edit our main components. So first what I want to do, I want to switch places between those two images. So Double-click and move this image on the right side. So here and move this sort image on the right side, ok. And this search will be actually on the left side. Okay? So let's move that here. So we need to have 24 DP of margin. So if you want to see the margins, just hold Alt. And you will see that the 24 margin is applied here, okay? And we also want to add an elevation or a shadow. So select this one, this action bar and added the shadow here, okay? And that's it. So now we have a fixed even that, and now we can proceed and actually create our bottom navigation view. So before we actually start designing, we want to check the official documentation, of course. So select these components on this material dot IO website. And here we want to search for bottom navigation. So not f bars, but bottom navigation instead. Okay, so we're going to search through this, through this documentation of bottom navigation. And at the end we're going to check out the specs of this bottle navigation and appropriate guidelines which we need to follow in our design. So there are a few differences, of course, about the bottom navigation in Android and iOS platform, but we're focusing on Android in this case. So the three main principles of bottom navigation is ergonomics. So the bottom navigation bar is easy to reach on a hand-held mobile devices, consistent. So when you use the bottom navigation bar appears at the bottom of every screen and bottom navigation bar destination should be of equal importance. So, uh, went to use bottom navigation. So bottom navigation is used for a top-level destinations that needs to be accessible from anywhere in the app. We need to have at least three and a maximum of five destinations. Having to destinations inside our boats navigation is Bagua practice, so we should avoid that. And we should also avoid to have more than five destination. So from three to five destination is the best practice and you should be cautious when using this tab layout and with our bottom navigation so that might confuse our users. So let's check out the anatomy of our bottom navigation. So that container is of course these are background of how navigation view. So we have inactive icon and inactive text. So you can see that the inactive text and the icon have little less opacity. And the active icons and accurate text labels here before opacity. So down below it's CRO, until we find some more good information which we can, which we can find. Okay, so let's scroll down below. And we should always use the short text labels for our motto navigation items. And we shouldn't use a longer taste which are multi, with multiple words like this one. And of course, we should never decrease the size of the font to just show the full text here. So that's really bad for user experience. And of course, you should be cautious when using lines of text for our item in bottom navigation view as well. So on our active icon and active text label, we should use high emphasis on color for those active destination. So, so if you remember, let me just open this window. So the high emphasis texts, he has an opacity of minimum 87%. In the medium emphasis text and hint texts have opacities of 60%. So that means that our inactive texts or icons here have 60% opacity of a white color and that is on color. And this active texts and icon hover at least 87% of opacity of this ONE color. Okay? So you need to remember that of course, are case. So we shouldn't use different colors for each one of those elements or destination inside our bottom navigation, that's bad practice. And of course, there are some differences between Navigation, bottom navigation between Android and iOS, so you can check that out. But as I said earlier, we are focusing on em joy, the platform in this course on our bottom navigation, we can also use a badges and measures with the numbers and with a maximum character counts as well. All right, so let's scroll down below. So here we can also see some transitions throughout our destination. So let's play that out. So here the official documentation say that faded through transmission pattern is recommended for transitions between the bottom navigation destinations. And on the other hand, this this lateral side-to-side transition may imply a peer relationship between the items that does not exist or it can mislead the users into thinking that they can use our gestures to navigate between sections. So they say that we should use a fade transition animations for our destinations of k, then we have an elevation, of course. So we should always use the elevation for a bottom navigation in the action bar as well. So of course, our bottom navigation items does not scroll, so, so we need to avoid that. Of course. We can also set this same spacing between those items on a bigger resolutions as well, so that I will practise and we can also do something like that. So. It's all doable. Alright, so down below we can see the inactive destinations and active destinations. So those active destinations for opacity color and those inactive and destinations have obesity of 60% of this honor surface color. Ok, so let's go down below. Okay, so let's stop for just a second. And here you can see this theme, which has this blue background on our bottom navigation. And we have this ONE primary and on primary, which has the capacity of 76%. So we always need to use a less percentages for those inactive elements are calleds. Scroll down below and enter this bottom navigation which we saw earlier. And it uses this caption of 12 size in a font. So we're going to use the same font of 12 DP or sorry, SP. Finally, we can see our specs. So the most important thing here to remember is that the height of our bottom navigation is a 56 dP. Down below we can see the minimum width of our destination. So the minimum width is ADP. Width for our, this container in the maximum is 168. Ok, so here we can also see the minimum margin for those signs, which is 12, and here as well. And we can see that the top margin for this icon is ADP and the bottom margin from this text is 12. So bottom margin is a little bit higher than the top. So we should always remember that of course, and that's basically it. So, so now we're going to go and design our, our bottom navigation view. But before that, we need to download some icons for this project. So let me just search here. Menu icon. So I need to choose this menu book or K. I'm going to download this image or this icon. And next I'm going to search for star. And I'm going to download this one. So our bottom navigation will have a three destinations. And let me just search for the third one. So I'm going to search for a smile. Okay? I'm going to choose this one. Right? Ok, so I can download the that. Let me just switch back to our Adobe XD here, let's zoom in a little bit. And here let's select the Rectangle tool. Okay, now let's create one rectangle here. Alright, lets us select tool now. So click shortcut v_1 and the size of the height should be 56, as we already saw. So let's move that from the bottom. And we're going to remove the border color. And the actual color of our bottom navigation view will be white. But I'm going to change the background color of our application or our screen here. So let me just move this on the side for a bit now. Okay? And here let's create another rectangle and a switch two layers section. So here let's create that rectangle. Okay? I'm going to remove the border color. And in this background will be below our ActionBar. Okay, so I'm going to type here BG. For the, for the background. So the color of this, of this background will be, let me see. So let's go to assets. Let's choose a black color, but we're going to choose only 10%, or maybe even five. Ok? So let me compare with the white color. Or maybe even 2%. Okay, so now we can place our bottom navigation on top of this background so we can check the layers and see if our bottom navigation here is on the top, okay, it is. And we should add the elevation or the shadow to our element here. And why positions should be a minus three this time because we want to have this shadow on the top. Ok, so the next thing, what I want to do, I'm going to zoom in and I want to import those three icons. So hold the Control Shift plus i and then select all of those and just import those icons. Alright? So their default size is 24. Okay? So as you might already saw in our documentation here, that the minimum width of our one destination is ADP and maximum 168. So remember that. And what I'm going to do now and were to basically create one more rectangle here on the top. So this will be just an example. And I'm going to divide this with, which is 41012. I'm going to divide that in with three with number three because we're going to have a tree top level destinations here. So press enter and it will automatically divide that number with the number three, of course. So that's a handy feature here. And I'm going to copy this one. So I'm going to hold down 4t plus shift and just drag that on the right side here. And why I'm using that. Well, you will see. So first let me just drag this icon here or Kane. And we do change. It's color to color primary. Ok. And I'm going to write a text here. So I'm going to say here recipes. Alright? So the font for this one will be rubato of 12. The text color will be colored primary as well. So if we check our type system here or scale category, we can see that this caption type scale has the size of 12 of regular. So that's the exact timescale which I'm using here. So I'm going to zoom in and metal centre this with our image here. So I'm going to hold down the shift to select both of those. And I'm going to click Control G to group that. So I'm going to go to layer section and rename this group recipes icon now. Okay, so I'm going to move that on the top to have a margin of eight and the bottom margin should be 12. But since I'm using this timescale system which has, which has 12 DP for our 12th SP for the size of this font, then I'm not going to be able to shrink that more. I can move this text to two steps ahead, but then it will not look that good or I can even do that. I don't know. Let me just undo that. So control plus z, and for now it will have a bottom margin of ten and top margin of eight for now. Okay, so next I'm going to add, and I'm going to center this with this rectangle on the top. So as you can see, because I have divided this bottom navigation in three pieces and each one of those pieces here, the width of 137. And now I want to center that our icon with that rectangle. And then I'm going to create another one. So let's put this star here. So this star will have the opacity of 60%. So I'm going to type number six, okay, so we can see that we have changed the opacity. So I'm going to double-click on this one and press control C. Clearly that their press control V to paste in this these texts one more time. So I'm going to move that here now. And just change the text color to color black of course, and the 60% as well. Okay, I'm going to change the name of this to favorites. So let's move that down the center here. And when to move that here, select the whole shift and select this one. Hit Control G to group that into one group. I'm going to rename this group to favorites icon. And I'm going to move that on the top so I can have the top margin eight and the bottom margin ten. So I need to center this with our screen. Okay, that's fine. And next time shell to add the third top destination. So let me just call all ten C if you have the right margins or k. So I need to center this with this rectangle on the top k. Now I'm going to double-click here, hit control c and control v to get another text. Move the attacks on the right side here. Okay, so now I'm going to rename this to joke. So this part will be where user can see some food jokes. You will see calleds central this text here. So this text has a capacity of 60%, and I need to add the capacity of 60% to this icon as well. So now we can remove those two rectangles, hold shift to select multiple items and click delete r, k. So now we can see, so, okay, so it's a group this, this third item or destination as well. So hit Control G. And let's name this group joke, Icahn. Alright. Okay, so now we have created our bottom navigation view, and in the next video we're going to proceed next and create some other elements here. So before that, what we need to do, I want to select all of that. So I'm going to hold down the Shift and the Deselect this big round. And I want to group all those elements into one. So just control g. And I'm going to name this bottom navigation. Okay, click Enter, bow to this assets panel. And I'm going to edit this bottom navigation in these components. Okay, so just like this plus k, And now we have added this bottom navigation. So now we can just drag that bottom navigation and add that on some other, some other screens and so on. Okay, so we can remove that now, of course, we will add this font as well. So just double-click on this font and press this plus icon so we can add this robot or regular of 12 SB in size. So justly this plus icon and there you go. So remember to save your project so you can see this little star appearing here. So just click Control S, and it will save your project. So in the next video we're going to continue and add some more elements to our recipes screen. 13. Cards - Recipes Screen: Hello there and welcome back. So in this video we're going to create a current view. So in the previous video we created another component which is bottom navigation view. And we have added that bottom navigation view inside our assets panel. So before we actually start designing our current view, we are going to visit the official documentation for, for our current view and we're going to read that. So, so here on this website Material dot IO, just note this components and click these cards. Here. We're going to read together the official documentation for current views and we will see which guidelines we should follow when we are designing our, our application. So first, there are two types of cards, elevated and outlined. So here we can check media supporting text and buttons. And we can see some of the examples of how should the card view look like. Of course, this is just one example. We can add the basically any view which we want inside that this card, we can add basically everything we want. So the main difference between the elevated and outlined is that elevated has this elevation applied while this outline just have a stroke. Ok, so that's the main difference. And in our case, we're going to use this, our playing card view. But for example, if you enable option in your UI design or your application to be able to, for example, click and drag this item over other items, then you should add elevation to your card view as well. So let's scroll down below. Okay, so cards are surfaces that display content and action on a single topic, okay, so they should be easy to scan it for relevant and actionable information. Elements like text and images should be placed on them in a way that clearly indicates a hierarchy. So remember that, and they are three main principles. So a guard is identifiable as a single contained unit. I'll card can stand alone without relying on a surrounding elements were contexts and God cannot merge with another card or divide into multiple cards. So we can have only one card for the same context, okay? And down below we have an atom is, so the card container is the only required element in a card. All other elements shown here optional. So here we have a text image, this main image, thumbnail, headline, sub-header media, those action buttons and so on. So everything here inside the card is optional and only required thing is the actual card. So we can basically customize our cards as much as we want. Okay, so here we can see some examples of this card. Card can also help a dividers. So divider is basically one line which is dividing this content. And this is a partial divide or inset divider which is dividing this card not in a full width. So we can see here that we have a little blank space on all sides and here with me and just play this video so you can see. And in this example here, we have a full divider for with divider. And full-width dividers are used mostly to separate the content and expand the some more information. So when it comes to card the transitions cards user container transform transition pattern to reveal additional content. Okay, so, so we can use a car to expand in a reveal some more information. We shouldn't flip over cards to reveal deformation because this animation is anon good for user experience. Now k, So here we can see the elevation of those cards. So for example, the elevated card. He has one DP of elevation by default. And when we try, for example, to drag that card, it increases its elevation until two ADP. So here we can see this bordered card without elevation. And down below, let's check it out to see some more information. So, so swipe gesture can be performed on a single card at a time, anywhere on that card. So it can be used to dismiss the card and change the state of occurrence such as a flagging or archiving it. Ended card should have only one swipe action assigned to it. And here you can see some examples of how we can handle our cards with the animations and that's doable. However, this way, we cannot use the card view to drag that card there below or behind other cards. We should always use the elevation to drag our cards on top of each other now k. So down below we can see some scrolling example. So let me play this video for you. And here you can see how we can scroll this, this card view when we reveal more information. And this is a bad example. So okay, as you can see, we can not read that in the full width and height, and that's a bad thing. So here we have some actions. Some supplemental actions are k, We can have a multiple actions in this action area, and we can also have overflow menus here to display some more information for our cards. Our cards can be used to insert some UI controllers like this, rate content. All right, we can have also those chips, material trips inside our cards, right? So those are some very nice examples here. And you should always organize your card collection so that they are easy to use. And they are layout affects how they are perceived. So to make a collection of cards scannable, you need to place them in a consistent pattern like this one. So this looks very nice and organized as well as this example to play some, to show some a multiple subjects of Dashboard. Okay, and we can scroll down below. So here it says that the cart collection can horizontally scroll within a container. And the container for a collection should not be a card and the entire surface area of the container should not be interactive. So as you can see, this is a bad example, okay, so I think that we can finally access those aspects on the bottom, the section should not be read as a perspective or an exhaustive. Cards have no singular layout, typographic, or image size. All cards should be designed to meet the needs of their content they present. The section shows a variety of card layouts to help showcase that variety. So we don't need to follow those specs exactly. We can of course create our own cards with the, with different values, but those are just an example. So the most important thing here is to remember that we need to be consistent. So for example, are we should add that the same length, four margins on the left, right, or top for example. But for the bottom we can add a little bit smaller margins because. If we have multiple actions here and down below, you can see some more information about that. Here we can also see the margins between the secondary texts and the body texts that title and so on, R k. So that's all good. And now let's go to our design. But first, let me just open this website. So we're going to create a UI designer for application for a food recipes, of course. And here I have found one, a website where I'm going to just choose one post for this recipe. And I'm going to use one of those images, for example, this one to showcase in my application. And of course I'm going to copy this, this title. Okay, Let's now get back to our Adobe XD. And here we're going to create one example of this material design card. But later in this course we might want to change that and we can basically create a multiple cards with a different layouts and experiments. So you should always experiment with those cards and see which one will fit the best to your UI design, of course, so this one will be the first card which we're going to create. And later in this course we might create another one to see which one will fit the best for our design. Okay, so the next thing, I'm going to use the Rectangle Tool. And I'm going to create one rectangle which will start from this guideline, this one. Okay? So what I want to make, I want to make that my card is that my card has 16 dp on both margins. Okay. And on the top as well. So I'm going to move that card on the top until I see number 16, okay? And for the high time going to choose, for example 220. And of course this can be changed later. And I'm going to copy this, this card on the right side so we can actually experiment with that on the right side. So I'm going to hold Shift and Alt to copy that on the right side. Okay, so next I'm going to zoom in. So this one will be an outline the card, so I'm going to set, so I'm going to zoom in and I'm going to add the grey colors to the border. So I'm going to add some light color, okay? For example, like this one. And I'm going to add that color to this color palette. So only in this color palette for now, and the radius for this, for this card will be ten, now k. So you can change that of course if you want. And the next thing, I want to import that image which I have already downloaded for that recipe. So when we choose a shortcut Control Shift plus i, and I'm going to import that image. Okay, so let me zoom out a little bit. And I'm going to place that image inside here. But before that, I want to add some more guidelines to our design here. So now what I want to do, as you might already know, when we talked about the layouts. You saw that every screen should have some number of columns inside. So let me just go to this documentation again. Okay, so here we can see that every screen should have some number of columns. Okay, let me go to this responsive layout. Okay? So here it says that on mobile algebraic point of 360 DP, this layout uses four columns. Okay, so we're going to also add a four column to our, to our screen here. Okay, so now what I'm going to do, I'm going to create one rectangle here. So from this first guideline to this second guideline. So for with between those guidelines. And now I'm going to divide this by two. And I'm going to say a minus eight, okay? Click enter. And now when we tried to copy this, this rectangle, so I'm going to hold Alt and shift and drag that on the right side. And you will see that the margin between those two is now 16. Okay? So that's great. And that's the same margin from this rectangle to this edge of the screen. Okay, so the next thing I'm going to delete this one, and I'm going to divide this by two again, and I'm going to say minus eight again. Okay, so I now got this result, edit R3. So now I'm going to copy this one. So hold down shift and the margin between those should be 1616. And now select those two, hold shift and hold Shift and old, and drag them on the right side. So now we can see that from this rectangle to this one, we have 16. From this one to this one we have 1616 here as well, 16 here as well, and here as well. So basically those will represent our columns. So I'm going to take those guidelines here and place them here. So those will be my guidelines. Alright? K here as well. And here as well. Okay, and that's it. So now we can remove those rectangles. So hold shift and select them all and click delete. Okay, so now we have our four columns layout, okay? And it will be easier for us to design our actual layout here, ok? So our image will be, will not be in a full-width. Instead, it will have the width of, let's see. So let's create one more rectangle. So this rectangle will cover those first two columns. Ok? So our image will have the width of two columns. And on the rest of those two columns, we're going to place the text at the title and some other stuff. So let me just move that image, that rectangle here so it has the width of 182. Okay? So now what I want to do, as you can see, we have already added a stroke to this card and the straw has a one DP in size. And I went to decrease the height of this rectangle two by two. I'm going to decrease that rectangle height by two. Because we need to place that image inside the card view and we actually want to see those that stroke outside. So I'm going to set strokes for this one just on this angle. So type then click tab, tab, tab again, so we can place this corner radius just on those two left corners. Ok. And basically this is how it will look like again, when we zoom in, you will see that when we move that on the top. And here, we can see that even though we can place our image inside the card view, we can actually see the stroke of our current view. So this is the whole point. Okay? And now let me just get this here. And let me show you how you can add an image to this, to this rectangles. So I'm going to select this rectangle and set the opacity to something like a 30. So we can actually see this image. Okay, so hold down the Shift and reduce the size of this image to fit the width of this rectangle. And now move the image summer here, for example, or here or here. Okay? Now select this rectangle on the top. We need to increase back its opacity. Now select those two elements. Right-click and click. Mask would shape it. Now we got the shape of that rectangle with our image. Okay, so now let's place that image on top of that card view. So let's zoom in so we can actually see, oh, okay, I'm going to set one pixel on the right so we can actually see the stroke. And I think we should increase the opacity of this image by one so we can actually cover this whitespace. So double-click here and set the radius to 11 or sorry, nine. So we can set it to nine. Okay, click here. And the now, it looks fine. Ok, so now we can remove this rectangle from here, and we're going to add our cardio here. So now what we need to do, we need to add a title. So for the title, I'm going to select this one. So Instant Pot rice below. Ok, copy that. I'm going to create a text here, so press number t or letter T. And for the, for this font we're going to use our core get fond. Okay, so let's get back to our website and let's see this timescale generator. So here we're going to type core gets as a headlines in subtitles. And for the body, we have selected robot arm. So for that title, I'm going to select the heading five, which has a 25 pixels in size. So we're going to use that same size, so 25 pixels, okay. And here what I'm going to do, I'm going to set the margin to 16 here. So hold old. And you can see that this is a 60. Now, I'm going to move that below so we can have the 16 on the top as well. So I'm going to cut those last two words and create a new line. So just hot often shift and copy this text from here and double-click on that. I'm going to paste that those last two words of this title, okay? And it will look something like that. So let me just see K 16 here and 16 here. And we can set also this a box or a text area. And we can now increase the size of this text area to help the margin of 16 on the right side, okay, in here as well. Alright? So whenever we type something more here, you will see that it will basically go to another two hundred, two hundred line, but I'm going to undo that. Okay? So the next thing we need to write some subtitle here or subtext. So I'm going to choose this website name, the lorem ipsum to write some dummy text. So I'm going to select, for example, something to this. Ok, so our subtitle should have only three lines of text. And if we want to see more texts from this recipe, we need to select our recipe and open up a new window. Okay? So I'm going to choose a text tool and paste that code here. So for the font, I'm going to select the row bottom and the size will be 14. Regular k. It will be separated by this from this title with 16. Okay, so here, what do I want to basically cut this text? So I'm going to select this text and control X to cut it. And when to use a Shift plus all to create another line here, paste and the rest of the text here. And cut again. And create another line. Paste that. And here I'm going to delete rest of the text and I'm going to add a three dots. Okay, so let me just remove this blank space. So let me just align those, right. So I'm going to select all of those three texts by holding down the Shift. And I'm going to set the opacity for this 26 to 60%. Okay, I'm using a shortcut number six hour, right? And of course, those texts can have this text area to 16, like the titles, so I'm going to select that. And the reason why I have added these three lines of text is just to show you that our current view will show only the three lines of our body text. And if we want to see more of those, then we need to. And actually click and add a show on your screen. So after that, as you can see, our title looks very nice and our body as well. So I'm going to add this font as character style are K, and I'm going to add this one as well. Okay? So this is a rubato 14. Ok, so down below at the end, I want to add three more icons. And now let's find those icons. So I'm going to open up this material website for great for getting material icons and when to search for heart first, click that click SVG Dow or this image. Next I want to search time and I can download this icon for example. And the last one will be this leaf image. Okay? All right, so now back in our project, click Control Shift plus I. And let's find those three icons and let's import them. Now, K. So the first icon here will be Heart icon. Second will be this clock, and the third one will be this leaf. Okay? So the heart will represent basically number of likes. So let me just go on Google and type material. Color caliph, palate, ok, so color tool. And here we can choose a color for our tho, those icons, Material color for those icons. So for example, I can choose this color for the heart. So I'm going to copy that control C with the shortcut. And here I'm going to place that color. And I'm going to add that holler hearing this color palette volcano we need for this clock, we need some orange color. Maybe, maybe this one or this one or this. I will, I will choose this one for now. So Control-C to copy, click this control V to paste. Let's add S to color palette. And let's add one more colour for this leaf. Okay, let me find which one should I choose, OK, this one, copy control. See, select this icon here, control V, enter. Let's add this here. All right, okay, so here I'm going to also edit text. So I'm going to use the text tool and right here, for example, number 100. And this one will have the font of robot or 14 hours. Okay? And I'm going to set the color to this, this red, okay? And when to place that here. So, so a hold the Shift key and select this one as well. So we're going to group those two elements in one. So control g. Let's switch back to layer section. Let's name this group, heart icon K. So now here, let's create a new text. Will trill, say just 45, and it is referring to minutes. So we can also add the minutes here if we want that just an example. So centralists within this icon hold shift to select this icon as well. Heat control g. Let's rename this group to clock. Icon and let's create another text here. So this one will say vegan now, okay. And now let's change the color. Oh, okay, let's center that with this icon. Now. Okay, let's hold under shifts like that, control G to group that, change this name to vegan icon. Okay, so the margin between those icons should be 16 as well. So let me just set it to 16, R k with a zoom out. So the top margin for those items, for those icons to those bolded text should be 16 as well. So let's see how will that look? Our k, so we have a consistent margins here. So 16 dp on a top, 16 on the, on the right side. 16 on the left side. Okay, sorry, here we have a 70. So let me move that here and let me increase the size here by one. Okay? Here 16 as well, here 16 as well. Here, 16, here, six down, 18, okay, that's okay. And we can now select this one sheet controlling G. And let's name this card. Press Enter. Let's switch to acids here. We can also add this as a component. Let's add this as a component here. So now we're going to remove this one, and let's add that card here. So it will fit perfectly here. And the margin on the top should be 16. So our K Now it's good. And what we can do now is we can add the repeated read for our, for our card. Okay, so select that. And now we can create a repeat grid of our current view. Okay, so let's scroll down below. And here we can set the margins between those items. And I'm going to set the 16 R k. Let me zoom in like this and said that here. Okay? So here we can see that the, this component is actually on top of our actions, on top of our bottom navigation. So let's go back to our Layers panel and let's set this bottom navigation view on top of this grid. And of course, this action bar should be also on top of that grid. Let's zoom out now and let's see how it looks now. Okay, so now it looks even better. Of course, we can add some more different images and titles here as well. But this is a UI designed dummy text, Lorem Ipsum, of course. But the most important thing is that this design looks very nice. So for example, when you display some recipe here that is not vegan, we can just set different color for this Vg and icon for example, some gray color or so on. That's on you. As you can see. This one looks nice as well, so we can choose a different color or we can use a black color and just set the opacity to, for example, three or 30%. Okay? So now you can also see how it looks like with a different color for this third icon. So that's it. In this video, we have created our current view, which looks very nice and clean. It has consistent margins with 16. And we also have added those guidelines which represents columns inside our layout. So that will be all for this video. 14. Floating Action Button - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed our card, and in this video we will design a floating action button. But before we continue, I want to make a few changes here you will see. So I want to show you how we can have, for example, decrease the margins between the title and the body text. So now I'm going to select this recipe screen art board and hold Alt and shift, and just click and drag this art board on the right side so we can have a copy of this screen. Okay, and now what I'm going to do and when to actually select this card and click Ungroup grid. So now I can select those last three current and I can remove them because I'm going to create a new one. So I can just show you how you can decrease the margins between the title and the body. So you don't have to always use the 16 IDP margins in basically everything in your app. So for example, let me show you, I'm going to select this title, and I moved to move that two pixels on the top, so 14. And here I can also set the 14. So let me just zoom in for this text area or K 14. I'm going to select those three texts Now. I'm going to move them to the top, and this can be even eight, okay? And now I can have a space for one more line of text here. So I'm going to hold Alt and shift to copy this line of text. So now I'm going to slay those three icons and I'm going to hold off to see the margins. So the margin between the icon and text is nine. And here we have an 18. So we can reduce that a little bit. So let me see. We can have this, for example, 14 or K and here 13, okay, so I think we should just add the bottom margin to 14 because we have a bottom margin of 14 here as well. And the top margin from those icons should be 13. Okay, so it's not a problem, you know? And now we can compare those two cards, the new one and the previous one and see which one can look even better. So we can copy this first texts in place, that text here, for example, our K. And now you can compare and see which guard will look better to you. Okay, so I think that my first card is totally fine, so I am going to remove this one, but I just want to tell you that you can modify this guy drew as one, but you need to have somehow consistent with those margins, at least on the top and bottom. Okay, so I'm going to remove this cardboard. And now before we actually start designing our floating action button, it's visit the official documentation. So, so our goal in this material dot AIA website click components from the menu and select this button's floating action button. So first here we can see that there are two types of floating action button, the regular one and the extended one. So regular one we have two options. The fault which has the width and height of 5-6 dp and the Mini which has the width and height of 40 db. Ok. And this default one is used in most cases. And this money is used for some, some kind of sub buttons. So you will see, and this extended button can also have an icon in the text as well. So you cannot use this extended button with only icon. You need to have the text as well. So let's scroll down below and see some more examples. So a floating action button performs the primary or the most common action on the screen. It appears in front of all screen content, typically as a circular shape with an icon and it's in the center. So here we can see that the section button represents the primary action. And we shouldn't use floating action buttons, which when we have, for example, multiple images here where we can click on, okay, so now below we can see that we shouldn't add them multiple floating action buttons on a single screen like that. But you should be cautious when you're using multiple regular sized floating action buttons. So as you can see, this is a Google Maps application. And here we can see that we have those two action buttons. That's totally fine, but still we need to be very cautious when we're designing that to not ruin the user experience. Okay, so down below we can sit down main principles of our floating action buttons. So what an actual button represents the primary action, the screen floating action button performance or constructive actions such as create, share, or explore. And for the initial button should be relevant to the screen on which it appears. So the anatomy of our floating action button is pretty much as simple. So we have that container, circular container and one icon on the centre, r, k. So here we can see this default and many floating action button with its sizes. So 614 case. So this mini floating action button creates a visual contiguity by having a related size, shape, and placement on the folder icons below it. So we cannot use our badges on our floating action button. So you should avoid that. And here, you shouldn't use ambiguous iconography and you shouldn't place the text on a regular and floating action button. That text is used on the extended floating action button instead r k. So let's scroll down below. You can see here some more examples. Ok, so you should not use a floating action buttons on each and every individual component or card which you have on your, on your screen. Okay, so down below we can see that floating action button and promotes an important and constructive actions such as create, favorite share, or a startup process. And the you should avoid using this button for a minor or a destructive actions such as Archive or trash, alerts, errors, limited tasks like cutting text and so on. Okay, so here we can see the icons which we can use for example, and they all look nice on our floating action button. But down below, those somehow destructive icons or overflow icons should not be used on when our button as well. So you don't need to be cautious. So when it comes to motion, floating action button can morph to launch related actions. So when a screen changes its layout, Faber's should disappear and reappear during the transition, for example. So let me just play this video so you can see that our national button is actually morphing When we come from one to another screen. And that's all nice. So this fade animation is quite powerful. So here let me play this video so you can see how the animation works when we swipe from one tab to another. So basically. Floating action button disappears and it appears again when we scroll from one type to another. And the bad example is right here. So let me show you that. So here our floating action button does not disappear. And at the end of this transition animation, we can even see those two buttons from those two tabs. So that's a bad example. We shouldn't only be able to see one primary action button on one screen. So don't use this kind of animation. Ok, so down below, let's see some more examples. So there is a limit on how many those mini floating action buttons we can use with our primary action button. And that number varies from three to six. So no less than three and no more than six. Ok, so down below we can see two bad examples. So you shouldn't use just one item and you shouldn't use more than six items as well. So, so here we can see good examples. So those three contexts are totally fine and they look all nice. And we should also avoid using unclear and the unrelated the actions such as this. So for example, we cannot burn the clipboard image and the context. So this is of course, bad example and of course overflow menu with our ActionBar is, is ruining our user experience as well. Okay, so let me just throw number two, some more examples. Ok, so when it comes to this expandable floating action button, we can see that the anatomy is a little different. So here we have ICANN and the text as well. So here we always use icon with a text, so we don't use only the icon without that text because icon is optional and the text is always required. Ok, so down below we can see some more examples of this. Extended the floating action button with the layout grid. It says that this extended the floating action button container width is defined by the layout grid columns. So we need to increase its size to measure all our grid columns. Okay, and down below we can see the actual positions of our extended floating action buttons. So this button should be located on the bottom right or on the bottom center. And as you can see here, it's a bad example to just add a simple icon without the text label hearing our extended the floating action button. Instead you can just use a regular one. Ok, so here you can see that bad examples. So you should avoid using two lines of text for this floating action button and you shouldn't use a longer text as well. So you need to use just one word and it should be and concise. Ok, so down below we can see some more examples. So this floating action button should be placed on the bottom center or on the bottom right. So when it comes to theme, as we can see here, the background of this floating action button is the secondary color and the text and the icon color is on secondary is using on secondary color. So we can go to this color tool and we can see that our current theme has this primary color and this secondary color. And on this example we can see that we are using the color secondary for our background of our floating action button and our icon is actually colored in white. So here, when we track this accessibility. Tab, we can see down below that for this secondary color, we are able to use the white text and they're using black text on this secondary colour is not eligible. So you should always check your accessibility colors hearing this color tool now, okay. So let's just scroll down below. And we can see, for example, what kind of typefaces and which we can use for our floating action button. It should always contain a capital letters. So that's some kind of standard. Down below we can see some more examples and so on. But I'm going to switch to this specs at the bottom so we can see the actual specs. So we're at the beginning of this documentation, we saw that we have irregular in the mini floating action button. So this irregular floating action buttons, he has a size of 15-16 width and height. And the icon inside shouldn't container with a height of 24. And the margins between the icon and floating action buttons are 16 dB or game. And for this, Mini is a little different. So we have a margin software 8H and the icon is still 24 by the, the size is affording ok, so when it comes to placement, our floating action buttons should be away from the bottom and the right. For example, 16, we can increase that if we want, but this is some commonly used margin size. And here we have some specs for this extended floating action button. So here the height is 48, ICANN is 24 as before, the margins here, 12, here, 12. And from our texts to our end of this button is 20 K. So that's all we need to check for this documentation. So let's go now to our Adobe XD. And here we're going to add our floating action button. So let me just zoom in a little bit. And before we add our floating action button, we need to change the elevation or just Shadow for our bottom navigation. Okay, so I'm going to select this bottom navigation. And here you will see that this is the original component. So now we can change some properties here. So I'm going to double-click on debt to access the shadow. So for the shadow, for the Y position, I'm going to select the a number one and sorry, number one. Ok. And here you will see that the shadow is now a little bit less shown here. And that is because our floating action button should have the highest elevation of all our components here. So I'll floating extra button should have the higher elevation then the bottom navigation view and this action bar. So let's now create our floating action button. So we're going to Ellipse tool. So press E and now hold Alt and shift so we can create a perfect circle. So the size should be 56, okay, so 56 here as well. And the margins on the right is 16 and on the bottom it will be 16 as well. Okay. So for the bottom quarter, we're going to remove that. We don't need N for the color. We're going to select this core secondary. Okay? So for the shadow, we're going to just enable that and we're going to maybe add four of y, okay? And that's it. So next we need to add the icon. So I'm going to search for material icons on Google are k here. Just choose the first link and I'm going to search for 1I console. What is the purpose of our floating action button? So you will see that in the later videos. But our floating action button should filter our recipes by meal type and the buyer diets. So we can basically filter our recipes, for example, deserts or drinks or appetizers, or for example, V Gamma, vegetarian and organic and so on. Okay, so here we are going to search for a restaurant. And we're going to download this icon. So click this SVG and let's download that. So let's go to our Adobe XD. And here use a shortcut Control Shift plus i to import our our restaurant icon case. So here it is. Let's zoom in a little bit and let's move our k. We are going to place this icon on top of our action bar. So the size of our icon is 24, of course, and we're going to add the white color. Are, okay, and there it is. And as you can see, it looks so very nice. So we can apply this secondary color and on secondary color, which is white color actually. And our floating action button has the proper size of 56 dp. And that's it for this video. 15. No Internet Connection Screen - Recipes: Hello there and welcome back. So in the previous video we have a successfully designed our floating action button. And we can also change the elevation for our bottom navigation. So now our floating action button has the highest elevation from those or elements on our screen. Okay, so that all looks fine. And in this video we're going to create another screen which will represent a basically our app when there is no internet connection. So you will see that there is one, a modification which I want to make on this recipe screen before that. So let me just zoom in and I'm going to use a different icon for this third destination for our bottom navigation. And you can see that the first two icons are basically almost fulfilled. And this third icon that does not fit with those 2 first icons, and I want to change that. So I'm going to basically remove that icon and add a new one. So let's go to this material dot IO and slash resources slash icons. And here we're going to search for that specific icons. So I'm going to search for emoji here, and I'm going to scroll down below. Okay, so I'm going to choose this one. Okay, so this one is a field and it will fit perfectly with our first two icons. So just, let's download that. Okay, let's go back to our Adobe XD. And here first, what I'm going to do, I'm going to basically click on this button navigation, right-click and click Edit main component. So I want to edit this main components so we can then reuse this new bottom navigation afterwards. Okay, so click here, and now let's double-click on this one. So this is a group. I'm going to zoom in again. So double-click here and just delete this icon. Okay? All right, so let's switch this layers section so we can see this better. And now we are located in this joke. I can group ok. So now I'm going to hit control shift plus I, so we can import this new icon. So click Import. And this icon will be immediately placed inside this group because we are located in these group. Ok, so let's plays that image right here, our K. And we're going to set its opacity to a 60% like we did with the previous ones. So when I zoom out now we can see that this icon looks even better with our application. Now. Now that we have fixed that, we're going to proceed and create our third screen, which will represent no internet connection screen. Okay, so I'm going to copy this art board, so it will be easier for us this way. So just select this art board, hold down Alt and shift, and just click and drag this on board on the right side. Okay, right here. And here, I'm going to select this repeated grid, and I'm going to delete that because we are not going to need that and we're also not going to need some of those guidelines. So I'm going to just click and drag them on the left side so I can remove them. Okay. I will just leave those. Guidelines on the left and right side, I'll gain. So now we're going to search for an icon which will be shown here when there is no internet connection inside our application. Okay, so let's go back to this website and we're going to search here. Or even better, we can see that icon already here. So we want to choose a summer said icon, like this sad face. And we're going to show that I can with some text inside our new screens. So let's download this icon here. Click OK. Let's get back to Adobe XD here. So click shortcut Control Shift plus I. And let's add this new icon here. Click import our k. So now there it is. I'm going to move that icon here. Okay? And I'm going to increase its size to maybe, let's see. Maybe 90, okay, or maybe less. We can see which size will be the best. Or maybe a little higher than this. Okay, 94 now and then we will see. So I'm going to set the visibility or the opacity for this icon to 38%. Ok, and why I have chosen this numbers? Well, I don't know if you remember, but when we talked about the colors in this text eligibility section, we saw that dark text on white backgrounds applies to the following opacity levels. And here we saw that we have a high emphasis text medium emphasis texts and disabled text. I am using a 38% because I want to show it to the users that internet connection is actually disabled. And that's why I want to set this opacity to 38% because every element with this opacity is not clickable and it is disabled. So that's why I'm setting this percentage level. All right, so down below, I want to create taught texts. So let me just select the Text tool or click number or a character t. And here I'm going to write no internet connection. Okay? And that's fine. Select the tool now. So what size should we choose for this first text? And I have already chosen which one I'm going to choose. So go to this typography section and back to this type scalar graph. So for this first text, I'm going to select this high OR H6, which is medium of 20 size. And for my second the text, I'm going to select this body which has the size of 16 of regular Ok. So now I'm going to set it to 20 K, 20 medium. Ok, so let's switch back to assets here. And we don't have actually this 20 medium or we had actually. So I think yeah, this is 20 medium, but it is a white colored. So we can just change color to black and we can set the percentage level for opacity to 38 as well. Okay, so let's place that on the centre here for now. And let's create new texts. So these texts, we'll say. You're offline. You're offline. Check your connection and exclamation mark. Okay? So this text will have the size of 16. So here we don't have any font which has the size of 16. So we're going to create a new one out K 16 and color black with a capacity of 3838%. Okay? All right, so let's move this text here on the center. Okay? And now I'm going to add this font in our assets here. So just leak this plus button. Now we have our 20 PT or 20 size 16141225. For this forget font, I'm going to hold down shift to select both of those fonts. And I'm going to center them vertically. And here, the margin between those texts and this icon should be ten for now. And now I'm going to hold shift and select this element as well. And I'm going to hit Control G to group them into one group. So here I'm going to just rename this group to no internet connection. And let's see how this looks. Okay, so where should we place them? So we're not going to actually centered this horizontally, but we're going to move that just a little bit on the top. Ok, so the horizontal line of our screen will, will align with the bottom line of our second text. Okay, now when we zoom out, we can see that our second screen looks very nice and this screen will be shown when there is no internet connection inside our application. Okay, so if I zoom in a little bit here, I will see that the second text is actually a medium, so I need to change that to regular. So just on this section here on this acids panel, right-click on this rubato 16 dp and click edit. So here we are going to change medium to regular. And you will see that this change will automatically be applied to this, to this second texts. So click that and as you can see, it is automatically changes. So now just to center that vertically R k, Now it looks fine. Okay, so one more thing which I forgot to do and that is adding this floating action button in our components. So first, we need to group this icon with the background of this floating action button. So let's select those two items by holding Shift and press control G to group that and its switch vector layers section. And let's rename this group to floating action button. Okay, now let's switch back to this assets, okay? And just click this plus icon. Alright. So here as you can see, this floating action button is actually not grouped, so we can just remove that and just add a new one, r k. And let's place that exactly with the margins of 16 and other bottom 16 as well. Alright, so now everything looks fine, and that's it for this video. In the next video, we're going to create one Snack Bar message, which will shown when there is no internet connection and to notify our users that interconnection is broken. So that'll be all for this video. 16. Snackbar - Recipes Screen: Hello there and welcome back. So in the previous video, we have a design, this third screen, which displays a message that there is no internet connection. So this screen is shown only the first time when user runs the app without the internet connection. And when you have an Internet connection, then those recipes will be shown and those recipes will be automatically cached in a local database, for example. And whenever internet broke in the middle of the app, and then those, our recipes will always be shown because they are already cached in a local database. But this message is only shown when there is no recipes in a local database. So the first time when the user runs the app without internet connection, just for the purpose of this course, I'm going to show you now how you can add also a snack bar message here to the screen. So you don't have to use this snake bar, but still I'm going to show you how to use the material design to actually create that same bar. So first, what we're going to do, we're going to navigate to this material IO documentation. So click components here and down below we are going to search for a snack bar. Okay, so just select that and let's read the documentation. So the snack bar provides a brief messages about the application processes at the bottom of the screen, and this is how it looks like. So we have a simple text and here an action button. Okay, all right, so let's scroll down below. So the snack bar in forums, users of the process that the app has performed or it will perform and that they appear a temporarily towards the bottom of the screen. Okay, so they shouldn't interrupt the user experience and that they don't require user input to disappear. So only one snack bar may be displayed airtime, so be sure to remember that. Okay, so there are three main principles of the snack bar. So a snack bar provides updates on an application processes snack bars up here temporarily and disappear on their own without requiring users to be dismissed. Snack bar are placed in the most suitable area of the UI, mostly at the bottom of the screen. But if you have a bottom navigation when the floating action button, then the snack bar should shown above those. Those of you whose, okay, so here we can see when should we use a snack bars. So snag virus are mostly used for low priority messages and they also disappear automatically. And the next we have a banners. So banners are shown on the medium priority actions. So banners remained until dismissed by the user or if the statement that caused the banner is resolved. So this banner can also be used for displaying error about internet connection. And I'm going to also show you how to use InDesign this banner in some of the next videos. And finally, we have a dialogue which is displayed eta highest priority. So a dialogue is actually a blocking application. Search until the user takes an action or exits the dialog if available, of course. So down below we can see this anatomy of our snack bar and it is very simple. So we have this text label, we have a container and action which is optional, so we don't have to use an action button. Alright, so down below we can see some more informations so that text labels should be short and clear. And you can use two lines of text for those navbar messages. But union still to be careful, on the wide UI is like a desktop or a tablet's snack bars should have only one single line of text and not to. And you should never use icons in those snack bars. Instead, you can use other dialogues. So down below, it says that snack bar containers used a solid background color with the shadow to stand out against content. So you should always add the elevation or a shadow to your, to your snack bar. Okay, so you should always extend your snack bar container to accommodate to a longer text labels. So when it comes to transparency of the snack bar, we should be cautious and we can add this transparency, but only if our texts remains clearly illegible, okay? And we should avoid altering the shape of a snack bar. So sname bar always had this rectangular shape with slightly corners and we shouldn't add a snack bars without elevation. So that's a bad practice, are k, Let's see some more examples down below. So the text label shouldn't share the same color as a text button. So our texts should always contain a white color and Action button. Have a color of color, primary light, for example. And you should not use this irregular button style for this action button. And if this text label is too long, then you can add the action button on the third line, so, so it's allowed k down. We can see some more examples. So you don't need to add that this midsection button because a snake bars are going to dismiss by themselves. So this is unnecessary about the behavior of this name bars. So snack bars appear without a warning and the don't require user interaction. So they automatically disappear from the screen after a minimum of four seconds, in the maximum of ten seconds. And when multiple snack bars updates are necessary, they should appear one at a time. Like you can see in this example. And you should avoid us taking snack bars on top of each other. That's bad practice and you shouldn't animate other components along with the snack bar animation such as the floating action button. So the snack bars are mostly placed at the bottom of your UI in front of the application content. And you should avoid the placing snack bar in front of a frequently used a touch, targets or navigation. So if you're using a bottom navigation or bottom bars, you should add snack bars above them. Okay, so this is a bad example. We shouldn't overlap hours named bar with floating action button and navigation components. So you can use snack bars that expand in a full width, but they should not appear in front of navigation or other important UI elements like a floating action buttons are k. So here you can see the example where the snack bar is on top of this action bar, which is, which is allowed the behavior and this snag biter should never pushing this floating action button on the top. So that's around now. Okay, and of course, you shouldn't place snack bar on top of this. Now floating action button or behind it, as you can see, this is a right examples. So above the floating action button and then navigation. And you should never push bottom elements like this navigation and floating action button just to show the snack bar. And down below we can see some more examples of where should we place our, our snack bars so we should never play Snake bar flash to the edge of the layout. So that's bad example and we should never add two of those snack bars on the largest screens. And finally we have a specs. So the height of our snag bar is 48 and that the width can be customizable. So we're going to, for example, add the width of our snag bar to match from our left guideline to the right guidelines. So you'll see the margin from the start of this snack bar to the, our text is 16. And here from our action button to this edge of snack bar is eight. But from the text of this action is actually 16. So that's 16 for both of those actually. Alright, so if you have two lines of labels, then you should add a height of 68. And if you have two lines of labels and one along their action texts, then you can also add this third line as well. And the margins between this text and this label is 18. Now, right? Okay, so let's go to our Adobe XD and let's create one as navbar. So let's zoom in a little bit. Let's choose a rectangle. So our press character are, and we're going to create snackable width, the width from the first guideline to the second guideline, R, k. So and height of this will be 48 because we are going to have all these single line and one action. So okay, let's type this height 48. Press enter. We are not going to have a border. We're going to add the radius to a five maybe. So the color is actually dark, dark grey. So we can set, for example, this color and we can end up color here. We are not going to use opacity on, on this snack bar because that's not very good example. So I'm going to move that down below. And the bottom margin from this navbar to this floating action bars should be actually eight. So I'm going to set it to eight. Okay, That's fine. And here we should write some message, for example, no internet connection. So I'm going to use a text tool here and type no internet connection. Now I'm going to place that on the center here. And the left margin shouldn't be 16, as we already saw. Ok, so the font, I'm going to choose a font of a 140 k. The color should be white. Let me move that here on the center. O, k left margin 16, and that's OK. And the next will be our action button. So our action button can say retry. So let's create one more text with all the capital letters. So retry. So let's center this as well. And the left or the right margin, sorry, the right margin should be 16 and the color. So let's selling the color. If we choose a color primary, then this will not be eligible. So we need to select out a little bit lighter colors. So let's select color primary alight instead. And now it will look even better. So of course, I'm going to choose this font of 16. And the color primary light. Ok? And this first text is having the font of a robot or 14 insides are okay, and that's basically it. Okay. So now we have also added this snack bar. So, so our user can be also notified and be able to retry and tried to establish connection once again. So again, I repeat. This screen will be shown only when user runs the app for the first time without the internet connection. And that way we don't have our local cache of those recipes and we cannot show them. But if a user runs the app with the Internet connection first time, then those recipes will be cached in a local database. And every time we run our app and next time without the Internet connection, then those recipes from the local database will be shown and this message will not be shown. So in the next video, we're going to also create a banner. And that banner will be shown when there are recipes and we lost connection. Okay, so you will see, and for this video, that's it. So the only thing we need to add now is elevation. So let's select our bag along here and let's add the shadow R, k. So now we have added this elevation or a shadow. And the last thing we need to do is just select all those elements here. So I'm holding shift, so select this and this text. So we have selected those three elements. Now, hit Control G to group them and switch back to layers section. And here let's rename this group to snag bar. Press enter, now k. And now let's switch back to acids here. And we're going to add our snag bar to our components section here. So click this plus icon. Okay, and now we can reuse our snail bar everywhere in our design later. Okay, so that's it for this video. The only thing which is left is to save the project. So just hit control S, and that's it. 17. Banner - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed our snag bar component. And in this video I'm going to show you how to design a banner. So before we continue and create banner, I just want to make one small modification. So let's zoom in on this snack bar. So when we select this component, we will see that this is a default state or original component because it has this field icon. So I want to change this font, okay, so double-click on this component and set the font to this Roberto 16 PT. And I want to set the color primary light, of course. And now I want to change this font. So I'm going to edit this font with 16 PET and they want to increase the style from the regular to the medium. Ok, and now you will see that the text is changed and it's a little bit bolder here and here as well. So I'm going to center this ok. And here or k looks very nice. So I think that now it looks even better because the medium style is a little bit bolder and it's perfect now. Okay, so now let's save that. So Control S and let's open up the documentation for our banner. So go to this website Material dot IO, select these components here and here, let's select the banners. Okay, so first we're going to read this documentation, and then we're going to implement this design in our Adobe XD. So a banner displays a prominent message and the related optional actions. So as you can see, this banner appears just below our top AB bar or ActionBar. And let's scroll down below to see. So a banner, this plays an important message and it provides an actions for the user to address or dismissed the banner. It requires a user action to be dismissed. And the bender should be displayed at the top of the screen, below the top bar. So they are persistent, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time. So this is a very important and here is a table of priorities. So for the low priorities, we're always displaying the snack bar. For the medium priorities, we are displaying the banner. And for the highest priorities were the spring and dialogue. So in this case, we're going to focus on banner, of course, and Benares always remain until they are dismissed by the user or if the state and that causes the banner is resolved. So here we can see the main principles of this banners. So a banners are interruptive, but their level of interruption should match the information they contain and the context in which they appear. Banners communicate message and what will happen if a user interacts with them? Banners contain a single message in a specific action a user can take. So down below we can see the anatomy of this banner. So we have a container, of course. We also have this illustration which is optional, so we don't have to add this illustration. Then we have a text and buttons or action buttons. So we can have one or two action buttons down below it. And you just grow to see some more examples. So here you will see that the banner is displayed just below our top bar. And we can see that the elevation or the shadow of our banner is the same as our content. And we can see that this bar is actually on top of that banner, so that's a default state. Okay, so here we can see two banners and we shouldn't add the multiple banners, so single banner at a time. Okay, let's scroll down below as well to see some more examples. Banners contain up to two texts buttons with dismissive action placed on the left and the conforming action on the right. So if you plan to add that the Smiths message, you should add it on the left side and the other action should be placed on the right side. Alright, so let's slow down below. So here we have some cautions which we need to see it. So avoid using a single button is a way to acknowledge banner and dismiss it. So if you're planning to use just a dismiss button, then you should forget about that and you shouldn't add just one button for dismissing the dialogue. So a banners are intended to be a minimally interruptive. And if a button in a banner requires an extra emphasis, then a full width button can be used for that purposes. But still you need to be careful not to ruin the user experience. And the down below we can see some bad examples. So we should not use the links in our banner message. And we shouldn't combine buttons with a different emphasis levels. And we shouldn't stag buttons unless there isn't sufficient room to display them side-by-side. And of course, we not need to add any more icons here on the right side to dismiss this dialogue because we can dismiss the dialogue just with those action buttons and we don't need anything more, I'll case. So let's scroll down below. And here we can see one example of a banner with this illustration icon with a text and with this action button. So this is the similar banner which we're going to design inside our applications. So you will see, and down below it says that we shouldn't use just an icon without the text label. And of course this looks very bad. So it's a pretty logical arcade down, scroll down below to see some of the more examples. Okay, so banners are placed at the top of the screen and below the top air bar. They can be fixed or a scroll with your content depending on the environment. So on mobile they scroll off the screen with the content and the same elevation is app content on the desktop. On the other hand, they remain fixed at the top of your screen. Okay, so let's scroll down below to see some more examples. And here we can see that the surface containing your banner should be clearly distinguished from the top bar surface. So we should always display here and elevation from our top m bar. And of course, those tour shouldn't overlap K. So let's scroll down below. So if you are using this search widget, then the banner should be placed below that. Right here we can see some more examples of banners, right? So here we can see some examples on, on the desktop applications, so we don't need, at the moment, of course, you shouldn't place more than one banner at time. O. Okay, let's draw down below and here we can see a behavior of one regular banners. So, so when we try to scroll the content, as you can see, this banner is disappearing on the top. And here is how it looks like when we tried to disappear or dismiss this banner. Kelly, scroll down below to see some more examples. So this is how our action bar or our top bar can be animated. When we scroll down, or up or down below, we have some different themes which he'll apply this banner. Of course, you can apply many different. Styles of this banner, but based totally on you are. Okay, and let's go to this specks on the bottom. So here we can see that the regular one line banner have the height of 54. Okay? And of course the width is four width of our screen. So the margins left and right are actually 16. So here we says that it says eight, but we actually can have their 16 here until this, the end of this button or the text. So if we have a two lines of text and then we should use this 110 12th height for our banner. And here it is. If we have, for example, two action buttons, so the margin between those two buttons is actually eight. And then down below we can see the actual height of our banner with this illustration. So if we have this illustration, then the height of this banner should be 1200. And here we can see some more aspects. So the top margin from the text and this illustration is actually 24 and the bottom margin is eight. So now let's go to our Adobe XD and let's design one banner. Okay? All right, so here what I'm going to do, I'm going to select this second. There are the board. I'm going to hold all ten shift. And I'm going to move this art board on the right side so I can create a copy of this, of this recipe screen or k. And here we're going to create that Benner. Ok. So I'm going to first select this, this grid component. I'm going to hold shift and move that on the bottom and a little bit. Okay. So the size of our or the height of our banner should be 1200. So I'm going to select the Rectangle. And from the bottom of this action bar, I'm going to start creating this rectangle. So it will have the full width of our application and the height should be 120 or k, or k. So here let's first zoom in. And for the stroke, we can select the same stroke color as we did for our repeat grid down below. So it can stay this way for now. And let's switch this layer section. And as you can see, our action barrier should be on the top so we can actually see the elevation order shadow on top of this banner. Okay, so the next thing I'm going to select and choose one new illustration for our banner. So let me just go to, and I'm going to type material icons and just open this website. I'm going to select the rounded icons and I'm going to search for a WiFi case. So here I'm going to select this illustration or this icon. So let's now or that r k, r k. So here hold control shift plus I, so we can import this resource. Okay, I'm going to select this one. Alright? So the size of this illustration should be 40 in width and height. So if we check this documentation line below, we will see that this illustration or this icon has a 40 in the width and height. So let's zoom in and let's hold down shift and alt to increase its size to 40. Okay, so we can even manually type here 40 by 40. Click Enter R, k. Let's zoom out a little bit. So the left margin from this illustration should be 16, RK and top margin should be 24. So here for the y-coordinate, I went to remove this number. After the dot, because I want to have a round numbers, so 28 here. And I'm going to move that four positions so the top margin should be 24 and left margin 16. Alright, so let's zoom in and zoom out and the color of this icon should be actually color primary. Okay, so I'm going to select that colour. And for the textile its type here, let's choose a Select Tool and let's, okay, so here I'm going to write some text. So we're going to write two lines so that text, so select the Text tool. And here we're going to write something like network problems. Please establish internet connection. So you can download recipes. Ok. All right, so the margin between the illustration and these texts should be 16 as well. Okay, the top margin 24. Alright, that's fine. I've been just zoom out a little bit. Our k, it can be placed right there. So we can also use, for example, this, this area text. And now we can set the width of this text to be on the right side with a margin of 16. Now for example, when we tried to write a shorter text, as you can see, it will not display this connection word here because it doesn't have a, if you don't have space to faith right here. So that's why we need to write two lines. But that's totally fine for now. And below that, we needed to create actually two action buttons. Okay, so now before we create those action buttons, so let me just select this repeated grid. And I'm going to move this repeat grid on the top with a margin of 16 R k. And here I can set this repeatable read height to be somewhere here. Okay, that looks fine now. Right? And here let's create two action buttons. So when we check the specs on our documentation, we can see that the the space here between the Section button is eighth, or the margin here is eight. And here as well we have eight between those two action buttons. But you can see that behind those action buttons, we can see those rectangles. So we're going to create those rectangles here as well. But before that, let's create those texts. So the first texts should say, dismiss. Kay? So the text sizes or should be 16 medium. Okay, and we're going to just change the color here. So I'm going to change the color to maybe color primary. Ok. All right, so let's move this here on the right side. And I'm going to copy this text by holding open shift and just drag that here. The second texts will say turn on Wi-Fi. And that's our second button. So I'm going to create a rectangle which will be basically represented as a background for those buttons. So let me just create this test or K. Now I'm going to place this on top of this rectangle. But first we need to go to Layers panel here and move this text on the top of this rectangle. So we can actually place that on the top. What we want to do now, we want to set all margins for those rectangle and this text to eight. So let me move this on the left side until we see the number eight, okay? And here we're going to decrease the width. Our case, we have eight the margins on each and every side. So I'm going to now remove the border and fill color as well. And now we can just select both of those elements in group them into one. So control G. And we're going to name this, this and this miss button. Okay, and let's create another rectangle here. For our second button or cave. Here is again a plays this layer on the top of this rectangle, R k. So the left modern shouldn't be eight and write eight as well. So just one more r. Ok, let's zoom in and hold Alt. So you can see that we have eight margins on each and every side. Now let's select this background rectangle and deselect the fill and stroke color. So now select both of those elements, hit Control G. And let's rename this to turn on Wi-Fi in Patton. Okay, let's zoom out a little bit and now let's place those two buttons on our banner here. Okay, so let me first play this turn on Wi-Fi here. So here we said that we need to have eight DP margin on the right side. And as you can see, the actual margin from our real text here is actually 16. Okay? So this background is covering those eight points, K. And down below we can have a, for example, eight as well. And on top we can have, for example 90. We should have this 20 bucks, but we have 19, so that's totally okay. And our second button should be eight DP away from our first button are Calit2 zoom out now. And as you can see, now, our banner looks very nice. So here as you can see, our buttons contains a font of rubato 16 medium, and this button as well. And our first texts contain the rubato 14. So let's switch to this assets. And we have chosen is 14. So if we click this 14 here, we will see that our text here is overlapping. So if you see that, then you need to set this line spacing to 0. And when you press that, as you can see, the text will change. So we had a problem with our fonts and we need to edit those fonts. So just click, right click and edit. And for the spacing just type 0 and it will be automatically set to their default line spacing. So that's fine. And for each and every font here, just set the spacing to 0 for now, okay, at it will set the spacing to the 19, which is the form for this font. And for this one, let's edit that as well. So set to 0, it will set to 14. And here as well, line spacing for 0, and here as well. Now k. So whenever you try to type a taste and you'll see that those two lines of text are overlapping. That means that we need to change those line spacing to 0. And now it should work fine. So when we select this text and apply this 14 dp, now our texts will not overlap and it looks very nice. So let's now select all of those elements. So this text, so hold down the Shift, select this one, the background, the button, the second button, and hit Control G. So now switch back to Layers panel here. Let's rename this to Banner or k at switch two assets here, and let's click this plus icon. So there is, as you can see, our banner does not have the elevation, so it has the same elevation as our content and our content just have the stroke. So we can even remove the strobe. But I think that the stroke actually looks very nice soon our application, and that's totally fine. Okay, so all of that looks very nice and we should add another screen, but this time without this action bar. So for example, when a user tries to swipe down this list of recipes than the animation and could make our ActionBar disappear. So let's create another screen for that. And I'm going to select this borehole down, all things shift and just drag this odd ball on the right side. Okay? So now I'm going to remove this ActionBar components. So just select that and click delete. And I'm just going to create a status bar here. So without the action bar, so select the Rectangle tool and just create one status bar here with the size of, with a height of 24. Okay? Now remove border and add the color, primary dark color. Ok. So here in our components, we don't have a status bar component, we only have ActionBar with this status bar. So we can even make component out of this. So let's get back to this layer resection. Let's rename this rectangle tool. Status bar. Click Enter. Let's get back to these assets panel and let's add our component here. So we now have even this status bar. Okay, and now what we can do, we can move this banner above, so just hold down the shift. So we can move that strike on the top K. So here. And now we can zoom out and we can place this repeat Greenland on top with the margin of 16 k. Let's increase it's hide back to this bottom bar, k, And there it is. So this is how our app should look like. For example, when we don't have this ActionBar and when we try to swipe down, our action bar will disappear slowly. So that will be all for this video. Now you saw how we can create different kinds of banners. And in the next video, we're going to start designing bottom sheet. 18. Bottom Sheet - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed our banner and it looks very nice. So in this video we're going to start designing our bottom sheet. So bottom sheet will be designed as a response for our action button, floating action button. So whenever we, for example, click on our floating action button, then we want to show a bottom sheet here. And then we can choose some options for our recipes. For example, which type of meal we want to show here for the recipes, what diet, for example, Vg, vegetarian, ghetto Yannick recipes and so on. So before we go to this material documentation and started reading about these bottom sheet, I need to make one change here. So in our screen here, recipe, screen number two, and we need to change those layers orders. So here as you can see, our banner is actually on the top of the layers and we need to put our action button at the top so we can actually see this elevation or a shadow on top of this banner. Okay? And now our application will look a lot better. Alright, so just save that control s. And now let's go to this website, material IO and that we can track the documentation for bottom sheets. So click components here from the menu and down below it scroll until we see sheets bottom. So select it, OK. And let's start reading. So Bottom Sheets are surfaces that containing supplementary content that are anchored to the bottom of the screen. So we have three types of bottom sheets, and the bottom sheets are mostly used on mobile. There are three types of different sheets, so we have a standard bottom sheets that display content that complements the screens primary content. They remain visible while User interacts with the primary content. Then we have a model bottom sheets, which are an alternative to the inline menus or a simple dialogues on the mobile and the provide room for additional items, longer descriptions and iconography. So they must be dismissed in order to interact with the underlying content. And that this is the type of bottom sheet which we are going to use in our app design. And finally, we have expanding Bottom Sheets, which provides a small collapsed surface that can be expanded by the user to access a key feature or task they offer. The persistent texts is sort of a standard sheet with space and the focus of a model sheet. So down below we can see some examples of standard bottom sheet. As you can see, it can look something like that. So basically we can drag this standard bottom sheet with a swipe gestures. And so we can see some more details from the bottom here. Model Bottom Sheets is something different because here we can see the actual. So here we can see this black overlay which basically hides this content in the background. And the main focus. We can see our bottom sheet and at the end we have expanding bottom sheet as well. So this is how it can look like so that expanding bottom sheet is currently located at the bottom right corner here. And we can expand that furthermore. Ok. So there are three main principles of this bottom sheets. So a bottom sheets containing content that supplements the screens primary UI region. Bottom Sheets can display a wide variety of content and layouts. The bottom sheets are easy to reach on mobile devices. So on a desktop applications, for example, we do not have those Bottom Sheets. Instead we use sidebars or a side sheets. So down below is check the anatomy of simple bottom sheets. So here we have a sheet and we share the contents in the screen. So the screen is actually this black overlay, which is covering our primary UI content are calleds scroll down below to see some more examples. So Bottom Sheets are anchored to the bottom edge of the screen and appear in front of the other UI elements. Okay, and here as you can see, our bottom sheet is constraint to the bottom and we cannot move that or drag that lake. We have on this other example. So this other example is a bad so we should not use those elevated bottom sheets. So that's another thing. And then down below we can see how this bottom sheet looks like on a larger resolutions on the desktop, for example. And this way we can see that our bottom sheet does not cover the full width of the screen, and that's totally fine. Now, KL is scroll down below so you can see some more examples. And here you can see some basic examples of the actions which you can put inside those bottom sheets or some other menu icons, for example, other applications which we can open them. And down below we can see some examples of Google Maps, for example. And they are using a bottom sheets as well or the music player like this one. So this MusicPlayer has been made fully visible to reveal a track list and bending the player. So here we can see this bottom machine layout and the primary UI content as well. So we can interact with both of those almost at the same time. Now. Okay, let's scroll down below. So I'm going to show you now two video examples. So when four screen bottom sheets can be eternally scroll to reveal additional content in the tool bar should be used to provide collapsed or a close affordance to exit this view. So let me play this video so you can check it out. So as you can see, when we tried to drag that bottom shrink on the fourth screen, then this toolbar appears. And from that tool bar we see that arrow which can, which can help us actually hide this, shrink this bottom sheet in the original position. So a standard Bottom Sheets co-exist with screens main UI region in allow for a simultaneously viewing in interacting with both regions. There are commonly used to keep a feature or a secondary content visible on the screen when the conduct in the menu i region is frequently scroll or pent. So we can keep those. Bottom Sheets appearing here on the screen with our primary UI content. So that's not an issue. Okay, let's scroll down below to see some behavior section. So here as you can see this music player on the bottom, it is a standard bottom sheet and it remains on the screen is the user browses the, those available music. Kayla's scroll down below. So when it comes to placements on the mobile devices, we usually place those bottom sheets on the bottom, of course. But if you use a larger screens, for example, desktop or some larger tablets, then you can also place those bottom sheets on the, on the right side, as you can see here. So it looks even better on the right side then it will look on the bottom, like on the mobile devices. So Bottom Sheets are mostly was on the bottom on mobile devices. So now we have switched to modal bottom sheets. So this is the style of bottom sheet which we are going to use in our application and model Bottom Sheets present a set of choices while blocking interaction with the rest of the screen. So they are any alternative to inline menus in simple dialogues on mobile, providing additional room for content, iconography, and actions. So here, the main difference between the model bottom sheet and the others is that here we can see this black overlay, which is covering our main UI content. Okay, so let's crawl down below and model bottom sheets have a default elevation of 16 dp. So that's the highest elevation or folder contents on the screen. And it allows our bottom sheet to appear over a most UI elements on the screen. And let's scroll down below. So this is the bad example. So whenever we call our bottom Model bottom sheet, then we should always use this black scream. And having invisible scream is a bad example because it can mislead the users about their ability to interact with the rest of the screen. Okay, so when it comes to visibility, to provide initial axis to its top actions, the initial vertical position of a model bottom sheet is capped at 50% of the screen height. So a model Bottom Sheets whose contents exceed 50% of the screen height can then be pulled across the full screen, scrolling internally to access their remaining items. So what does it mean actually? So for example, if we have a layout which has the big height, like this second example, we shouldn't make our bottom Model bottom sheet appear in the forehead size immediately. So their initial height should not be exceeding 50% of the full screen height. And only after we, for example, drag that it the second time then it can access its four height like this. Ok. So you do need to keep that in mind. Careless scroll down below to see some more examples. So modal Bottom Sheets appear when triggered by user action, such as a tapping a baton or an overflow icon. And that they can't be dismissed by a tapping a menu item or action within the bottom sheet, like some button or the menu. We can also dismiss our bottom sheet by tapping the screen or this black cover. And we can also dismiss it. The buyer swiping their she'd down or using your close affordance within the bottom sheet, stop Ambar if available, for example, like this one. So if our bottom Model, bottom sheets layout height is covering our four screen height. And then we should also add that this clause icon so we can actually allow the user to close that immediately. Okay, so when it comes to placement, if we are using this model bottom sheet, for example, on some bigger resolutions on desktop publications, then we should always display this manual, bottom manual like this, overflow menu. Okay, let's scroll down below. Okay, so now we have our third type of bottom sheet and expanding bottom sheet. So expanding bottom sheet is a surface anchored to the bottom of the screen that users can expand to access a feature or a task. It can be used to persistently display across app feature like a shopping cart, collecting N, acting on a user selection, supporting tasks, and for example, in direct navigation between items such as videos in a playlist. So let's check those examples here. As you can see here, our, so our expandable bottom sheet here is expanding from the bottom right corner. And this is an example of regular mobile devices. So that's all good. So let's try this other example. And here we also have some different examples with this image gallery application, and it all looks very nice and clean. Okay, let's scroll down below. So expanding Bottom Sheets and floating action buttons shouldn't be used for the same purposes. So floating action buttons are used for actions only and they don't respond to user's interactions with the rest of the screen. They can transform into larger surfaces to allow a user to complete an action. And expanding Bottom Sheets transforming to a larger surfaces and can update their content to reflect the user interactions. So we don't use the floating action button in a place of an expanding bottom sheet. Floating action buttons are meant for actions only R, k. So down below, let's check the anatomy of this expanding bottom sheets. So expanding Bottom Sheets are always anchored the bottom corner of the screen and they have two states. Small collapsed state in the larger expanded state. And here we can take the anatomy. So the collapsed state that contains the container icon end the optional label. Okay, so we don't have to do with the label. We can also use just an icon in this container. And expandable state has the header, close Action, Label and the content. So here we also have the header in which we can press this arrow and move back this expanding bottom sheet on the original position. Ok, so let's scroll down below. So when it collapsed and expanding bottom sheet is intended to be small, n informative. It can use a shape and color to express that. It is interactive. So an icon is required the minimum and the to avoid blocking content, the width shouldn't exceed a half of the screen width. Ok? So you should always be careful when, when choosing the name or the title and the icon for this, for this expanding bottom sheet. And you shouldn't use two lines of text and so on. The most proper way to design this collapsed expanding what machine is to actually just add one word of text are case. So let's scroll down below to see some more examples. And here we can see how our expanding Bottom Sheets looks on a bigger resolutions, on a bigger tablets, for example. So here we don't even need to expand this expanding bottom sheet to the fourth screen size. Instead, we can just expand that in this corner, okay, and it will be visible as well. So here we can see some good and bad examples as well. No care. Let's scroll down below to see some more examples. And here we can see some good and bad examples. So we shouldn't place this expandable bottom shooting a collapsed state where it will be overlapping with the main components or the main UI components like the title and some other important stuff. Instead, we should place that, for example, in this case on the right side so we don't overlap with a, with a title, with the main title of this green. Okay, so here we have the Recommendation table. How we should pair our, our expanding bottom sheet with the rest of the components of our material design when it comes to bottom navigation. So we should be very careful and we should hide the bottom navigation on scroll and when sheet expands. So bottom sheets should never be used with a bottom bar because a bottom-up bar with abstract, a collapse sheet. So with the floating action buttons either. So we don't use the floating action button with our expanding Bottom Sheets. It might confuse the users, but we can use extended floating action button. But you need to be very cautious. And extending floating action button can be used if a central line, so it doesn't overlap with a collapsed sheet. So this is one way around, but still you need to be very careful when implementing that. And of course, expanding bottom sheet can be used easily with onscreen keyboard and snack bar as well. Okay, let's scroll down below. So here we can see this expendable or extended floating action button and our expanding bottom machine. So they can work together but they shouldn't overlap. Okay? And if you're not able to provide that function, then you shouldn't use those two components together now, okay, so let's scroll down below so we can see some more examples here. So on bigger screens, for example, desktop screens or a bigger tablets, we should place this expanding bottom sheet on the right side. Now, okay, and down below we can see some more themes which are using those bottom sheets as well. And finally, I'm going to go to the spec so we can check the official specs were a bottom sheets. Okay. Okay, so here we see that the maximum height of this default state of bottom sheet is actually of the 50% of our screen height here. If we are adding those items, we can see this height. So 56. And down below we can see some smaller examples. So the margins, of course, 16, K and R below, we can see the minimum height of 60 DP for a standard bottom sheet for a mobile. So this is the minimum height for our bottom sheet, of course. Okay, so now let's switch to our adult vaccine design. So we're not going to implement this bottom sheet yet because our bottom sheet will actually contain some chips button in because we haven't covered that chips and the a button material components, then we are going to implement that in some of the next videos when we actually cover those topics. But for now, we can, for example, add some examples so I can show you, uh, so let's select Rectangle Tool, and I'm going to create one rectangle, for example, like this one. So we saw that the maximum height of our bottom sheet in its default state is 50% of our screens height. So we can, for example, divide this number with the number two and we're going to get that number. Ok. So now we can hold the open shift and copy this rectangle on the bottom as well. So this one will be, will represent basically our bottom sheet and we can remove the boiler. And this one will represent our scream or our black overlay so we can remove the border. And here we can edit the black color and the opacity should be 60%, for example, or even 50%. Okay, so let's set it to 50%. And we're going to use those, those two rectangles to actually represent our bottom sheet in some of the next videos. So we went to copy this screen on the right side so we can actually create a new one and present our bottom sheets. So hold Alton, shift, and Rosa, drag that on the right side. K and r, we can remove those two rectangles from the previous screen. So select them by holding Shift and click delete. And in the next video we're going to cover material design and four chips. And later we went to design them here inside our bottom sheet with the button as well. 19. Chips - Recipes Screen: Hello there and welcome back. So in the previous video, we have went through documentation for a Bottom Sheets, and we have just created those two rectangles here. So basically this white rectangle, we'll represent our bottom sheet. And this is basically just black overlay. So we didn't add anything yet here. And that's because we need to go through material documentation about the chips. And when we go through the documentation in this video, then we're going to start and adding some UI elements here. So let's open up our Material dot IO documentation. And here let's select their components from the menu. And we need to search for chips, okay, here it is. Just click that. And let's read this documentation thoroughly. So Chips are contact elements that represent an input, attribute or action. So chips allow users to enter information, make selections, filter content, or trigger an action while our buttons are expected to appear a consistently and with familiar or call to action. Trips, however, should appear dynamically as a group of her multiple interactive elements. So there are three main principles for our chips. Chips are compact components. Chips should have a clear end, helpful relationship to the content or task they represent. And the chips should make the task easier to complete or content easier to sort our care. So let's scroll down below. So there are four different types of chips. So we have input chips, choice chips, filter ships, and action trips. So input trips to represent information used in fields such as an entity or different attributes. And they look something like that. So here we have a just image and then the text label and this exit or closer icon, R, k. So down below we have a choice chips and sets that contain at least two options. Choice trips represents a single selection. So most of the time a choice chips are used for the trip group where we only need to select one of those trips are K. And down below we have a filter trips. So filter trips or present a filter for our collection. And here we can select multiple elements. And here we can also see that this check mark icon appears that whenever we check one of those filter trips. And finally we have an action trip. So action trips trigger actions related to a primary content, and they look something like that. So we can have an icon here and a text label, r, k. So let's scroll down below. And here we have anatomy. So the regular trip, whatever container in the text as they are required, the elements and the thumbnail and remove icon are optional. Okay? Alright, so first let's start with an input chips. So input chips represent a complex piece of information in a compact form such as an entity or a text. They enable user input and verify that input by converting text into chips. So basically, you already saw those attributes, for example, in a Gmail application when you try to add some a person as a recipient for an email and input trips can also provide some suggests that the responses are case. So down below we can see that Input trips can be a transformative. So basically we can transform a simple text to those trips. So as you can see in this example, we have basically transform this simple texts to, to this trip with the Icon. All right, so let's scroll down below to see some more information. So input chips can also represent an arrow State as well. And we can also add multiple trips in one the input field for example. And also we can move those trips around. So as you can see, when we tap and select one of those, the elevation appears so we can move them on a topo and some other element, R k. So down below we can see that chips are also an expandable. Okay, let's scroll down below, okay, so trips can be integrated with the other components and they can appear, for example, in-line with a text input cursor in a field, in stack list, or in a horizontally scrollable list as well. So input trips can wrap to a new row if all of the trips needed to be visible. And otherwise, you can just put them inside the one horizontal line and you can just scroll them horizontally, of course. Okay. So those are some of the states of our trips. So we have some enable disabled, hover focused, selected, pressed and dragged. And here we can see the first are the states without the border. And down below we can see the border around those, those trips as well. Ok, next, we have a choice chips. So choice trip allows selection of a single trip from a set of options. Choice chips are a good alternative to toggle buttons are radio buttons and a single select menus. So here we can also see that from this trip group we can select only one element. So they can be outlined with this stroke or they can have a fill color as well. Okay, so let's scroll down below and here let me play this video so you can see some examples of choice chips. So as you can see here, we are only going to be able to select one of those chips, and that's their main purpose. And in our design we're actually going to use a filter chips. So you're going to see them in just a moment. So a chocolate chips appear as a part of a series of other choice chips, and they are typically displayed horizontally, n sequentially. And as you can see, most of the time we will display those choice ships inside one row. And here as you can see, we have a caution. So Troy chips can wrap to a neuro. However, using two or more rows of choice chips, Can you make each chip are harder to scan and that the recommended design for this chocolate chips is just one line, a one row of chips or K down below, we can see that we shouldn't add just one chip, and that's a bad example. And of course here we can see some of the states in which this choice chips go through. Okay, let's go down below. And here we can finally see our filter ships. So this is the type of chips we're going to add inside our application. And filter chips are used the end filter trips use tanks or descriptive words to filter the content. Filter trips are a good alternative to toggle buttons or check boxes. So this is the difference between a choice trips and filter strips. So for the filter trips, we can select multiple trips so without a problem. And also we have this check mark icon appearing when this strip is selected, r k. So let's scroll down below to see some more examples. Ok, so our filter chips can also be placed underneath a search field as well. So like in this example here, and we can also display those filter chips inside their side sheet on the right side, like here in this example. So I'll filter trips can wrap to a new row. If there are more than two rows, consider using horizontal scroll to access them all. So having more than two rows is kinda bad example. So you want to have a one or maximum two rows for a filter or chips. And then you can also use a horizontal scroll, scroll unlimited number of chips, like in this example here. So I'll filter trips should not present only single option like in this example are okay and those are some of the states which filter chips and go through. And finally, we have our action chips. So action trips offer actions related to a primary content. They should appear dynamically in their contextually in a UI. And alternative to action chips are actually buttons which should appear persistently and consistently. And those are some of the examples which you can see here. So they have an icon and a text label as well. Okay, so let's scroll down below. So action trips can actually trigger an action or a shore progress and confirmation. So as you can see, those are two good examples with a progress bar and with opening. Actions such as bottom sheet are careless, scroll down below. And of course, action chips can be horizontally scrollable, so that's good. As any other example or K. So those are some of the states. And down below we can check some of the themes which are using those chips. So as you can see, they are very nice-looking and clean. So you can take some of those examples and apply them into your design as well. So here we can see, for example, in this one that this application design, for example, is using a different shape of those trips so they don't have a father radio, so in corners and it looks very nice as well are. Okay. And now let's get back to the specs. So let's check that out. Here we can see some specs for action trips, for outline action chips for choice chips, filter chips and so on. So for example, in action trips, the margins between the left and right are 12 and the overall height of this strip is actually 32. Okay? And if we have an icon here of 24, for example, then we should add the margin of eight between this icon in the text and the margin of four between icon in the start of this trip. And on the right side we have the margin of 12, of course. So the height of our trip is fixed of 32. And here as well we have a margin of 12. And here as well, okay, that all looks nice. And here, if you have a multiple chips, you need to use eight DP of margin between them. In here we can also see some input trips, specs. So here, for example, we have a margin of eight on the right and left side from this clause icon. Okay, and that's basically it. So let's get back to our Adobe is d And let's create some of those trips. Okay, so first what I'm going to do, I'm going to Copy this white rectangle which represents the bottom sheet. So OT and a whole lot and shift and just drag that on the right side. So it will be easier for us to design here. So whenever we click on our floating action button, this bottom sheet will appear. And here we want to give the user an option to select different kinds of filters for different kinds of recipes. For example, based on Jameel type or a diet type. So we can display, for example, deserts, appetizers, main course, some of the drinks and so on. So also here we want to have a chips which will represent the diet types so we can filter our recipes for vegans, vegetarians, and other different data types. So you will see, and first what we are going to do, we're going to create a text. So let's select this text tool and press character t. And here we're going to write meal type. Okay? And the font size of this should be 16 or maybe even 20. And we can just change the color to black. Okay, so let's place that on the left side. So the left margin should be 16, okay? And a top margin shouldn't be 24. Alright? Okay, so below that we are going to create our first chips. So let's use a rectangle tool. The shortcut is, are of course. Okay, just let's create one. So the height should be 32, as we already saw in the specs. And the radius should be a full radius. So let's just add that here, okay? And there we are not going to use border, but we're going to select, for example, a color primary. So for example, this will be our selected chip, and it will have the color of color primary. But we're going to set the opacity to maybe 10% or maybe 15% are K. And the margin between the, this chip and mealtimes should be, for example, eight. Okay? And on top of the chip we are going to place that text. So let's use a text tool and let's write here, for example, our main course or main meal, whatever you want. So I'm going to place that right here and the left margin should be 12. And right margin 12, I again, but first, because this is actually a selected trip, we need to add this checkmark icon. So let's go to Google and let's type material icons. Okay, and once you have that site, I'm going to select this rounded theme. And I'm going to search for a checkmark icon, r, k, and when to select this one and download it. All right, let's get back to our Adobe XD and now I'm going to import that file. So hold control shift plus I. And let's select this icon. Click import our OK. All right, so the left margin of this icon should be four, and this in the size of our icon is actually 24. So the left should be four and the right, I think should be eight K. So we can check that out again to see if the margin between the icon is actually eight. So let's check that out. And here we can see that the actual images has a size of 2014, width and height. And the margin between the text and icon is actually eight, okay? And of course the right margin is 12 again. So let's increase the width of this trip, r k 42 more. So we held a 12th here, eight here, four here, and that's all fine. So the actual font of this, of this chip should be 14. So select that. And for the color of this text in the icon, we can just select both of them by holding Shift. And we can send the core primary. Okay, so let's zoom out a little bit. And there it is. So this is our first selected version of chip. And now we're going to create another trip and the multiple chips exactly, but with different color of course. So I'm going to hold control and all ten just to copy and paste that on the right side. So the margin between those trips should be eight. Okay? And I'm going to say, for example here a snack, for example, RK. I'm going to place that right here. So the margin on the left and the right should be 12 k l here, let's decrease the width. Kill it's increased by one. Alright, fonts should be 14 and the color should be black, of course. But I'm going to set the medium emphasis. So that means that I'm going to set the opacity of this black color to 60%. And the background color should be black. But with the opacity of maybe, I don't know, 15 or even ten. So we can check that out to see which one will look at the best. But for now, for example, we can select 10% or even a 5%. Okay, so that looks even better now. And we want to create multiple, multiple trips here. So I'm going to, I'm going to select this text and this background. I'm going to hit Control G to group that into one group. And I'm going to now copy that group on the left side by holding Shift and Alt. So click and drag that here. So margin between the trips eight, okay? Okay, and here I can set for example, desert or desert. Okay. Here, okay, 12th on the left-hand side and the right side as well. So let's copy this one more time. Hold. All can shift Al-Qaeda margin between that should be eight. And here let's type something like appetizer. Ok. Select this background and increase its size. So we can have a margin of 12. So to see margins just hold old. That's the shortcut of k. And for example, we can add one more row of those, of those chips. So we can just select all of them. Click and hold the author and shift and just copy all of those on the bottom. So the spacing between those can't be eight or 12. I will set the 12th because I think it will be even better. So let me move them on the left side here. So for example, I don't know, you can hear type per something else. For example, like drink alcohol, it's decreased net a little bit. So we can have a margin of 12 here. We can have a salad R. Okay? So let me move that on the left side, so we can have eight kN here. Let me move that as well. And here I can say, for example, finger food. Okay, let me increase the width here. Our K 1113, let me zoom in. Just one, okay, 1212 margin. All right, so here as you can see, we have created our meal type chips and the next time window, select everything from here. I'm going to hold shift to deselect the background. And I'm going to now hold Alt and shift to copy all of that on the bottom as well. So this will be another category. And the space or the margin between those two categories should be 24. For example, in here I'm going to say diets piped instead of a meal type. So here let's select all of those three elements from here, and let's group them. So now I can move that, for example, on the middle or somewhere else. And here I can move those on the left side now. Okay. All right, so here for the diet, I'm going to say here vegan KL is increased by one r k. Let's move that. So we can have eight. Let's move those two here. Here we can say, for example, vegetarian. All right, so let's increase the size or the width. Okay, here as well, it's more than that on the left. Let's say a cat organic. Let's increase the width to 120 k. And here for example, let me see now, okay, and here I can say, for example, binary free. And let me just decrease the width here to 12. You just buy one. All right. And then down below I can say something like and gotten three. Let me move those to here. Let's increase the width here. Let's move that on the left side, a DP. Between those two. Here I can say R value. Okay? And here I can say lacto, the J, Darien. Okay? Alright, so there you go. Now that looks even better. And of course, as you can see here, the margin between those trips and this bottom sheet on the left is 16. So you can see 16 everywhere. And here we also have even greater margin than 16. But the main thing is here not to cross that margin below 16 on the left and right as well. Okay? And we can even decrease the opacity of those two texts here, for example, to set the medium emphasis and we can set the opacity to 60, for example. But of course that's on you. I'm going to set those opacity to 100%. And below those two categories of trips, we're going to add one button. But since we haven't go through documentation about the Material Design buttons. And then we're going to do that in the next video. And the next video we're going to implement here a button as well. And with that video, we will actually finished creating our bottom sheet. So also you can create a different styles of those, of those chips. For example, let me just select everything and hold bought and shift and just copy this on the right side. For example, here you can have a different kind of style. For example, just our client. And we can set this to black color with the opacity of 20 or 15 or anything we want. So that's another way of stylizing those snag Ibarra. So that's totally on you. But I'm going to delete that and I like this first and designer even better. So that will be all for this video. Remember to save the project Control S. And in the next video we're going to go through a material documentation about material buttons. And then finally we're going to finish this bottom sheet. 20. Button - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed that two categories of chips. So as you can see, this is how our bottom sheet will look like. There is only one more element which we need to add, and that is a button. So before we actually continue finishing this bottom shaped, let's go to material IO documentation, and here go to this Components section. And let's click on this button on the side. Okay, so let's go through this documentation for material design buttons. Buttons allow users to take actions and make choices with a single tap. So here we can see that different types of buttons. So this is a contained button which has a background color and a text. And we have outlined. So outline has this stroke and a text as well. And the text button does not have any stroke, it has only the text. And when we focus on that, we can see the background, but it, the fourth state, the background is invisible. Okay? So here for our buttons, we can also add icon. So this is how our buttons look like with the Icon. All right, so let's scroll down below. So buttons communicate actions that users can take. They are typically placed throughout your UI in places like Dylos, modal windows, forms, cards and Toolbars are k. So here we have the main principles. So buttons should indicate that they can trigger an action. Button should be easy to find among other elements including other buttons. And a button action and state should be clear. So here we have a text button, outline button, contained button, and the toggle button. Ok. So the total buttons group is a set of actions using the layout and spacing. They are used less often than the other buttons and they look something like this. Ok, so we have here buttons for alignment. Alright, so now let's check the anatomy of our buttons. So for the text button, we have a text label and the icon. The icon is optional. For the outline button, we have a text label, container and icon. And here icon is optional as well. Down below we have contained button, it has a text label container and icon. Icon is as well optional. And for the total buttons, we have text label and icon, which is optional. Okay? All right, so let's scroll down below. So the text buttons, okay, so the text buttons n contain buttons, use a text labels which describe the action that will occur if a user taps the button and if a text label is not used, an icon should be present to signify what the button does. So by default, material uses a capitalized button text labels. This is to distinguish the text label from surrounding text. The if a text button does not use capitalization for a button text, then find another characteristic to distinguish it, such as color, size, or placement. So here we can see one good and one bad example of a material component button. So we shouldn't use two lines of text for the single button. And we should use capitalization in the most cases are calleds scroll down below. So here we have a hierarchy. So a layout should contain a single prominent button that makes it clear that other buttons here less importance in the hierarchy. The high emphasis button commands the most attention. So in our bottom sheet, we have our chips and they have a medium emphasis. And we're going to add one button which will have a high emphasis. So we can actually distinguish those buttons and their importance. So an application can show more than one button in the layout in the time. So a high emphasis button can be accompanied by a medium and low emphasis buttons that perform a less important actions, such as our chips, okay? And when using multiple buttons ensured that the available state of one button doesn't look like the disabled state of another. Okay, so let's scroll down to see some more examples here. So here we can see that those buttons expresses different emphasis levels. So here we have our contained button which has high emphasis, and this text button which has low emphasis. Okay? And those two are good combination. Okay, let's scroll down below. So here we can see as well some good and bad examples. So you should avoid using a to contain buttons next to one another if they don't have the same color. Kayla, scroll down below. So here again, we can see some good examples. So here we have a high emphasis and the medium emphasis button. And we here we have a medium emphasis and the low emphasis buttons, so they all look good together. Okay, so let's scroll down below and you shouldn't play some button below another button if there is a space to place them side by side, like you can see on this image here. Okay, so now let's go through this text button documentation. So a text buttons are typically used for less pronounced actions, including those in dialogues and cards. So in currents that takes the buttons helped maintain an emphasis on the carbon content and on those accounts you will often see those texts buttons with a capitalized letters. And down below we can see that, that tastes buttons can also be used on a snack bars or on the images with the background as well. So those examples are looking very nice. Now k here we can see buttons. Text label is the most important element on a button as it communicates in the action that will be performed when the user touches. Okay, so here we always need to choose the appropriate name for our button text. And down below we can see some more examples. So you should avoid using text labels that are too long. So they all should be concise like we saw in that example on the top here where it says reserved. And here we also have the same taste. But in this case the text is not capitalized, but still it has the different color than the rest of the elements around there. So I think that's totally fine. Case number. We can see some more examples of cards and dialogues are K. And down below we can see the states of our text and buttons. So here we can see that our text button actually has a background which is invisible in the enabled or disabled state. But when we hover over, when we focus our button, you press our button, we can see that this background appears r, k. Okay, so here we have outlined button and outline buttons are medium emphasis buttons. They contain actions that are important but are in the primary action in our app. So outline buttons are also lower emphasis alternative to contain buttons. But also a higher emphasis alternative to text buttons. So they are something in the mail. Ok, so down below we can see some more examples. So outline buttons and display a stroke around the text label. And stroke can be represented in different ways. So set a button's width to be the size of the text label with 16 DP padding left and right. And we are going to see the spec. So later in this documentation and set the buttons relative position to the respective layout grid as well. So I in the resting state outline buttons should display containment with a stroke and no fill. And then down below we can see some bad examples show. So we should never narrow down the stroke width below the width of our text label. And here we can see that we cannot always distinguish our button with the, for example, background screen, which has the similar color as our buttons. So you need to be careful when designing our k. Now below we can see the status of our buttons. So this is the enabled and disabled state. And of course we can see the actual background when we hover focus on when we press our button as well. And down below we can finally see our contained button. So this is the button which we are going to use in our bottom sheet design. So contained buttons are high emphasis and distinguished by their use of elevation and Phil. So they contain actions that are primary to our application. And here we can also see the examples of all capitalized letters, or they don't need to be capitalized, but still represents a good case. In this one. Case number o, we can see some more examples, R, k. So this is of course a bad example. I don't need to tell you that, right? Let's scroll down below. So here we can see some are good examples of this contained button with this icon. So contained buttons can place icons next to the text labels to both clarify and action in that call attention to a button. And down below we can see some bad examples. So don't vertically align an icon in the text in the center of the contained button. So this is a bad and also of course, don't use 2Y cosine one button. So buttons at a higher elevations typically appear more prominent in InDesign, right? So down below we can see some states of our contained button. And finally we have a toggle button. So total buttons can be used to group related options. To emphasize group of related toggle buttons. A group should share a common container. And here, for example, we can see the, that container which contains those three toggle buttons for alignment. And that looks so very nice and clean. And down below we can see one example more. So icons can be used as a toggle buttons when they allow selection or the selection of a single choice, such as a marking an item as a favorite. So this is just any one example where we can use a toggle button to display this one image. And we can feel that when we press OK. Alright, and down below we can see some are states of our toolbar buttons. So that all looks very similar to the previous examples which we saw. And of course here we can see some different themes for our buttons. So of course we can use a different radius or level of our buttons. So that's of course on the. Your creativity to choose. And most of the time, of course, we use capitalize letters for our buttons, but of course that's not always required, so you don't need to keep that in mind. Okay, number we have some more examples and let's go to this specks on the bottom. So here we have some specs for containing button and contained button with an icon for example. So here, the padding between the margin between the actual text and this, this button is 16 on the left and right in the size of the button is 2D6 and the minimum width of one button is a 64 dP. Okay? And here, if you have an image there, its height should be 18. All right, and left. Margin or padding here on the left is 12. The padding or margin between the button in this icon is eight, and of course on the right side is a 16. Now below we can see those examples for Outline button, tags, button and toggle button, which is pretty much basically the same. And for example, on a text button, instead of 16, we have eight left and right. And for a toggle buttons, the icon should have a size of 2014, width and height. And margin on all sides should be 12. Alright, so now that we have covered that topic as well, so now we can get back to our Adobe XD, and here we can create one button. So we're going to create a contained button with a high emphasis because our trips represents a medium emphasis and we want to distinguish those actions. Okay, and now we're going to add the one contained button here with a high emphasis. And because we already have those trips which represent a medium emphasis, we need higher emphasis button to distinguish those those actions and to show the users which action is the primary here. So let's create one rectangle first. Select the Rectangle tool. And let's create one rectangle here. So the left and right margins should be 16. Okay, so let's, let me increase the size here by one or K. So now we have 16 on the left and right. Here the margin from the top we can set to 24 are K and margin to the bottom can be also 24. So let's see how will that look? Kay, so something like that. But before that, we need to decide the actual size of our button. So because our button will be basically in a full-width, then choosing the height of 36 is a little bit small. So I'm going to select a double size of that so I can say multiple by two. Ok, and that can be the size of our button here. Or we can even decrease the size of, for example, 268, let's say r, k. And here we can apply the radius. So I'm going to set the radius to afford the p. I can remove the border and I can set the color to color primary. All right. So. The top margin 24 and the bottom margin 24 as well. So let's increase needs to decide by four. So 1234. Let's press Alt, and now we have the marginal 24 on the bottom and 16 on the left and right. And on the top of course 24 again. Now, okay, and that looks fine. So for the text, we're going to actually go back to our documentation for a topography. And here we will see that for those buttons, we can choose, for example, this is just of course an example. We can choose our own dimensions, but some standard sizes, 14 medium, ok, and all capitalized letters. Okay, so let's create our texts. So text of our button should say apply all in capitalize letters R, k. So the size of this button should be 16 in white color. So let's center that vertically and horizontally. So here we can see if our height of our button is too large. So we can even try and decrease this height to, for example, 60. And let's see how will that look like now our k. So now I think it looks even better. And yeah, the height of our button should stay 60 for now. And let's set that to a bottom margin to 24. Okay, let's increase it by two only. All right, so now our bottom sheet look even better. And font size here actually is 16 of Roberto. And that's totally fine. So now what we can do, we can select all of that. We can hit Control G to group that into one group. And here let's name that group. Bottom sheet. Click Enter. Now let's go back to our assets here. And we can add this into our components. But first, I forgot to add the shadow here. So let's double-click on that. And let's add a shadow here. Okay, Just a slightly shadows or we can see the elevation. Alright. So now select this group and feed plus. So we can add this to our component or what we can do, we can remove this from the components. So delete that and let me show you now. So let's remove this one from here. And let's place that here. And let's increase the height of this overlay. So now we're going to select this overlay as well with our, this bottom sheet. And then we're going to group those two into New Group. And then let's name this new group bottom sheet. And then we're going to add that 12 components. Ok? So now whenever we add a bottom sheet, we can add that black overlay as well. Okay, so now let's remove that. And this is how our bottom shift looks like. I think that it looks very nice. Okay, so I think that our text label on our button is not centered vertically as I expected. So let me just move it on the right, on the left side. And let's press Alt. Okay, so now it is a central, perfectly fine. So that will be all for this video. Don't forget to save the project. So control.'s 21. Filters - Recipes Screen: Hello there and welcome back. So in the previous video, we have finally finished designing our bottom sheet. So it looks very nice. There is only one more change which I want to make here. So I want to decrease the height of our button. So let's go to this component section here, and let's click, right-click and edit main component. And now here, let's edit our buttons. So number three here and three here. And instead of a height of 60, we're going to use a 55. Okay? So press enter, and now let's center this button horizontally. So select that and move that on the top just a little bit or K. So now it looks fine. And here what I'm going to do now, I'm going to decrease the size of this background so we can have a 24 margin between this button and bottom sheets. So, okay, and now I'm going to select this overall at this bottom sheet and just move that on the bottom. Here. I can just increase this height of this overlay. All right, and now it looks very nice. So what I want to do now, I want to add this button has a component here, so I'm going to select that. So we'll just move back into the Layers panel so we can actually see, okay, so we're going to select our background and this text and group them into one group and name that group button. Now k. And let's get back to this section here, r, k, and here just click this plus. And now we have added this button to our components here. Right? So we can also add those, those trips. So for example, let's say this. Let's select those three components or three elements here. So the background icon in the text. And let's group that into one group. So click Control G, And let's name this group filtered chip forests slash selected k. And for example, I'm going to name this one filter chip not selected. Okay, let's get back to this acids and now select this one. Let's add that to our components and select this one. And let's edit two components. Okay? Alright, so that's fine. And in this video, what we're going to do, we're going to create another bottom sheet here. And then the bottom sheet will be used for this sort or filter icon from our menu. Okay? And now I'm going to just copy the screen basically. So hold all can shift and select this art board. And let's move that on the right side here. Okay? So from here, I'm going to double-click here and here. And I'm going to remove basically everything. So we're going to have only one category, okay? So let's remove that. And our category will say filters. And inside this category we want to add this icon. Okay? So from the previous. Screens, we're going to select this icon, click control C to copy that. And let's get back to this new screen. And let's paste that here with the control V. And let's change the color to black. Okay? So we're going to place that icon here on the left side of our texts. Let's select those two elements and let's move them on the outside so we can have a margin of 16. Here are k. And so inside our new bottom sheet, we're going to have a choice chips instead of a filter chips. So our choice chips does not have those icons. So we will remove that icon, for example, are okay, all right, and now I'm going to move that text on the left side. So here, for example, I'm going to type all. So this filter bottom sheet will basically filter our recipes on different categories. So for example, this first selected trip per se all, and it will apply all categories to our recipes. And let me just set the margin to 12. Ok, so for this one, let's say this one we will say newest. Okay, let's increase the size to 12. Okay? This one. So the margins between those chips should be eight. So this one can say top rated R, K, 12. This one can say, for example, most popular. Okay, let's increase the width as well. Okay, that's fine. Now, this can say trendy, right? 12. I'm going to remove this one and just add one more. Okay? And this one will say most like, so those are just examples. Okay, so let's zoom out. And it looks fine. So from those bottom sheets, we can also remove those guidelines endometrial. So I'm going to remove those six guidelines from the middle and just leave those on the left and the right. And here we can also remove them. So 123456. Okay, and now we can clearly see those. Those are categories. Alright, so this is the filter section, and we're going to move our button from here on the top with the margin of 24, right? And this bottom sheet will have also the margin of 24 on the bottom, okay, and just buy one. And that's fine. So now let's move that sheet on the bottom and let's increase the height of our overlay here. Okay, now, it looks even better. So there is one more thing which we can add here, for example. And we can set the margin between the icon and this text to, for example, six. Okay? Now it looks even better. So for example, when a user selects this filter icon, this bottom sheet will appear. And from there, we can choose what filter we want to apply to our recipes, or we can choose our newest recipes, top-rated, most popular, trendy, and most liked. Or we can just select all categories and have all recipes shown, okay, and that will be all for this video. So in the next video, we are going to create the design for this search bar or search widget. So whenever user presses that we need to create and design which will show us how it can look like. And don't forget to say this projects or Control S. And that will be all for now. 22. Search Widget - Recipes Screen: Hello there and welcome back. So in the previous video, we have designed our second bottom sheet for our filters. So whenever user selects this sort or filter icon from the top ad bar, then this bottom bar will show, and then we can choose N filter our recipes here. So were the main difference between those two trips from this first bottom sheet and the second bottom sheet is that in the first one we are using filtered ships. And as you can see when we select one of those that we can see this checkmark icon. And on the second, the bottom sheet we are using choice chips and those are choice trip Don contain this check mark icon when, when selected case. So that's all fine. And they, in this video, we are going to design our search widget. So for example, whenever a user selects or taps on this search icon, then we're going to display a search widget and we can search through the recipes. Ok, So first what I'm going to do, I'm going to select this recipe screen and then went to hold the all time shift and just drag that down below so I can have another copy of this green kale and zoom out and let me place this on board here on the right side. Oh, okay. So we can also remove those guidelines on the middle or you can just leave this those two on the left and right side. Okay, that's fine. And before we actually continue designing, let's download some icons which we are going to need for this search widget. So first let's type here back arrow or adjust back. And let's scroll down below until we find back arrow or K. So let's select this one and let's download it. Okay, next one I want to search for Mike. I'll, okay, I'm going to download this one. Now, k And I want to search for history icon as well. So select this one and l is now on that as well, now k. All right, so we have all our icons prepared. So next, what I will do now, so here we're going to remove those two icons from the top hairball because we are not going to need them anymore. And let me just import those three icons. So control shift plus i, the shortcut to import those icons. Select all of those three icons and click import our Ok. Let's move those icons here on top first. And then we would change this title icon to Title I color to black and top navbar color to white. Okay, so now I'm going to move this recipe title on the right side and on the left side we're going to place this, this back arrow. So let's switch this Layers panel. And I'm going to click shortcut Control X to cut this icon. And I'm going to double-click on that so I can actually go into this ActionBar component group. And here I'm going to click control V to paste this icon. Okay, and now this icon should be located here with a margin of 16 on the left, top and bottom. And the recipes title or this title retrieving to change should be away from our. Back arrow 32 DP or k. So it's more that here, 32 or K. That's fine. And we're going to rename this to search and three dots of k. So we're going to set the opacity of this search to maybe 38. And opacity for this arrow should be 60%. Okay? And on the right side we're going to place this mike icons, so control x. And let's double-click on this group so we can actually place our icon here. So control V to paste our icon inside his group. And let's set this icon here with the margins of the 16 on the right, top and bottom. Okay? And the opacity of this one should be 60% as well. Alright, and here we're going to make some kind of a dropdown where we can see our searched recipes or history of our searched recipes. So what I'm going to do now, I'm going to double-click on, on this action bar so I can select this background. And I'm going to hold down control or ought and shift and just drag that on the bottom. Are k somewhere here. And I'm going to increase its height by two times, so multiple by two R k. And from this one, I'm going to deselect the shadow. Okay, so here we're going to create one divider. So we're going to add this line. So let me just create one line here. Ok. So let's zoom in a little bit. So for the exposition here, I'm going to type just as 0 here. Now, our line is aligned perfectly with our screen. And let's check the other side, the other side as well. So the color of this line should be this gray code, which we already have our K. Ok, so we need to remove the shadow from this first bar. So just this like that. And our second, this dropdown will have actually this shadow. Okay? And now what we're going to do, we're going to place this history icon here. Okay, so the margin between those two icons should be to the file. So let's first plays this icon inside the our group. So let's hit Control X to cadet. Double-click on that, and now control V. And now we're placing our icon inside the section bound group. Ok, so the margin between those two icons should be 32. Okay, and let's add one more. I condemn will also hold all time shift and let's duplicate this one. So totally two. Alright? And here we're going to write some texts, for example, some searched words. So for example, I can say here a cherry pie r, k. And let's set that to maybe 32 as well. Okay, and let's copy this. Hold all can shift and let's copy that down below as well. And here we can say, for example, rice and the color or the opacity of those two icons should be 60% as well. And the color of those searched items should be 100%. Okay? Alright, so there is one more icon which we need to add, and that is an icon which will basically concatenate those words and put inside a search search widget. So I'm going to copy this icon, the search icon. So Control C, and I want to paste that icon here. Okay, so I'm going to rotate this image just a little bit. So hold down the Shift while you are rotating and we need to go to this angle. Alright, so now let me just Center that with our history line here, or k. So 16 on the, on the right or right. And let me just copy that one more time so all can shift. Now let's drag this icon here on the center with our, our elements here. Oh, okay, let me just see if it's, if that's all centered, right? Alright, so there you go. Now from here we can, for example, search something and here a user can check its search history and it can concatenate those search words inside this search bar as well. Or we can even, or we can even use this mic to actually use our voice capabilities to write or to search recipes here, ok, so that'll be all for this video, be sure to save a project with the shortcut Control S, and that's it. 23. Favorite Recipes Screen: Hello there and welcome back. So far in the previous video, we have designed our search widget. And there also we here at the search history down below are case. So all that looks very nice. And there with this video, we're going to start in designing our second screen from our bottom navigation and that is a favorites, okay, and here we're going to basically save all our favorite recipes. So let me just select this art board and I'm going to copy this oddball down below. So hold down, shift and just click and drag that down the law, our k. All right, so I'm going to remove here those guidelines. I don't need them anymore on this one, r, k. All right, so from here, we're going to remove this floating action button. And we're going to remove those two icons from this top L bar. So select that and remove r k. And for this repeat grid for our recipe, we can just, for example, at those two items. So this is just an example, of course, are. Okay. And here we're going to highlight this favorites instead of the recipes. So double-click on that here we're going to set the black color with the capacity of 60%. And here, color primary. So select color primary, ok, and double click again. And we need to increase the opacity on those two elements are case I increase that. Alright, and the title should say favorite recipes instead of just recipes. Ok? And here we're going to add the options many or overflow menu with those three dots. So let's go and download that icon. Okay, and here a search for more. Okay, and down below women to select this vertical version. So just download that icon, click OK. And let's get back to our Adobe XD or kn here, click Control Shift plus I. So we can import that icon, click import or K, And there it is. Right, let's pay that in white. And let's click Control X and double-click on this, on this action bar so we can actually put this image in side. So shortcut Control V, and there it is. Let's place that on the right side. So Margins 16 on the right, top and bottom are okay. And that's it. So this is our first favorites recipe screen. And in the next video we're going to create a menu or a drop-down menu for this overflow menu. But before that, we will need to read the documentation for this video. That will be all. And don't forget to save the project. So Control S and that will be o. 24. Overflow Menu - Favorite Recipes Screen: Hello there and welcome back. So why in the previous video, we haven't designed our favorite recipes screen. And also we hear added this overflow menu icon on the F bar. And in this video we're going to create the actual menu. Okay, but before that we need to go to documentation for material design documentation. And here we need to click components and down below we need to scroll until we find the menus. Ok, so click here, and let's read the menu documentation. So Menus display a list of choices on a temporary surfaces are case, so you can see one of the examples. So most of the examples here are for desktop applications, but nevertheless, let's read that. So there are three main principles here. So Menus should be easy to open, close end, interact with menuContent should be suited to user needs and the menu items should be easy to scan. Alright, so let's draw down bellowing here we can see the different types of her menu. So manuals allows users to make selection from a multiple options. They are less prominent in take up less space denim selection controls such as a set of radio buttons. So here we have a dropdown menu in here, exposed drop-down menu. So drop-down menus display a list of options triggered by an icon, button, or action. And they are placement varies based on the element that opens them and expose the drop-down menus displayed the currently selected in menu item above the list of options, some variations can accept the user entered input, r, k, and down below we can see examples from desktop applications. So we went to skip those as much as we can. So the nice thing of height of a manager should be at least one rho less than the height of the applications UI. Alright, so down below we can see some more examples for a desktop applications. And the here let's check the anatomy. So manuals display lists of HR-related options, which can be grouped together as well as unrelated options. So Menus appear when the user taps and interactive UI elements such as an icon, button, action, or contents such as selected item or a text. And here we have a container, we have a text in the divider. So the rider is mostly used for desktop applications when you want to divide the sum categories. And now below we can see examples with icon and text label as well. And down below we can see some more examples with those are shortcuts or sorry, commands as well. Okay, and so let's scroll down below and here we can see any examples when those menu items are disabled then enable. So when those items are disabled, that means that we cannot use those options yet and we need to reach some criteria probably are. Okay. So let's scroll down below. So here we also see some examples with the scroll bars. So those are mostly ozone or desktop applications as well. And when it comes to transitions, menus uses a fade transition patterns to enter and exit the screen. So the animation creates a relationship between the menu and action that generates the menu. So Mencius position on the screen affects where in how it will appear. If opened at the top of the screen, it will expand it downwards to avoid being cropped. Okay? And we can see some examples here from the menu end, the dropdown menu as well. So by default, and menus open with an entrance animation. However, on desktop, menus can skip the animation and open instantly instead. Okay, let's scroll down but also have a dropdowns here. So I'm drop-down menu is a compact way of displaying multiple choices. It appears upon interaction with an elements such as an icon or a button when a user performs a specific action. So a drop-down menus are positioned relative to both the element that generates them in the edge of the screen or browser. They can appear in front of beside, above, or below the element that generates them. And the drop-down menu is typically positioned below with the element that generates it. Now, okay, so number, we can see some more examples for desktop applications and here as well. So we're going to skip that for now. We don't need it. Okay, we can skip that as well. So here we have a drop-down menus with inactive, active, inactive and unpopulated state. So you can see the difference. Now kale, It's scroll down below. And here we can see some outline that drop-down menus where we don't have a fill color. And as you can see this, this is one example with the dropdown menu and the icon as well. So it looks a very nice and here we can see different states of those are drop-down menus. And down below we can track some with different themes which are using those manuals, of course. But I'm going to skip to this spec section so we can actually check the dimensions and their minimum width here is 112 or 112. And the size or the height of a one row inside this manual is actually 48. Okay, in the margins, top and bottom are eight, and the left and the right are 16. Okay. And here we can see some are bigger manuals with the width of 210 a day, for example. And down below we can track the drop-down menus for mobiles. For example, you can see that here we have a 16 and here we have eight. If we have an icon like this, and on the top and bottom, we also have eight margin. And here the rho is 32 for example, and so on. And we have also exemple on the desktop application. So we're going to use this first example with the width of 112. So let's get back to our Adobe XD and let's start design. Okay, so here what I'm going to do, I'm going to create a simple rectangle. So choose r, r, k. So the height of this should be 48th and width shouldn't be 112, right? Okay, so that's the size of one simple row. And as you can see here, lets see so 48 and the weekend see the margins. So the margins are above this row eight and a down below as well. So what I'm going to do now I'm going to copy this rectangle one more time. So I'm going to hold all things shift and drag that on the bottom. And this one will have the height increased by a 16. Okay, so, so here just type plus 16 because we have eight on the top and eight on the bottom. And the women took place this one row on top of that, like this. So we can actually have a margin on the top and bottom. And from this background where we want to remove the border, we're going to add a shadow. And on this one we're going to remove border as well. So let's select those two by holding Shift and let's place them right here. Okay, so here I'm going to write that text, and here we're going to have only one option which will say delete all k. So the size of this font of this text should be 14. So let's select that from the our acids here. Okay? And let's center that vertically here, or sorry, horizontally here with our row. And the margin on the left will be 16, are okay and that looks fine. So when this big round rectangle we can set the radius for resemble to four. Okay? And now as you can see, it all looks fine. So here we have a left margin of, of, uh, 16. We can even choose this area texts to increase the width of our area texts to hell, the margin of 16 here as well. So you can see that we have a 16 margins. Our row here, the height of 48, and we have margins of eight on the top and bottom here. So all that locks are very nice. There is one more thing we need to do. So for example, when we don't have an items inside our favorite recipe screen, we want to set the opacity of this text to 38. And that will mean that our option is disabled. So we cannot use this option when there are no recipes inside our favorite recipe screen. But of course I'm going to set back this opacity to 100 because we already have items here and that's all fine. And that will be all for this video. So we created our menu here. And let's just group this menu. So select this element, whole shifts like this one, hold shift and select this one. And click Control G. Let's get back to our layer section and let's name this to overflow menu. And we're going to add that component here as well. Oh, okay, there it is. So remember to save the project control s, And that's it for this video. 25. Contextual Menu - Favorite Recipes Screen: Hello there and welcome back. So in the previous videos, we have designed this overflow menu. So there is only one change I want to make. And since we have only one item here, we can place this menu on top of this overflow icon, and with the margins of 16 on the right. So that's all fine. If we have only one menu, but if we have multiple menus, then we should place this dialogue below this icon. But for now, it should stay this way. Okay, so in this video we want to design a contextual menu. So, so for example, when we want to select multiple recipes from our favorite recipe screen, we want to click on one of those elements. And then this top bar should change to our contextual action bar. And from there we can see the number of selected items and we will see an option to delete those items, okay? All right, so before we actually start designing, we need to visit the documentation for the contextual menu. So this documentation will be shorter, so don't worry, and go to the components section and go to bars top end here, just select this contextual ActionBar. And down below we will see just a short documentation about this contextual action bar. So top bar can transform into contextual ActionBar to provide contextual actions to selected items. For example, upon user a selection of photos from a gallery that top bar transforms to contextual app bar with actions related to the selected photos. And the here we can see the example. So when we click on one of those elements, we can see this new contextual action bar. So when a top bar transforms into a contextual action bar, the following changes occur. So the app bar color changes, as well as the status bar color and navigation icon is replaced with a close icon. The top, our title text converts to a contextual ActionBar. Texts in the top bar actions are replaced with contextual actions, okay? And upon closing, the conditional ActionBar transforms back into top air bar. So it is very simple. And down below we can see the actual anatomy of this contextual action bar. So we have a close button, we have contextual title, we have contextual actions in optional overflow menu. So it's basic and simple. So, so before we continue designing, We need to download the two icons. So go to this resource and just select these icons from here. And then we're going to search from Icon or delete k. We are going to download this icon. So Let's now that okay, the second icon will be close icon. So select this one as well. Oh, okay. Alright, so let's get back to this to Adobe XD and let's start designing. Okay, so first I'm going to copy this screen. So select this art board and hold down shift and move that on the right side. Okay, so from here, we're going to remove this, this overflow menu and this icon as well. So just double-click on that. Let's remove it. I'll, okay, so here I'm going to set the color of the status bar to black color. And the ActionBar color should be black. But I'm going to set the opacity to maybe 80%. And it will look something like that. Okay? All right, so let me import that those two icons here, close and delete k. All right, so they will have a color of white. Okay, so let me select those two icons by holding shift. So here, press Control X, and let me switch to this section and double-click on this action bar. So we're going to place those icons inside this ActionBar component. So press control v, and now they are located inside. Alright, so let me just place this Delete icon on the right side with a margin of 16 on the right, top and bottom. These texts should be kept. Move that here. And this icon should be moved on the left side with the margins of 16 on the left, top and bottom. And the actual title should be moved 32, the P from this icon. And it will say, for example, one items selected. Okay? And here we need to paint this one item. And here we need to design one of those items like it is selected. So, okay, now select this repeated grid and we're going to click this ungroup grids. So we're going to add grew up that and we're going to modify this one card component. Okay, so here what I'm going to do and when to double-click to open this card group. And I'm going to settle different border color. I'm going to change that to color primary, ok. And for the background, I'm going to set this call primary as well. But it will have, but it will have 10% of opacity, this background color, okay? And it will look something like that. Alright? So we need also to add a shadow to this, to this item. But as you can see when we press shadow, I can barely see that. And that is because we have said that 10% of capacity of this field color. So what I'm going to do, I'm going to duplicate this rectangle. So just click Control D. And this duplicate will actually behind this rectangle. So on that the duplicate, we're going to apply the shadow. So we can just remove the border and set the fill color to white off 100%. And let's apply the shadow. Okay? And there we go. So now our selected item is also elevated and it looks very nice. So here, as you can see, we, we long click on one of those elements these contextual action buttons should show. And we can also see the number of selected items. And we can just press this, this delete button to delete one of those items or every item which we select. Okay, alright, so that'll be all for this video. In the next video, we're going to design a screen when there are no favorite recipes inside our favorite screen. Okay, so don't forget to save the project. So Control S, and that will be all for now. 26. No Favorite Recipes: Now, hello there and welcome back. So in the previous video, we had designed our contextual action bar. And here you can see how our screening can look when we select one of those items by a long clique. And in this video, we're going to design screen when there are no any recipes in our favorites screen here. So for that purpose, I'm going to just copy this screen recipe, screen number one. So just hold Alt and let's drag that here. Okay? Alright. So instead of the recipes, it will say favorite recipes. Okay, and we're going to copy this, this icon from here. So let me just select that click Control C, and I can get back to its original position. So here I'm going to select those two icons and went to remove that. And I'm going to paste this new icon. Okay? Alright, so after that we are going to remove, Of course, this floating action button, and we're going to highlight this, this second item inside our bottom navigation. So let's select those two elements and let's increase their opacity to 100. And here change color to black and opacity to 60%. Okay, so here the text should say no recipes. Ok, let's center that vertically and we can remove this text from down below. And we need to change the icon. So what icon should we choose? Well, I think that we should choose this icon from here. So double-click on that clique control C to copy. And let's click or double-click on this group. So let's remove that. And let's click control V to paste that icon here. Our case, let's place that something here. So let's increase its height and width. Two, maybe 90. Ok, so let's zoom in a little bit. So hold down all things shift and set the size to 90 in width and height. And let's move this cycle on the top, somewhere here. And its opacity can be maybe 38. Okay, the opacity should be the same as in our previous screen in our recipes. So here we have a capacity of 38 and the bottom margin is actually ten, so we can actually set that margin as well. Okay, 910. So let's select this group and let's move that on the top just a little bit, RK right there. And we can also set this, this snack bar, but this time it will say something different and it's a bottom margin, should be 1616 on both sides, on left and right. And it will say, for example, two items or two recipes removed. Rk. And here instead of the retry, we can say a different message, for example. Okay, so the right margin should be 16. Okay? So this is a snack bar which will display when we delete those two items, for example. And we can display a message saying two recipes removed or recipes deleted. So whatever you want. So I can say instead of remove the deleted, ok. And this is the image which we're going to see. Okay, So whenever there is no, any favorite recipes inside our favorite recipe screen, then we're going to see this message showing us that there are no any saved or favorite recipes. So I can add this, for example, favorite recipes instead of just recipes. Now let's center that vertically. Okay, now, now it looks even better. So that will be all for this video. And in the next video we are going to design this joke screens. So this joke will be actually for our food jokes. And those four jokes will be generated automatically every day. So you will see for now, that's it. Just don't forget to save the project. So control s, And that's all. 27. Dialog - Favorite Recipes Screen: Hello there and welcome back. So in the previous video, we can design this no favorite recipes screen. And in this video we are going to design a dialogue. A dialogue should appear, for example, when we want to delete all and when we click this and delete all option. So that way dialogue can appear here and we can select whether we want to delete all or not. So a dialogue is kinda good way to confirm. Once again, before we actually delete everything from our favorite recipe screen. And before we actually start designing, we need to check the documentation. So let's open up Material dot IO. Go to the components here and here we need to go and find a dialogs. So select that and now it's read at. So at that old informs users about a task and can contain a critical information, require decisions or involve and multiple tasks. And down below we can see some type of dialogue. So we have alert dialogue here. And you can see when those two action buttons are a side-by-side or when they are stacked on each other. So this stacked version is used when we have a longer text for our action buttons. And then we have a simple dialogues. As you can see, this is how they look like. For example, we have a confirmation dialogs. Okay, so in our design and we're going to use confirmation dialogs and you will see. So let's scroll down below and see some more examples. So there are three main principles. So dialogs Focus user attention to ensure their content is addressed. Dialogues should be direct and communicating information and dedicated to completing a task. Dialogues should appear in response to user task or an action with irrelevant or contextual information. And down below we can see a table which is already familiar to us. So we have already designed a snack bar in the banner, and now it's time for us to design a dialogue so that dialogue has the highest priority and the dialogue block applications usage until the user takes him dialog, action or exit the dialog if available, of course, and the dialogues should be used for errors that blocks in applications normal operation for critical information that requires a specific task, decision, or acknowledgement. So in our case, we're going to use that dialogue to show confirmation dialogue. To ask the user again, if a user wants to actually delete or items from, from the screen or from the database. Because sometimes it might happen for user two. Coincidentally click delete or button. And we want to ensure with this dialogue that user actually wants to delete everything from the database. So that's critical action or Kayla's scroll down below and here, and here we can see different types of a dialogue. So we have a lot of dialogue, alert dialogues, interrupt users with urgent deformation details or actions. We have a simple data and so simple dialogues display a list of items that take immediate effect when selected. So here we don't have any confirmation action buttons. Down below we have a confirmation dialogs. Confirmation dialogs require users to confirm a choice before the dialogue is dismissed. And we also have a full-screen dialogue. So full-screen dialogues containing actions that require a series of tasks to complete. And they are only used when we have multiple and longer options or actions to show to our users are kN down. We can see the difference between those dialogues on Android and iOS platforms. So there is a slight difference, of course. Okay, and down below, let's check the anatomy. So here we have a container that title which is optional, supporting text buttons in scream. So Scream is this black overlay behind our k. So a dialogue is a type of a modal window. So x is to the rest of the UI is disabled until the modal is addressed. So all modeller surfaces are interrupted by design. Their purpose is to help the user focus on content on a surface that appears in front of all other surfaces. And to express that the rest of the app is inaccessible and to focus attention on a diode, surfaces behind the dialogue are screamed. And scream is a temporary treatment that can be applied to a material surfaces for the purpose of making content on the surface less prominent. Alright, and down below we can see the title, for example, battles purpose should be communicated by its title in the button. So you should be careful when selecting the title. As you can see here, we have a better example, so you shouldn't use dialogue that was that pose an ambitious question. And the dialogue title should be very concise and explaining what the involves in that request. So when it comes to buttons, it is always recommended to use a side-by-side buttons and they're not stack them on each other. Of course, stacking buttons on each other is allowed, but you need to be very careful and it's only allowed when the text is too long, right? So next we have behavior. So dialogs appear without a warning, require users to stop their current task and that they should be used sparingly as not every choice or settings Warner's interruption, dialogue retain focus until this mist or an action has been taken, such as choosing settings. They shouldn't be obscured by other elements or appear partially on the screen with the exception of a full screen dialogues. We can also implement a scrolling to our, to our dialog. And when we are using that scroll, you can see that the title and those action buttons are pinned. So the title is opinion on a top and action buttons on the bottom, k. So there are a few ways of dismissing the dialogue. So we can tap a cancel button. If there is one, we can press the keyboard Escape key. We can tap on the screen. We can tap on the Android system back button or using some another cancer escape action. Okay, and then when it comes to transition, dialogues enter and exit the screen using a fade transition pattern, like in this example. Okay? Down below we have actions. So, so there are three types of dialogue actions, confirming actions, dismiss elections in acknowledgment actions. So to resolve what triggered the dialogue, confirming actions, confirm a proposed action. These actions can involve removing something such as delete or remove, and they are placed on the right side of the screen. Dismissive actions, dismiss a proposed action, and return the user to the original screen or step. They are placed directly to the left side of confirming action. So you should always send confirming action on the right side and dismissive action on the left side. And down below we can see a better example. So the confirming action is actually located on the left side and that's bad thing. So because most of the users are right handed and we want to enable users to quickly access this, confirming the action on the right side. So that's why we are adding dismiss button actually on the left side instead. So a single action is also allowed and avoid presenting users with unclear choices. Cancel. It doesn't make sense here because nuclear action is proposed. So be careful when you are creating the context for your action buttons here. And dialogues should contain a maximum of two actions. If a single action is provided, it must be acknowledgment action. If a two actions are provided, one must be confirming in the other dismissing action and providing a third actions such as the Learn More, is not recommended as it navigates the user away from the dialogue, leaving the dialogue task and unfinished. And this is the section about other dialog. So our dialogues interrupt users with urgent information details or action. And here we can see some of the examples. So this one is good and this example is not recommended. So don't use action texts that fails to indicate what does selection will do. Cancel in the lead, better indicates what will occur in this dialogue. Next week you have a simple dialogue. So simple dialogues can display items that are immediately actionable, went selected, and they don't have a text and buttons are case number. We can see that behavior and snippet dialog allows the following interactions. Tap on action to choose it and closer dialog and tap outside a dynode to close the dialog without taking an action. So here we don't need any action button are kn here you can see that a simple data does not fit with this action button. So that's a bad example. And down below as well. So you don't need to add this cancel button because users can tap anywhere outside the dialog to close it. And finally, we have our confirmation battle. So this is one we are going to use in our app and conformation that also give users the ability to provide the final confirmation of a choice before committing to it. So they have a chance to change their minds if necessary. If the user confirms our choice, it's carried out otherwise, the user can dismiss dialogue. For example, users can listen to a multiple ring tones but only make a final selection upon tapping, okay? In this example down at all. So we can also use date pickers, or at least in the layout of our Allard dialogues are k. As you can see, this is another example here. So we should always use confirming and this mystery buttons or action buttons. And we shouldn't provide only a single action button, is, it's unclear how the, how to dismiss the actual dialogue. And finally, we have a full screen dialogues. So a full-screen Dialog Group, a series of tasks such as creating a calendar entry with event title, date, location, and time. And because they take up the entire screen, full-screen dialogues are the only dialogues over which other dialogues can appear. So a full-screen dialogues may be used for content or tasks that meet any of these criteria. So dialogs that include components which require keyboard input, such as our form fields, or when changes are saved in suddenly or when it components within the dialog open, additional dialogs enforced green dots are for mobile devices only for tablets or desktops. We was a modal dialogues instead are case. So down below we have behavior for this bottom noise going to stick longer on this first screen now because we are not going to use that in this example. So you can check that out by ourselves and we're going to switch to the specs at the bottom. Okay, so here we have a simple dialogue. Nonetheless, we hear a lot of dialogue and confirming data and so on. So for the simple data, you can see that we have a left margin of 24, for example, in the space between those icons, inner text is 20 and the space on the header is actually 64. And down below the actual row of this one item is 56. Ok, for the other data, we can see that the left margin is also 24. Down below. The actual buttons are located in this row of 52 ADP. And left margin is eight and the bottom margin is eight. And so on or Kayla's scroll down below. And we're going to hold down onto this confirmation dialog specs and number. We have also confirmation dialogs with scrolling and week-long actions and so on. And the fourth screen, of course. But we're going to stick with our regular confirmation dialog. Okay? So here we have that the width should be 280. And we can see that we can also add a two lines of the title in here. The space from this baseline of our title to the top of our dialogue is actually 4D. Then from the baseline of our first line of text from the description to the title is 36. Left margin is 24 down below this action, Rho is the height of 52. Right margin here is actually eight. And on the bottom is actually eight as well. And here we have also 28 margin between this description with our buttons. Okay, so now let's go back to our Adobe XD and we're going to start designing. So first we need to create a rectangle of 280 in width. So I'm going to select this art born and move that on the right side. So we can actually copy this cardboard on the right side, right here. Okay, and here I'm going to place first the black overlay. So I'm going to create a rectangle here with a full height and the width of our screen. Remove the border and add the black color of the opacity of 50% or so. On top of that, we're going to add one more rectangle. So let me just create one example here. Let's center that for now. So the width should be a 280, as we already saw. We can add the radius here to, for example, ten or even a less. So for example, maybe six r k, that will be fine. Here. We're going to also remove the border. We don't need it. Okay. So first we're going to start with the title. So as you can see, the space here is 40. So let me just, let's first create one title. So the title should be delete, all end question mark, okay? The font size should be 20 RK and font color should be dark or black. So the left margin should be 24, as we already saw, Gn. And we need to create one rectangle here which will represent a height of 40. Okay? So we can actually see if that fits with our baseline. So let me move this title one or two times dumbbell or K. And now we can add the guideline here. Okay, and that means that we have set this guideline from the baseline of our font to the top of this dialogue to 40. Okay, that's 40. And next let's see what we see what we need to add. So next we're going to add some simple description here. And the size or the space between this baseline from description to the title is 36 this time. So let's first create a text and we're going to say something like, are you sure you want to remove all your favorite recipes and question mark? Okay, so let's select that. We're going to choose a 14 size for the font. And we're going to change the opacity to 60. So this is a medium emphasis, and I'm going to place this in another line. Ok. So here what we need to do, as you can see here, the 36 is the margin or the space between this baseline to this title. So let me just create that. So 36. And now let's zoom in and let's move this right here. Our K. So now I can create another guideline here. Okay, let me remove this rectangle. All right, next let's see what we need to add an x. We need to have at least 2028 DP of space between those the last line of text to our this last row, four action buttons. So first, what I'm going to do and when to create this row of 52 deep in height. So let's create one row. Let's set the height 52 in the space between that and this should be 2828. Now. Okay, and now I'm going to decrease the size of this dialogue. To this role or K. And we can also add the radius to those two bottom corners to six and remove the border now k. So we can actually set the guideline here as well. Okay, from the start of this row. And here we're going to create two action buttons. So the first one, we'll say cancel. It will have a 16 in size and it will have a color primary. Ok. And let's hold Alt and shift to copy that. And this one should say yes or capitalised. Okay, so what I need to do now, I'm going to create one rectangle on behind them. So I can just create that rectangle. And as you can see here, that rectangle should have eight margin on top and the bottom. And of course on the right side and on the left side between those tools. So I'm going to now see and count that. So 123. So we have eight here on the, on the right side. Let's have eight as well, and not top as well. Okay, we have eight. And let's place this on the top actually. So let's go to layers. And it's placed this button, this text on the top. Oh, okay. So the actual padding inside this button should be eight as well. So let me move that right here and let's decrease the size r k we have 88, and on the top we have an ion, but that's totally okay. All right, so let me just copy this on the left side. And the margins between those two should be eight. Let's increase the width and let's set this cancel over top so we can set one on top of this background. So the left should be eight and the right should be eight, and the left and the right should be eight as well. So let me decrease the width by one more. Oh, okay. Alright. So now what I can do, I can just remove the border here and I can select those two. So the background and cancel texts in a group that into one group saying, for example, cancel button. In here. I can remove the border, select those two elements and the group them into one saying yes button. Okay, and lets get back to this documentation so we can take it out. So eight margin on the basically both sides here. So let's check that out. So we have eight here and here we have also eighth. And here we also have a 28 here between this guideline. So that's all fine. And now let me just select all the elements from here so that text in the background here, this and this and this one. Okay, let's click Control G. And we're going to rename this to dialogue R, k. So we can center that now vertically and horizontally. Right? And now we can add this to our components. So let's click this plus, and there it is. So now whenever our user selects this delete all option, then this dialogue should appear to confirm that the user wants to actually delete all the database for a favorite recipes. Okay, so that will be all for this video. Don't forget to say the projects or Control S, the shortcut. And in the next video, we're going to create this third that joke screen for a food jokes. So you will see. 28. Food Joke Screen: Hello there and welcome back. So in the previous video, we have designed our dialog and it looks very nice. So in this video, we're going to design our third screen from this bottom navigation in that is this joke. So basically this joke will contain a food jokes. And each, and every day, there will be a new food joke which you can see and share with your friends. So let's first copy one of those screens. So I'm going to copy the screen. So select this art bore hole, Walt and shift, and let's move that on the right side. Okay, so from here, I will remove this snack bar and I'm going to highlight this bottom navigation destination. So I'm going to paint that in color primary, and double-click on that. So I can access those two elements and increase their opacity to 100. And for this one, let's say black color with 60% of opacity. Alright? So we're going to remove those two. We don't need them. And that we will rename this title to say food joke. Okay, and this icon can be also removed. So instead of this icon, we are going to add the share, Share icon. So let's download that icon. Okay, so here we're going to select n-type share. Okay, down below at search for that icon, here is, let's download it. Okay, let's go back to our Adobe XD. So double-click on this action, on this action bar. And here we're going to select this new icon, so control shift plus I. And let's import that icon here. Now k. Let's place that right here on the center. So 16 DP margins on top left, on top right and bottom change the color of this icon to white. Allright, that's fine. So inside this full Joe screen, we're going to add one card. So let me get this card from the components here. Okay, and of course we are going to modify that a little bit. So let me just put it on the center here for now and double-click on that. We're going to remove this image and this subtitles or description and those icons as well. So we're going to only left, leave this title. So let me remove that. And here let me just place that on the left side so the margin should be 16. And here let me just increase this text area so we can see the left and right margins of 16 as well. Oh, okay. And on the bottom, for now, it will be something like that. So let's just use some dummy text. And for that case I'm going to use this lorem ipsum. Okay, so I'm going to just type this random texts here. Select that, hit control V to paste that text. Okay, and now we can write. Okay, so the next thing, I want to create one more text and that text will represent the date of this actual food joke. For example, every day we can see a different Fool joke. And here for example, it's type some random date. So for example, 0 slash 0 slash 2210 k. So the font should be 14, color black, and opacity TO 60%. So let's set the margin on the top should be, a margin on the right should be 16, n or the bottom 16 as well. So let's reduce the size of our current view just a little bit. Okay, so here we have a 16 on each and every side basically. And let me just put that on the center of the screen. And there is one more thing I want to add here, and that is this background image from the splash screen. So I'm going to select that image, click control C to copy that. Then go back here and hit control V to paste that. So let's get back to this Layers panel. And here let me just set the different color for, for this border. So I'm going to select this color primary. Ok, but with the opacity of 5%. Okay, so let me Center this screen here. And I'm going to put the card, the bottom navigation in the action bar on the top of this splash screen. Okay, so this splash image will actually be at the bottom of our screen or in the background. So on top of that we can see the joke and discard view. So I think that now our screen and Alex even better. So every day this joke will be updated and we can see some new jokes. And here of course, we have an option to share this joke with our friends, with some other applications and that's it. So don't forget to say the projects or Control S. And that's it for this video. 29. Details Screen/Overview Tab: Hello there and welcome back. So in the previous video, we have designed our food joke screen. And in this video we're going to create a new screen and we're going to use tabs. So before we continue, I want to make just one modification inside our food joke screen. So here, as you can see, when we select our background, we have added this field color instead of boiler color. So I'm going to remove this field color and just edit this color, primary border color. Okay? And now our bare ground will look even better. So we can even increase the capacity of this by some percent. So for example, six or seven or maybe eight. So let it be 8% of the capacity, okay, and that's fine. So let's save this. So Control S, Okay, so now what we're going to design. So, so for example, when a user selects one of those recipes inside our recipe screen, then we want to open another screen in your screen and where we're going to display some detailed information about that specific recipe. For example, some description and the more detailed informations such as ingredients and instructions on how to prepare this meal. So before we actually continue, we need to visit the material design documentation. So go to these components section, and from here we're going to find tabs. Ok, so down below select tabs and let's read this documentation together. So tabs organized content across different screens, datasets, and other interactions. And down below we can see some examples. So we have two types of tabs are fixed, n scrollable, and each one of those can have leading icon, top icon, and just this label text. So as you can see, we can also set this icon on the top of this label and that's totally fine. And we also have this scrollable dams. And here we can have more than four tabs inside a scrollable tabs. And also we can use icons or just labeled text, okay, and as you can see here, we have a multiple tabs here, so we hear around a nine or ten. Okay, so let's go down below and see some more examples. So tabs organized and allow navigation between groups of content that are related and at the same level of hierarchy, each tab should contain content that is distinct from other tabs in a set. For example, tab can present a different section of news, different Generals of music, or different themes of documents. Okay, so you shouldn't use tabs to move through sequential content that needs to be read in a particular order. So for example, if you are creating applications for reading books, and you shouldn't place those chapters in the tabs. That's a bad example. And here we can see that tab labels can include icons in a text and text labels should be short. So mostly you want to use only one word for those attempts and that will be amazing our case. So avoid using tabs for comparing content across multiple tabs, such as the different sizes of the same item. And as you can see here. We have a tabs for a small, medium and large. And that's just a bad example and we shouldn't use that. And here we can see that our tabs are basically in a single row and with only one word of a text label, and that's totally fine. So we can also combine tabs with other components like top bars or nested components like cards or sheets. So there are three main principles here. So as attempts can horizontally scroll, our UI can have as many tabs as needed. Tabs organized content into categories to help users easily find different types of information. And the tabs are in this play, they're next to each other is bureaus in categories of equal importance. So as I already mentioned, we have two types of tabs. Fixed end scrollable. So fixed stem SIR, display all tabs in one screen with each tab at a fixed width. The width of each step is determined by dividing the number of terrorists by the screen width and that they don't scroll to reveal more, more attempts. The visible tab set represents the only temps available. So here we can see that the width of this screen is divided by three, and those three have the same size and all those tabs look perfectly aligned. Alright, so down below we have a scrollable tabs and they are displayed without fixed widths. They are scrollable such data, some tabs will remain off screen until scroll. So here you might notice that we have some blank space at the beginning of this screen. And that is because we should indicate the user that this is actually a scrollable tab, okay, and down below we have anatomy. So we have a simple container. We have active icon, active text label, active tab indicator, inactive icon, inactive text label and the tab item, as you can see, this tab term represents this rectangle. And we're going to also create those rectangles when we started designing. So you'll see our case. So when it comes to text labels, text labels should clearly describe the content of the tab they represent the tab content should contain a cohesive set of items that share a common characteristics. So a tab labels appear in a single row. They can use a second line if needed, with their truncated text. And the Alternatively, you can use a scrollable tabs to allow room for a longer titles, but you shouldn't resize the text labels to fit them into a single line. If labels are too long just to read the text to a second line or use a scrollable tabs. That also you can use two lines of text. But again, I repeat, if you can use only one word for the text label, that will be amazing. Ok, so down below we can see some bad examples. So we shouldn't use the truncated labels unless it is required. And we shouldn't make steps that contain only text with the tabs that contain all the icons. So we should have a some consistency with those tabs or so. Our tabs should have all text labels or, or icons or both of them, so nothing is separated here. So here we have some more examples. We can of course only yours, the icons for our tabs. And that's totally allowed. But here as you can see, having one tab with just text label and the other with icon and text label just doesn't fit well. And you should avoid that always. So here we also have tab indicator. So to differentiate inactive tabs from an inactive tab, we should apply the underlying N, the color change through the active tab's text and icon. And so this is the tab indicator and we'll deal with that as well. Okay, so here we have some examples. So let's play this video. So users can navigate between tabs by tapping a tab or by performing a swipe gesture over content. And down below we can see some swipe gestures. So that's another way of navigating between our damps are. Okay, let's scroll down below. So here, you should be cautious when placing a swipeable content in the UIs that have tabs, as users could easily swipe the wrong component. So here, for example, we have this horizontal scroll view inside our, inside our tab. And when the user swipes on that, it will not change a tab. Instead, it will change this content inside our tab. Okay, So were you should watch on those little tricks, and let's play this one. So you should avoid placing swipeable items in that content area of a UI that has tabs as the user may mistakenly swipe the wrong component. So that's another good tip. Okay. So when a screen scrolls, tabs can either be fixed to the top of the screen or a scroll of the screen. So if they scroll off the screen, they will return when the scroll, when the user scrolls upwards. Okay, so that's another option too. To have more space for our content. And the down below we can see that the tabs can scroll off screen on scroll and reappear when the page is scrolled up. So not only that, we can hide the action bar, we can also hide this, those tabs and that's allowed as well, but we shouldn't scroll tabs behind a top bar. When tabs are attached to a component, they should appear in MOOC as the single unit. So let's see some more examples. So tabs are displayed in a single row with each tap connected to the content into represents. As I set, all tabs are unified by a shared topic. Ok, so you should have a good context for your table layout. So we should avoid nesting the tabs within another tab. And of course we shouldn't play steps below each other and stack them like that. So this is just embed example K Here we can see some good examples and it's one is better of course. So we shouldn't use stamps with the shortstop air bars or top rebars that transition to shore top error bars on scroll like in this example here. And of course, tuition and attach tabs to a bottom navigation as it can cause confusion to the users. And here we can see some different examples where our tabs are not expanded to the full width of the screen. And that, that can't be honest, mostly on the tablets, but still it's a good example. And when using something like that, you shouldn't place those tabs in the full width. So don't play steps above their content. They don't control. If temps only changes section of the UI, embed them within that section. So you should also remember that here we can see some are nested tabs as well. And that looks very nice. So now this is a section for a fixed tabs. So fixed steps or display all taps in a set simultaneously. They are the best for switching between unrelated content quickly, such as between transportation methods in a map to navigate between the fixed steps, tap on individual tab or swipe left or right in the content area R, k. So we can see some examples here. So fixed steps have equal width, which can be calculated either as the width of the screen divided by the number of the tabs or the width of the widest tab label. So when using a fixed steps ensured that they can be all seen on a mobile without a truncating their texts. And the don't use more than four or six steps at once. So the four is actually some maximum number of tabs which you want to have on a fixed tabs. And if you have more than a, then afford, then you should use a scrollable tabs instead. Alright, so this is some example on a y there layouts. All right, so we have some more examples here. And then we have a scrollable tabs. So when a set of tabs cannot fit on the screen, we use Scrabble tariffs, scrollable tabs can use a longer text labels and a larger number of taps. They are the best use for browsing on a touch interfaces. So scrollable tabs to display a subset of tabs at once. And the width of each step is defined by the length of the text label, okay, and not by the screen width instead K down below we can see some more examples. So on mobile and desktops, offset the first tab on the left to signal that the tabs are scrollable. So we should always have this padding inside instead of the first tab. And that way we will indicate the users that this is actually a scroll bar tab. And down below we have some bad examples. So avoid using inconsistent padding on each tab. So to navigate between a set of scrambled tabs. So user swipe left or right, and the tab set can be looped. So when a user reaches the destination, then the first step is shown again k. So let me play this example. So when depth scramble tab should reposition itself to became a fully visible on screen. And you can see active tabs to reposition themselves to appear on the screen. And let's see some different examples here. Okay? And down below we have the states. So by default the tabs inherit enabled states with one active state. The inactive state of tab can inherit a hover focus and pressed state. So here we can see all the states for our tabs and how they look like when we hover over or when he focused on them or brands. So down below we have some more themes, different themes used for tablet layouts. Also we can check them. And finally, we kept specs. So for the fixed steps, as you can see, we have some different examples. So for the first two examples, when we have only text labels or only the icons, the height of this rectangle or tell background is actually 48. And when we are using those labels, text labels and icons together, then the size or the height of this background should be 72. Okay? And of course, the maximum padding inside one of those is 16. So be sure to remember that. And down below we have a scroll bar tab. So here the height of this background is 48 as well. But here the difference is that we have this bedding inside of size of 52, okay, so the minimum width of one element or one tab is 90. Okay? And here we can see some more examples. So now let's go back to wx d And let's start designing. Alright, so what I'm going to do, I'm going to copy this recipe screen on the top. So hold Alton shift and just click and drag that on the top here. Okay, so I'm going to rename this screen to the details screen. Right? So our details screen will not have a floating action button nor the bottom navigation. And we're going to also remove those guidelines on the middle. And we're going to leave those guidelines on the left and the, and the right. Okay? So here I'm going to remove those two icons as well. Okay? And we can move this repeat grid out of this screen so I can just put that here. And when to ungroup that. And I'm going to delete those three cards and just leave this one. So the name of this screen or the title of this screening will be details. Okay. So let me place that somewhere here. So we're going to add the back arrow here. So I think we have already added the Becker or somewhere here. So we're going to reuse that same arrow or okay, I think it's here. All right, so I'm going to select this arrow here, click Control C. And I'm going to paste that arrow right here inside our action bar. So control v. And let's just change the color of this back arrow to white and with a full opacity. So the margin 16 and the margin from the text to this back arrow will be 32. Alright, so that's fine. And here on the top we're going to have one menu. So that menu will be for saving this square interested is inside our favorite recipes. So let me go to this material IO and we're going to visit these resources. And then the icons, Sullivan to download one new icon. Just type here star r k. I'm going to download this or maybe this, okay, this star rate. So just download that. Let's go back to Adobe XD. Here inside the our ActionBar, we're going to press Control Shift plus i, and we're going to import that star. Okay, so let's play that. Here with the margin on the right, top and bottom 16 change. It's color to color white. Okay, color white. So here we're going to have one image and the image will be that specific image of that recipe. So I'm going to anger up all of this. So control shift plus g, I'm going to put that here and Ungroup even this control shift plus G or K. I'm going to remove that. And here I'm going to create one rectangle. So press R. And the width of this rectangle will be the width of the screen and the height should be 240. Oh, can we remove the border? And I'm going to place that right here. So I'm going to set the opacity of this rectangular TO 634. Now, this is just an example, and I'm going to increase the size of this image. So hold down the shift. So the width should match the width of this rectangle. And now let's place this image summer here. Our case, or select this rectangle, increase its opacity to 100. Select those two elements, right-click and mask, which trip, okay? All right, so we're going to place this image right here. And when we go to this Layers panel, this action bar should be on the top so we can see this shadow on our image. Kay, so that's fine. Okay, let me just put this one pixel above on the top. Okay? Alright, so I'm going to put it here and we're going to create our tabs here. So let me select this rectangle from our ActionBar. And I'm going to hold down all ten shift to duplicate that on the bottom k somewhere here. And okay, so for now what we're going to do, we're going to create two tabs. So our details screen, we'll have a three temps. One will be named the Overview, The second will be named ingredients in a third one instructions. So in the first one, which is named the overview, we're going to basically have some basic information about this recipe and so on. In the second one, we're going to have a ingredients information. And in the third one, the instructions on how to prepare this recipe or this meal. Okay? So right here we're going to use the text tool and create those three texts. So the first one we will say Overview. Okay, so the phone should be 16 with the white color. So let's send that here. The second one will be suggests hold the Shift and all to copy. That will be ingredients, and the third one will be instructions. Ok? So now what I'm going to do, I'm going to create one more rectangle here with the full width. Okay? And I'm going to divide this by three. Okay? Alright, so what I'm going to do now, I'm going to go to the layer section. And here, select all those three texts and place them above those rectangle. So let me just change the background color of this one so we can actually see the text on the top. So these texts should be centered on this rectangle. Okay, that will be fine. So I'm going to copy that rectangle on the right side. And that this second texts should be centered on this second rectangle, R k here. Alright? And the third one as well. So I'm going to move this right here and move this instructions right here. Okay? So that's it. I'm going to remove this rectangle now. And I'm going to create a tab indicator. So I'm going to create a tab indicator in the width of this rectangle. Okay? Its size, its height should be to the border, color should be removed in the field, color should stay right? So let me remove this rectangle from the bottom now. And let me place that right here. Okay, so now we have created our tabs and I can even merge those two backgrounds. So tho, those two rectangles can be merged. So just select this merge option. And as you can see, they are now one element or a Union, as you can see here. And now everything looks fine. So now we're going to move this image right here. So this OK, this action bar should be on the top, which it is. And next thing what we are going to do, we're going to create one simple overlay here. But before that, let me just copy those two icons for the, for the number of likes and the number of minutes needed to prepare this recipe or this meal. So I'm going to place those two right here. Okay. So the margin should be 16 on the bottom and on the right. That's fine. And they're color should be actually White. Ok, so in order to actually see those two icons properly, and we need to add a little overlay on top of them. So I'm going to add that now and just create one rectangle. And place those two on the top of that rectangle, actually k. So I'm going to change its color so we can actually see those icons in the background. So here we have a 16 on the bottom, and we should also have a 16 on the top. So let me increase the size. Okay, so now what I'm going to do, I'm going to add a gradient color to this rectangle. So this first quarter, we'll have the opacity of 0. And the second color we'll have actually black color. And it can have a opacity, maybe 80% Okay, and now we are able to see a little bit better those those two icons colored in white. So for example, if we move that overlay like this, you can see the difference. Okay? So this overlay will just basically simple highlight this, those two icons. And that can help us a lot. So down below, we need to create the title. So let me just copy this title. Okay, so I'm going to copy this second part of this text and place inside this. I'm going to create the width. Okay? All right, so I'm going to place that with a margin of 2400 top k. I'm going to create this text box. So margins on the left, on the left and right are 16, and now on the top 24. Okay, so the next thing, I need to download the one more icon. So let's open up a web browser and here let's search for a checkmark. Okay? And I'm going to choose a checkmark with the circle around, okay, so like this, May 1 be or this one. So we can choose what ever you want. And in this case I'm going to choose this field. So I'm going to down this icon. Okay, so here I'm going to import that. So control shift plus i, and I'm going to import that right here. So here I'm going to add some, some categories of these texts so a user can see in which category this recipe fits in. So I'm going to color this into the green. So we already have added this green color. And I'm going to write here that text. So for example, vegan with the font of 14, with a capacity of 100 and end with a color of green as well. So for example, okay, the margin between those two should be maybe ten or even an eight. Ok, so let's center that properly. Nice. Next I'm going to hit control D to group those two into one group. And I'm going to copy that on the bottom. And here we're going to also have a margin of eight. This time I'm going to write vegetarian for example. Okay? Now I'm going to copy those two on the right side. And the margin between those two groups, or those will be 24. And here, for example, we can type diary free. And here we can say gluten-free. And let's create two of them more. So 24. Here we can write a healthy and down below we can type cheap. So we don't have to have all categories of those applied to each and every recipe instead that we can only show those which are active for this current recipes. So for those recipes that are not direct free, for example, or that are not vegetarian. And we can set their color to black and their opacity to 60%, or maybe even 38. It's even better, okay, and for this strip, we can also say that too black and opacity to 38. And now we can see which of those categories are applied to each and every recipe. Okay? So let me just select all of those categories and control G to group them into one group. So the space between or the margin in-between those two, the title in those categories should be 16 RK. And down below what we need to do, we need to create another text. And we're going to say, for example, description Al-Qaeda size should be 12 and opacity to 60 K. So the margin between those should be 28 K. And here I'm going to write some random descriptions. So for that I'm going to find the lorem ipsum website. And here I'm going to search for some Lorem Ipsum text. For example, this one k. And here I'm going to use a text tool to paste that code, set the robot off onto 14, or maybe even a 16 K. So the margin between those two should be eight. And here I'm going to use this text area. And I can reduce the width now. Okay, so we can hear a 16 margin on both sides. And I can now increase that, for example, to the bottom. So we can have 16 on the bottom as well. Alright, and I can paste that code for example. Once again. So this is an example of how our date details screen will look like. And there is only one more thing which I need to do. So whenever we want to save this recipe inside our Favorite Recipes. And we can click this icon and this icon then should change the color. So their default color is white. And that means that this recipe is not saved. And I'm going to create. So let me just remove first this. Ok, I'm going to duplicate a screen right here. And here. I'm going to set the color of this to maybe this orange or yellow should be even better. Alright, so I'm going to add this call here as well. Okay, so whenever we click this star, then we're going to basically save our recipe. And we should also show a snack bar message. So we're going to add a snack bar here. And let's find that into our components. So snack bar, oh, okay. Margin 16 on left, right, and bottom. And here we can say, for example, recipe saved. And here we can display message saying just okay, capitalized letters, margin of 16 hour, right? And as you can see, this is how our screen, our detail screen, for example, will look like and that, that'll be all for this video. Don't forget to save the project. So Control S. And seen the next one. 30. Ingredients Tab: Hello there and welcome back. So in the previous video, we have design this Details screen and also we have added our tabs. So we have three tabs. And in the previous video we can design this overview. And in this video we're going to design ingredients tab. So before we continue with that, I want to make a few changes here. And let me just copy and paste this screen on the right side so we can work on that later on. Okay, so here's what I want to do. I want to basically set the opacity of those two next to 16, okay? And I want to change or delete those backgrounds here. So if you remember, we have added a background of black color with the opacity of only 2%. And I'm going to remove those backgrounds so we can actually have a white colored background, okay, now our background here is white, okay? And in this one we're not going to remove that black overlay off 2% opacity. We're going to keep that and we're going to basically remove everything from here. So I'm going to select all of that and hold shift to deselect this background overlay. Okay, we do remove all of that and I will keep this, this overlay. So the next thing what I want to do, I want to move this tab indicator on the center. So now that means that we are currently navigated at these ingredients screen, okay? Okay, so inside our ingredients screen here, we're going to basically have a list of ingredients and that those ingredients will be grouped into one card. And we're going to just list those, those ingredients right here. And I feel prepared already. One image. So I just typed as cinnamon on Google and this imager will be downloaded and used on those ingredients cards. So you'll see, let me just save this image. Okay, so now let's get back to our Adobe XD. And here click Control Shift plus I. So we can import that image so that the image is on the desktop here. Import or came with them all that right here. So I'm going to find our current component here and I'm going to add that. And then we're going to modify this card. Okay, so I'm going to click Control Shift plus and g to anger of this. And I'm going to remove basically everything from here and those icons. And I'm just going to leave this title and this description right here. So two lines, so Description and one like that. So let's say cinnamon, because that's the title of this ingredient. And for example, here we can say one teaspoon. And then below we can send the consistency so we can set, for example, solid. Okay? Those are just an examples. So margin between those should be 16 and the margin here should be 16 as well. Okay, alright, so next thing let me see. I'm going to decrease the height of this card. So we can have a 16 on the bottom. Okay? And right now I'm going to create the one rectangle here. So hold down the shift so we can create a square. Okay? So, and we decrease the height by two because we don't want to overlap with the stroke off our card. So just decrease the height by two. And now let's move that one step here. And there we go. So now we don't overlap with the stroke on our card. And I'm going to move this just one step here and then went to add the radius to nine maybe on K, I'm going to remove the border here. And we have greater than our shape for our, or our container for this image. So I'm going to take this image here. Okay? Let me just decrease the opacity of this rectangle and now hold down the shift so we can decrease this image width. Okay, let's move this symmetry right here and I'm going to decrease its size or just a little bit, okay. And I'm going to center that right here. Okay, so it should look something like that. This is just an example. So I'm going to select it, right-click and mask would trip. And this is our new shapes, so I'm going to place that right here. Okay? Alright, it fits perfectly here. And what we can do, we can add, for example, one line here. And it should look something like divider. So let me place there perfectly centered. Okay, so for the y position, I'm going to remove this 0.5. And now it will, it will pick perfectly to our, to our card here. And boilers shouldn't be this gray maybe. So this is just an example of course. So also what we can do, we can double click on this layer, on this mask. And we can, for example, move that image here. And it should look something like that. Or maybe decrease its size. Okay? And so we can have something like that. Okay? All right, so this title should be 16 from this image. And 16 on the top. Again, those two should be 16 as well. Okay? And I'm going to set those here, 16 as well. Okay, so it should look, for example, something like that. We can now select everything from here, control G to group that. And we can place that right here, 60 margin on a dog. Okay? And now what we can do, we can select this, click repeating R3, and we can now create a new grid, okay? And here we can set the same spacing or you can set the different spacing that's new, but this is just an example. So here will be 16 R k. And I will not bother adding a different image and different names for each ingredients here isn't just an example, so you can see how that it can look like and this is how our ingredients screen should look like. For example, of course, you can modify that on your own and add your own style. But for now I think that this is going to be very nice looking so well, that'll be all for this video. Don't forget to say this projects or Control S. And in the next video, we're going to design this instruction screen as well. 31. Instructions Tab: Hello there and welcome back. So in the previous video, we have designed this ingredient screen and we have added those ingredients in our list here. So in this video we're going to design instructions screen and here basically we are going to have also a list of instructions this time. And then we're going to display that in steps. So you will see we are going to is also a card. So let me just copy this screen. So by holding down Shift and just drag that on the right side here. Okay, and let's move this indicator on the right side, right there. Okay, perfect. We're going to remove this repeat grid. So let me just move that here first. And Control Shift plus and g to ungroup that. Let's delete all and this one. And this one, we're going to just leave this card view background. And we can delete this one. And we're going to copy one icon from here. So number click on this icon, press control C to copy that. Go back here and press control V to paste that. So the margins should be 16 on both sides for now. So let me see, let's angle up first of that. So it will be easier for us to work. And here, let's set 16 as well, so we can be consistent with those margins. I'm going to set that to 16 on the right as well. Oh, okay. Let me move that right here. So I'm going to create one more text. And the text will be on the top. And it will say, step one. Okay, I'm going to choose a different font, so 12 and maybe opacity of 60%. Okay, let me place that right here. So let me just copy some dummy text. So I'm going to copy this Lorem ipsum text control C to copy that control v here. And let's place that right there. And down below it's increased, discard the height. So we can actually display all of those are K right there. And this title and this icon should have the same color. And I'm going to set the color to green. And this should say, for example, or M lorem ipsum our k. So this will be, for example, the title of this step, step one. And then we can add another card to say Step two and so on. And we can increase the width of this text on the left side to fill this blank. So now we have 16 here and let me check. Okay, so we need to increase this to 16. Alright, so I'm going to select those two and click Control G to group that. And I'm going to place this. This icon on the center of this group. Okay? All right, so let me check if we, if we have the right margin, so I'm going to select all of that. So 16 on both sides, and here, 16 on every site. So that looks now perfect. And I'm going to select all of that cliff control g. Go back to this layer section. I'm going to rename this to interactions card. Okay, I can place that right here. Margin on the top 16. Okay, so now we're going to create this repeated grid as well. On the bottom. We can set it to the end of the screen if we want. And we can do the same for our ingredients. Because when you scroll down, it can display until the edge of the screen. So here, for example, we can rename that to two, number two, here to number three, and here to number four. Okay, so let me see just if we have the right, okay. Now we have spacing to 16, and that looks very nice. So as you can see, we have successfully created those screens for our temp. So we have Overview ingredients and instructions, and here we can describe the actual instructions for each and every step of preparing this meal for that specific recipes which we have chosen. And that will be all for this. Ok, so we have successfully designed our application using material design guidelines. And we have our many screens here. So let me just zoom in. And then what we can do now, I'm going to select this repeal grid and this one and hold Control plus Shift plus old. And just move those two right here. So now I can ungroup them, remove those three, and Ungroup that and remove all of those just leaving the one. And I'm going to rename this to ingredients card and this one instruction, current instructions card. So now I can add those cards inside our components. So here and this one, and we have our current. So I'm going to move this guard on the top so they can be together here. And we can now remove those two. We don't need them. And there we go. Okay, so we have designed a 17 screens here and we've used the most of material design components. We haven't cover all the components from material design documentation, but those components which are missing in this course, you can just go to that website Material dot IO and check the documentation for for those which we haven't covered. However, we have covered most of the components so you don't have to worry about it. So of course, this project will be available for you to download. So you can download this. Adobe's the project and you can experiment with that, and you can do with it whatever you want. So that's it. 32. Tabs - One More Thing...: Hello there and welcome back. So in previous videos, we have successfully designed our application. And there is only one more thing which I want to change here. So as you can see in our detail screen, when we try to double-click on this component or this union. And you can see that this rectangular for our tabs have the height of 56 dp. And I forgot to decrease that height size. And as you can see in this documentation of material design, and we can see that the height of this tab background is 48 and not 56. So we need to change that now and we need to edit this tab into our components. So first let me just decrease the height of this 248. And I'm going to select this union. And I'm going to click Control Shift class and G to actually ungroup those two. So I can create this easier. Okay, so there it is. So we need to move those three on the center horizontally, or K. Now we have the height of 48, and we need to move this, this tab indicator here, r, k. And now I can select this rectangle and this action bar, and then I can merge them into one. Okay? All right, so now I just need to move all my elements from here. So now I'm going to select everything from here. So just hold shift and select all those elements. And I'm going to move them on the top or K. And now it looks even better. So there is one more thing I want to do here. So I want to Ungroup this because as you can see, this is actually an ActionBar r components. So I'm going to click control Shift plus a g to drop that. And now I want to select everything from here. So first this union, then the title's, then instead indicator that title here, back arrow star. And this the status bar. Okay, so when I move that around, I can see that there is no any element left. So that's fine. And now I'm going to group this so controlled g. And let's rename this to tab layout maybe or just tab. Okay, so now we're going to add that tap into our components here. So just three this plus. All right, and now we're going to apply this same tab component to three other screens here. Okay, so I'm going to select this and basically deleted. And I'm going to put this component right here. Kay, so I'm going to Center That right there. Okay? I'm going to move all the elements from here. So just select everything here. So let me see if I have a selected everything. I'm going to hold down the Shift and just move everything from here, R, K. I'm going to move that on the top now. That's fine. Alright, next, in this one, let's delete this one and let's add, let's add this new tab. Oh, okay. Alright, that's centered here perfectly. And then we will just increase the size of this R K 16. On the top and down below we can just increase to the full height. Okay, and here as well as to remove this one, let's add new tab here. Are k. Let's move this repeatedly. 16 on the top are K and down below to the fore height. All right, so now Don't forget to say the Project Control S, and that's it. So now we have a fixed to that, a little, little thing, and now it looks even better. Okay, so that'll be all for this video. And in the next video, I'm going to show you the basics of prototyping with Adobe XD. So we're not going to prototype our or 17 screens are because that will take me hours to record all of the little things which we can prototype and animate. And of course, prototyping is not in the scope of this course, but still I want to give you a bonus and show you the basics of prototyping solid. Or you can use that knowledge to create your own prototype and maybe create a full prototype of this application as well. 33. Prototyping Basics - BONUS: Hello there and welcome back. So I end this video. I want to show you some basics of prototyping with Adobe XD. So well, when it comes to prototyping, my personal recommendation is to use software or tool named proto pi. And I have already made a full course on debt topic. So for complex prototypes, I always recommend using proto pi because, because a proton is a tool designed specifically for a prototyping mobile web and desktop applications. But still, in this video, I want to show you how you can also prototype with Adobe XD. So well, we're not going to prototype this whole application. I just want to show you a few examples here, okay, so you can access sub Prototype section here. So just click this prototype. The shortcut is 4t plus a number two. And now when you try to select one of those art boards, you'll see some are different layout then before in our design section. So here, for example, when we select one of those art boards, we can see that we can connect those are the boards with each other. As you can see in here, we can select different types of triggers, for example, tab and drag or time. So for example, in a few seconds, you want to navigate to each one of those screens you connect to. And you can also use keys and gamepads two, to trigger the animations, or even a voice. Down below you have a type of actions. You have a transition which is the most common. You can also use the auto animate and I'm going to show you how to do that, of course. And you can also use the overlay. They are few Moore's down below. You can hear selected destinations de animation, which we are going to use, transition animation. And you can also select a different usings here, the duration and so on. So you can remove this, this triggered by clicking this arrow and pressing delete button. So first, I'm going to show you how you can animate or create a prototype for those two screens. So let me first select this splash screen. And you can just connect this splash screen with this recipe screen. So just connect those two. And here, when you select this line, you can select the trigger. In this case, I'm not going to choose tap trigger. Instead, I'm going to choose time trigger. So I want to make a transition and emission from the splash screen to the recipe screen after a certain delay of time. So here I can say, as you can see here, we have some predefined. There are values, for example, 0.20.4.6.812. Or we can just type here a random value. I can type, for example, number three. And I want to use a transitional emission from splash screen to the destination of recipe screen. For the animation, I can use different kinds of animations here. I'm going to choose this time slider up. Here. We can select different things. I can select, for example, is in and out with the duration of, let's say, 0.06 seconds. So how can we play this, this animation? Well, there is a play button here, so desktop review, just select that and this window will appear. And as you can see, it automatically. And navigates from this splash screen to the recipe screen in a delay of three seconds. So whenever we present this Play button again, you will see that after three seconds, we're going to push this, this splash screen of the screen and this recipe screening will come into the foreground. So that's one of the animation which you can choose. And next, let's, for example, add some more animations. Case. So let's say we want to navigate now from our recipes screen to this detail screen. So for example, we don't have to choose or select the whole art board. We can double-click on that Aalborg to select a specific element here. And let's say I'm going to use this one. So whenever we tap on that, I want to navigate to this screen. Above on the top are k. For the type of animation, we can select a transition image now. And for the destination of course Details screen. We don't need to modify that. For the animation. We can select, for example, this time, let's say maybe the solve. Let's say, for example, is in and the duration, let's say 0.4 segments. So now what do you want to play that animation? As you can see, if we select this cardboard and click play, then it will play this, this preview from that odd ball which we have selected. Okay? So if we select this splash screen, then when you click play, then this splash screen will be and therefore destination in our preview. Okay, so now when we tap here, as you can see, the mouse is changing when I hover over this element. So when I click here, as you can see, it will dissolve into this new detail screen. Okay, and from here, I'm going to show you how you can animate how you can use auto animation tool. For example, this player, this snack bar message. So let's say when we click this, this star image here or star icon, we want to basically navigate to our new screen. So that new screen will be, will be this one. So here I'm going to switch back to this design panel or a section for just a second. And here I'm going to change the color of this star to this yellow. So let's get back to the prototype section now. And now select this star and then connect that to this detail screen. Okay, so for the type, we're going to select the Auto animate. And that means that basically it will auto animate those elements which not located in our first screen. And that is this snack bar and the color of the star. So when we select, for example, this one and play our preview from that screen, let's choose that. So when we select this or click on this icon, you will see that it will change the color to yellow and this snack bar will appear ok, so from there what we can do now, for example, let's try to animate this one, this OK button. So when a user taps this OK button, we want to basically just remove this snakebite, okay? And for that, we can create a new screen. So let's get back to our designs here. So I'm going to hold down Alt and shift and drag that on the top here. Okay? And from here, I'm going to remove this sname bar, okay? And I'm going to connect this OK button to this new screen. So let's get back to this Prototype section. And let's connect this ok with this new screen. And we're going to select Auto animate as well. So you will see that when we click this, okay, then this negativity will disappear. So let's first start from this screen again. Click play. So when you, when we press this, as you can see now that appeared, when we press OK, it will disappear. And now let me just and some more animations to it. So, so I'm going to copy, I'm going to switch back to design section. And I'm going to copy this detail screen once again. So just hold all ten, drag that right here for example. So here instead of recipes saved, I want to write a different message. For example, recipe removed. And I want to set the color of this star to white. Okay? Alright, so now I'm going to go back to the prototype section. I'm going to select this yellow star. And I'm going to remove this, this line. And I'm going to connect this with our screen on the right. So the auto animate will be applied. So whenever we press this yellow star, it will get back to the White Star. And we went to see the message or the snack bar saying recipe removed our case. So a select this detail screen, click Play. And now let's press this star. As you can see, recipe say click OK. Now when we try to remove that recipe from our favorites, we can just press that. And we see the message recipe removed. And after that, when we press or K from this screen. So let's remove this one because it automatically contains all the lines from this one which we have copied earlier. So let's remove all of that. And here when we, for example, press OK on the screen, we can get back to this one, ok, to the first screen, alright, and on the first screen with this some back arrow on that arrow or K. So now that arrow, when you click that arrow, we want to get back to this recipe screen. Okay, and we're going to choose transition R, k, for example, is in the soul. Alright. So now let's start from the beginning. Lets choose this splash screen, click Play. So after three seconds, we're going to get navigated to this recipe screen. So when we press this one, we will see this detail screen. And for example, when we press this star, will get this toast message. Say OK. Now removed it. Now click OK. Now click back arrow. This is just one example. So there are many different kinds of animations which we can add here in our design. And it will take us a lot of more time to accomplish that. But I just wanted to show you some basic software prototyping. And again, I repeat, if you want to create more complex prototypes, I would suggest you to check out my different course on prototyping with proto pi because a prototype is my personal recommendation when it comes to this topic. So well, that will be all for this video and for this course in general. I hope that you will have learned a lot by watching me designing. And the most important thing is always to check the official documentation for material design and see all the details and specs about each and every material design components areas. So thank you for watching this course until the end. By watching this course completely is telling me that you are seriously committed to your goals and, and I'm sure that you will continue to practice designing on your own. The best way to do that is to create your own design project and start working on that on your own. So again, thanks for watching and good luck. 34. Apply different Theme to your App Design: Hello there and welcome back. So in this video, I want to show you how you can change your application design team. So for example, we have started designing this application design with those color pallets, which you can see on the left side. So what if we want to try and apply a different theme colors in our app design and see how that will look like. So the one way is to just go from each one of those screen and change each and every component's color. But that would take us hours to achieve and there is an easier way. So I'm going to show you how you can change your application theme colors in just a few seconds. And first, let's find a new theme color. So okay, and I'm going to visit this material IR website. And here I have already chosen this material theme which I want to use. For the primary color, I chosen this one and for the secondary, I chose this one. Okay, So now I'm going to copy first this primary. So control C to copy that, go back to Adobe XD. And here for the color primary, we're going to select and click, right-click, then edit and just paste that color click enter. And as you can see, that color, color primary applied to each and every screen in our project. And now let's use all other colours. So color primary alight, r, k, l. Let's edit, paste in the new color code. Let's copy this dark color. Here. Paste, click Enter. And for their secondary, I'll edit paste this one. Go back, copy the lite version. Edit, paste that color. Go to the dark version of secondary, and edit that color as well. So now, when we zoom in, you will see that each and every screen has changed the colors. And we don't have to manually do, do those changes to go from one to the other screen and just change each and every component. Instead, we can just customize those colors inside our assets panel here. And those colours will be immediately applied to each and every component will have here. So as you can see now, our application and looks different and it can also be used to see which one, which one team will fit the best to our application. And that's it. So the only colors that are not changed is for our splash screen. But you can change the splash screen color manually so that's on you. But as you can see, our application and it looks very nice with this different theme. And that's how you can change your design theme very easily with just a few steps in a, in a less than a minute. Sowell And the whole bill for this video. 35. Final Word: Wow, so you came a long way to watch this video. I must congratulate you. There were a lot of information to process throughout this course and it's not easy to remember all those guidelines, rules, suggestions, and so on. But now you have all the necessary knowledge about where to find material design documentation, how to find specific components, where to get color palette generator and other important resources you'll need to start working on your own. Also, I would like to point out one more thing. So I would love to receive your feedback. It would mean a lot to me. And the main reason for that is because I want to improve this course furthermore. So if you think that I haven't explained some topic very well, like you are having trouble understanding something or you think that I need to upload a new video about specific topic are related to discourse, then please send me a message and I would love to hear you out and help you as much as I can. Because remember, I'm here to help you.