Pro level Android App Design with Adobe XD & Google Material Design

1. ♥ Whats inside this Adobe XD Android Design Course: Hello, everyone. Welcome to my course about Android material design using Adobe X'd And we will be looking at all the material design specifications given by Google Material designed to Point and I will show you what are the different specifications off different buttons list items and how you can design using Google material design guidelines and restrictions and create awesome looking APS. So we will be discussing all the possibilities which work even in Google material designed to point, which is the latest version off Google material design. Now the tools we will be using is that obey X'd. If you are a big did in Adobe X'd, you should take my other courses or any ones other courses about Toby X'd, because I'm not going to teach you the basics offered over 60. So if we will be using Adobe X'd for designing mainly and for handing off over designed for developers, we will be using Siplin God are you. And also we will be using fume or other online tools to generate nine patch assets for your android. APS. If you don't know about nine pass, don't worry. We're going to learn all that stuff in this course. And if you are familiar with Adobe, actually you should be able to design awesome looking android abs and we will be designing and android app, which is basically an actual android app for medical doctors in juke it. So this is what we will be designing the exercise. And before that, I will be digging into a lot off details on different specifications. How you can use different colors, how you can create color schemes and color teaming, which is a new addition into Google material designed to point, which is called teaming. So we will be teaming over AB using all the color, secondary primary all their stuff. So I'm going to teach you a lot of things in this course. So if you have any questions or any curies about what are any problems regarding this course you can reach me out. You can email me, you can message me. I am very responded. I really this born in within 24 are so you need to know. Don't worry about the sport I'm going to give you. So we will also be creating more lessons if you get any problem or you have some requests off creating any any other lesson, I will be creating that for you. So let's start designing Android APS on how we can hand off our android app. Store developers. Let's learned that together. See you soon inside this course. 2. ♥ How to watch this course?: So this is the important part. If you already have viewed my android design with photo shop course, then you are going to skip a lot of exercises and a lot off different lessons because they are duplicated in this extra course. So the lectures on live with and they have the heart and the start off their title, you are going to watch on Lee. These this is specific for only the students who have viewed my or have already seen my class, which is ah, android material design using for the shop. So, uh, if you have seen that whole glass you have done that glass perfectly. Then you are going to skip the lectures. So the only lectures you are going to view our which have some hard icon at the start off their title. So you can see in the right bar with the lecture titles are you need toe Just view the lessons where they have the heart. I gone at the start, so I'm going to show you my screen. What does that heart icon means and how you are going toe? Just view those hard icons. If you have already seen my and right material design courts with photo shop because some off the lectures they are the same 50%. Almost the material. Like what is Google material design? How all these things works. They are the similar. These are the similar content in board the courses. So I don't want to waste your time. If you have already viewed my course, then you are going to skip the lectures and view only the lectures with the heart. Okay, so this is the purpose of this lesson. So I'm going to show you my screen. What is that hard icon Looks like. So let's switch to the screen. Okay. So, um hey, as you can see, I am right now, adding these lessons in my add Mr Dror teachers view. And you can see this. There is a small heart. I go on start of this lesson. So this is what I mean. So if you see this hard, I got it means it is the new lesson and it is listed. What obey X'd. And if you have already bought my other class than this is the different different lesson from the other one. So you need to watch it so if you have. If you are starting this class from scratch and you haven't washed any off my other courses or my other classes on end are designed, then you can just watch normally. Okay, so I hope you have understood the concept off this heart and how I am. You need to wash this class. Let's move on to the next lesson. 3. What is Screen Resolution and Density: now in this section, we are going toe. Start with the different type off screen resolution screen densities. What is DP I screen resolution and what is the SP? Scalable pixels and DP density Independent pigs is so These are all terms you need to master before you step into photo shop or adobe X T or even sketch to start designing your android abs. OK, now, in this less and first we're going toe, take care off screen resolution versus screen density. Okay, so in this lesson, we're going to cover these two. Let's move on toe our first slide. Now. First, we're going to look at what is the difference between screen density and screen resolution . Screen resolution is always in pixels, which is that my mobile phone is 9 20 pixels by or 10 80 pixels by 9 20 pixels, which is full HD resolution or 12 80 pixels by 7 20 or 5 40 pixels by 9 60 pictures. So these are different pigs, ill resolutions that how many pigs ills are there on your screen? Okay, so it is the total number of pixels in a display device. It could be your led screen or it could be your I make five k screen, so there will be a pixel count that these many pixels thes many doors digital darts are present on this screen. Okay, now, about the screen density density means how dense this screen is with the number off pigs escaped. So it is the count off number off pictures within one inch off screen. Okay, so to like, you can see over here in the right side, there are two screens off the same size. OK, so they are both, like five inch screens or four inch mobile app mobile screens and you can see the number off pixels on them are different. This is more than the right one is more dense than the left one left. One has the same inch size display size, but it has less pixels. So the images on this left screen will be less crisp. Okay, so on And the images on this over over here on the right screen will be more crisp and have more resolution and more pixels. So it is just like you might have heard off the term on you when you print something that this is a 300 dp I print or 600 peopie I print So it is basically home money points the printer has printed in one inch off the paper. OK, so if it is 600 peopie I or 600 FBI door spot inch, it is going toe print $600 into that single inch. Okay, so it will have more colors and it will live more natural and have more crisp. You can say experience. So here you can see there's example that 10 80 pixel by 9 20 resolution and density is 401 dark spot inch or DP. I okay, I think you have understood what this actually mean. Now I'm going to show you examples off my two different mobile screens and their actual resolution and their density. Okay, now you can see on the right side I have this introspect. It is a mobile app, Android app. You can install it on your android phone. And actually, if you go to this display tab, you can see different sizes over here. Okay, now or we're going to go to this horizontal density and vertical density. You can see it is 403.41 db I So this is the actual dp I, which is dark spot inch off the screen. It is very high resolution screen at the top. Over here, you can see 10 80 pixels and on the left side you can see 1920 pixels. So it is an activity almost. SD display Foon. And it is from Samsung basically. And this is actually the screen off my own mobile device I'm using. So the screen sizes 5.46 inches. Okay, so it is basically this diagonal distance. Actually, this is diagnosed distance. It is not the distance from right to left or the whole much wide it is. So based on these calculation, actually, what I did is I divided my total number of pixels divided by my dp. I and I got the size off picked off my screen. OK, so if my screen is 10 80 pixels wide, I'm going to divide it by the door Spottings Rdp I 403.41 and it is going to give me 2.67 inches, so it is almost 2.7 inches wide. Okay, so this is how we are going toe. Get the relationship between screen resolution and DP eyes off screen densities. Here's another example. This is my old Samsung phone android phone, and you can see what Here it has almost five inches screen almost, I think, half less than the previous screen. But you can see over here the horizontal density is almost half to 21 GPS. So the images on the screen you can see over here even this screen short is looking a bit pixilated and it is not as much clear as a previous screen. So this is a different difference between DP I. If you are purchasing some mobile phone and rifle, you need to know how much dp i disporting. Right now, there are foods that are supporting 6 40 db I. So they are very high resolution and very accurate images. You can see the videos and colors and everything more accurate than this one. They are more dense with exiles with colors, so here you can see the screen. But I have calculated is 2.44 inches and it's actual pixel sizes. 5 40 pictures by 9 60 pictures. So I hope you have industry this density versus resolution. What is resolution and what is density? Also, if you go to the led screens or the most monitors, you can see there are two. Okay, is four K's and full actually screens. They have different resolutions and different exit density is apple devices, even if there you are using a Mac book pro or I American and I make their density is always almost double than Windows or normal screens or PC screens, although there are a lot off new allergies and monitors that are coming along and they have more density and more resolution and create a pixels and dance pixels in smaller spaces. No, I hope you have understood this difference between density and screen resolution and screen density. I hope you enjoy this lesson. And don't forget to install this introspect Abit is free and move to this display tab and see what your devices are sporting. What is the density off your device? What are the pigs is pixel resolution off your device and I hope to see you soon in the next lesson 4. Relation of DP and PX: in this lesson, we are going to talk about what is DP, which is density, independent pixels and what is actually pixels. So what is the difference between these two and how you can use and convert these toe with each other? If you are using for shop or any pigs l based designs off Okay, so let's get started now. On the screen, you can see there are three different devices with three different densities. 1st 1 is 1 60 dp, which is very less dense and very have very low number of exults porridge. Then there is 2 40 p A, which is a medium dp I and then we have the street when TDP I or extra high definition high definition and dark spot in your definition screen came. Now you can see there is a button or at the bottom. Over here. You can see this is a blue button and dark blue button, and it's the same size on all these three devices It is. And if size is in pixels now you can see on this left screen we have less pixels. So it is looking create. Now, on the middle screen, we have more pixels. And now this same exercise is looking a bit small. Now, on this screen, we have too many pictures. So we have This screen is dense with exiles backed with pigs. So if we are using some pigs ill Meyer mints, it is going to happen to this. So if I create a button and I want it to be accurate on all these three screens, what should I do? I should create another monument. Are another scale toe my years. So it is going to be density independent, so it doesn't depend on density. So now you can see it would here, if I define this button in DP's are density independent pictures, my programmers are it is going to look the same on all these devices. OK, so it is going to scale 1 50% on this 1 200% or this one and it is going to be it is going to solve all my problems. So that is why android, a material design. They came up with this pixel millions unit, which is DP dist density independent pictures. So these pixels, these monuments, if you give your quarters that my button will be 200 dp void by 36 TB high. It is going to remain the same proportional to their screen size on all these three devices , it will appear the same. Okay, so this is the problem. Why they created DP instead of pixels. Because pixels are going to look smaller once we get onto Ah, higher density screen. No, I'm going to show you an example off the same introspect app I installed on my android device. And you can see if you look at the top over here the pigs, ills art and 80 pixels. Part avert in DP is 3 60 db. And now if you look at this screen, our pixels are different, but the density independent pixels are the same. It is 3 60 dp void. Okay, so if you define a button like a 300 DP for the screen, you want it to take like, 300 DP, it's it is going to look the same on these both these devices, even if their screen resolution or the number of pixels are different. So this is how we are going to use DP's. Our sizes will be the same and ah, the main DP monument for any mobile app screen. If you are using Android system and write material design, it will be 3 60 dp by 6 40 dp Okay, so just keep this in mind and we're going to take care off all your varies in the next lessons. Don't get confused at how I'm going to use these DP's in my photo shop or any other design software. Okay, so let's get ahead and see you soon in the next lesson. 5. Dp to Px conversion Online Tools: in this s and I'm going to show you a few online tools with you can easily convert pixels into your DP's on. And this is one off them pigs. Ill pigs place city and you can see over here at this bottom you can enter the pixels. 48 pixels. This is the pixels. You know, DPS pmm inches points any any my year meant you want to convert toe dp's okay, And you are going to select this mtp I Right now I'm goingto take care off this in another lesson. These are exult and city buckets and keep this these settings as they are and you can see if I change it to 100 and now you can see if we start with this MDP I My 100 pixels are going to be same as 100 dp's also on this DVD p I it is 1 33 pigs is the same 100 db on HDB I screens. It is going to be 1 50 pictures on excess dp I these Atmore density screens, they have higher density. You can see this is 200 pixels double the size off the actual size. This is 100 pixels. But on this X db I it is double the size. Then it has tripled the size that it has four times the size. That is why we call these screens 1.5 x two x three x four X s. So that is why we call them like that because they're double the size or 1.5 the size or something like that. So this is how you can convert. You can also select on these different launch an APP icons. These are different sizes. 36 48 pictures and these are all pixel sizes. 1 44 96 Action bar Small contextual sizes, notification icons 24 pictures and you can see at XX dp i This 24 speaks. ALS is going to have multiplied by three because it is three x screen. 72 pixels is the size and on four exit is 96 pictures because we have more pixels and more dense screens on the higher resolution or higher DPS screens. Now let's look at another stool, which is going to be more simpler than that one. Now you can see I'm going toe check this baseline This is the 1 60 MDP itis going to the baseline off your all different designs are for android material design. Now, if I select like 50 pixels off size, you can see that at L d P i, which is point sound five x it is basically multiplied by 50.75 So 50 db will be 37.50 Pigs is right now. I don't think there will be maybe four or five people on the whole planet who was using this LDP. So we are going toe. Take care of all these force for five resolutions north this one. So mdb eyes basically Avanex, which is the standard baseline. So all the deepest will be equal toe the same fictions than we have actually P I, which is going to be 1.5 so multiplied by 1.5 it is 75 pixels, so you can see you're getting the relationship between DP's and pixels on different these densities and screens resolutions and you can see over here to exit is going to be multiplied by two, which is for ex sdp I and then XX sdp I three x multiplied by 31 50 triple X HDP I It is going to be multiplied by four, and you can see here we have 200 pixels, so 50 50 DP is going to be 200 pixels on this screens these screens thes large or high density screens and same for others. Okay, so I hope you haven't destroyed that relationship on how you can calculate the different pixel sizes for different DP's on different screen density resolutions. One extra work, three x and four x. We're going to talk more about STP XXV p A. In the next lessons. I hope you have enjoyed this lesson. Let's move on to the next lesson. 6. What are Density Buckets?: Now we're going to talk about what our density buckets and why do we need them? And why did we want to create our graphical assets? Our Britain's our icons in multiple different versions off each bit map we're going to create. Okay, So if you are designing one button or one icon for your android mobile app, you are going to extract the same icon in tow almost three or four different sizes. And why do we need that? Because we are going to support different devices. One has more pixels. Mixer density. One has less one and one another one which is very high density. So we need separate icon separate sizes off buttons for each off them. Otherwise, what is it is going to do? Is android system is going to scale your one image? If you are using just single image, it is going to scale your image and it is going toe blur. Blooding is going to occur on your screen. Okay, so pixelated it will look blurry and pixelated, so we don't need that. So we are going to study that different density buckets and there are like tons off different devices which are which have different pigs, ill revolutions and density buckets. And we're going toe. Categorize them into three or four on this different buckets. OK, so let's see. What are these? Okay, now on the screen there are five different density buckets. One I have omitted, which is LDP, which I I don't think that you need toe design for or developed for. Okay, so this is their baseline MDP. I won 60 GPS. So any device that have resolution or density that is closer to this 1 60 it is going to fall into this bucket than any devices that have 2 40 p a r closer to this 1 20 toe 210. They are going to be into this density, then extra high density screens. This is two X, all the screens that have something closer to 3 20 They're going to fall into this. Then we have 40 db i or XX sdp I three x screen and all the different screens that have high extra extra high definition screens. They are going to be over here, density, so against the screens. And then we have this extra extra extra high density screens that are going to be 6 40 db I and they're going to fall in this category. Now you can see that I have shown the same blue box or with different sizes on the screen. The reason is that this is the same pixel size off the same burden that is going to appear on different screens like this. Okay, so if we have this button which is this size, it's excises like maybe 200 by 100 pixels. It is going to be 350 pictures like this a big bit bigger, 1.5 times bigger on the screen to Buddha. Two times bigger on this one, three times bigger on this one and four times bigger on this one. So you can see how we can create different assets for all these screens. We need one asset, and we need different multiple sizes off that asset for sporting all these different DPS screens. Now we're going to look at an example Now you can see this is the image taken from Google material design their own line documentation, and you can see or hear they have shown how different sizes and how different icons or images they are going toe have different resolutions or scales on different DP eyes or density screens. Now you can see this is our baseline. So if an icon is like 48 by 48 pixels on this baseline size, it is going toe a bit bigger. 1.5 times on, Http. I than on to X at X HDP I extra height and density screens the next two extra high density skin so you can see how this size is. Skilling one x 1.5 x two x three X and four x So this is you need to keep these points in your mind that we are designing maybe designing for this one, or we're going to use a template which we were. We're going to design for necks and we're going to export our graphics into all these different sizes where you can do that in for the shop and obey X t sketch on any software you're using. So don't need to worry about that. We're going to take care and off that in the next lessons. I hope you have understood understood, boy different this DP eyes, buckets, tensely buckets have and why do we care about them and how we can. We're going to expect different sizes off different images for sporting all these density and density high density screens. I hope you enjoy this lesson. Let's move on to the next lesson. 7. Online tool for Screen Resolution, Device size and Density: Okay. Now I'm going to show you a very simple tool, which is from material design material dot io slash devices, and you can see here you can see all the different heights and written pixels. DP's in points aspect ratios off your devices, inches and centimeters, screen dimensions and the platform, and also you can see at the right side, says Density. So if I click on it, you can see these are the screens with one mdb I or medium density devices. Chromebook 11 chromebook 30. These are very big dimensions you can see these are inches, and if we go toe, I make you can see it has different sizes. And if you browse through that, you can see if you go to this three X, you can see there are 5.1 inch devices, and you can see here we have Sony Xperia and Itis 5.2 and 2.5 is the village and 4.5 inches the height off their devices. So these are all the different resolutions, and you can see here's the screen resolution. Here's the surgeon in DP's, and also you can see there are different DP dimensions for other devices like Google Pixel Excel Order. So if you are designing for some specific device like Nexus five for Nexus six like you can see or hear next a six or six p, they have DP's dimensional four Lemon by 7 31 But they're going to fall into 3.5 XXX as dp I. So these are basically taking that sets from this density bucket, and there are different sizes. You can browse around if you want. If you're looking for specific device, you can look the aspect aspect. Ratios. DP's Hide A screen resolution in Pigs is also screen density, screen, dimension and inches and centimeter, and also the platform on what they're working. So that is all about this. Material design devices skied, and you can look out for all the different sizes if you want. Oh, I hope you have enjoyed this lesson. Let's move on to the next lesson 8. What are SP type sizes in Android Material Design?: now in this s and we are going to talk about scalable pixel or SP. This is another unit which android material design is using but for different purpose. Now you all already have heard and we have talked about DP density independent pixels for your screen resolution and layouts and different sizing different buttons and asserts. But this SP is four force like similarly like BB. It is for us for force and it is going to save all the four settings in endured material design. So whenever you're going to give your size is your four sizes to your developers you are going to talk in sp's and scalable pixels. So your developers know that this designer really know my stuff. Okay, so the primary difference is that SP ndp they are actually the same. But SP is going toe save all the settings. You therefore settings how large it is. Very it's bold or north or something like that. So this is going to be a relative toe your screen sizes. So if you are using SP in your four sizes, it is goingto be relative to your screen and densities, and it's going toe the same size, It is going to appear on the same size on different devices. Now I'm going to show you an example off 20 s before so on different densities. So we have our next 1.5 x two x three x and four X screens. Now you can see I find amusing 20 pixels which is on mtp I because on MDP I this is the screened and stevia. My actual screen pixels are going to be equal toe the actual SP or DB. Okay, so 20 s p is equal to 20 pixels on my mtp I which is our baseline density. Then we have 1.5, so you can see 20 multiply by 1.5 30 30 pixels. Now you can see this border is basically changing because just take an example like this is a burden and this is a text on the button. Now, if you see on this size the bitterness small so the text small looks great, but on this size, that text if you use the same pigs ill value off the text over here it is going to look very small and it is going to be unreadable. Lead ability will suffer a lot. Also the readability. So what we're going to use is we're going to use the reality four sizes, which are SP. So this is going to be 30 because it's actually and it is going toe translate SP, which is equals to 20 s, be multiplied by 1.5 30 20 multiple ever to physical, 40 and 20 multiple ever three is equal to 60 pixels and 20 multiply before 80 picks is. So if you are designing for three X devices or two weeks devices of 1.54 X, you need to multiply your four sizes with that density ratio and when you are going to talk to your developers about it, you are not going to give them sizes in pixels. You are going to talk into Espy's now. This is actually the different typographic scale off android material design, which is from you can see here we have the button, all caps 14 sp, medium size. They're using a robot afford. This is basically roboto and you can see this is the size for captions. Regular 20 sp body size, one body size, too. You can use 14 SP regular. All you can use medium 14 SB or medium SP for desktop. So if you are designing for desktop using material design for the stop applications chrome or something like that, you are going to use these three values. Then we have titles who can see medium 20 SP Headlines are going to be 24 SP and above. You can see this play one is also heading Desperate was bigger heading display trees a lot bigger heading and display for is very, very big heading. So this is basically called typographic scales and I have talked a lot about them typographic rhythm, radical rhythm and typographic scales in my course typography for designers and developers . So this is how they have developed this SP. It is going to remain the same because it is not dependent on pixels. It s capable pixels. Basically, I hope you have understood the concept off SP's and ah android material typographic scales and how we're going to use different typefaces and sizes for different display of on display. Two titles subheadings, body bodies basically for paragraphs, captions and burdens. I hope you enjoyed this lesson. Let's move on to the next lesson 9. ♥ How DP unit works in Adobe XD: okay now in distance. And we are going to talk about on dried design in using Adobe X'd. What file size or template are art board we're going to use. This is Adobe X T. And on this screen, this welcome screen you can see there we have this android mobile, and you're going to click it and it is going to start with and right Mobile heart book. So it is very easy in this, so be extra because it is not Ah ah, pigs, ill based software. It is a vector based software, and it is easier to design in it. Okay, so just drag and elipse like that, and, uh, Jack, some image over here, and you are going to create something similar to that same again button, and I'm going to create something over here. So if you don't know how to use this adobe x t, you can take my adobe X'd course, I have ah, full fledged course from bigness toward Mars level everything I have discussed inside this course. So if you don't know how to use it, you can go and check that course out. Or you can even message me toe get that course on a discount or something like that again. So we're going to use some text over here. This is me. Something like that. This is the same exercise I'm doing for Ah, in photo shop. I have didn't photo shop in the previous Listen that you are going to do over here, and I'm going to use this vehicular or here like this, and you can use something. Hire me something like that. So I'm going to drag this image off my my daughter. And you can see what? Here, this image and one decks over here. And also your name. Yes. Sees, or something like that. And I am going to take care of the rest. Okay? So create something like this in Edo, Android Mobile and Ah, one more thing. I would like to if you click on this art border with size. Over here it is 3 60 by 6 40 If you want to increase the hide or you want to design for something like 411 of it and ah, 411 with and 700 something 1937 was the height for next six or larger devices like, Ah, Samsung s eight or something like that you can specifically designed for them If you want to. You can use something like this Now there is one more thing I would like to discuss over here, which is different from photo shop. Is that in a no b x d You are always going to design in one X. Okay, So if you go over here and go to export overhead export and selected, you can see if you go to Android, you are going to select which MDP I you were using. Okay, so you are go always going to select this 100 MDP I and just going to export all your assets with that? We're going to talk later about this asserts and these problems right now I want you to create something like this and would in the middle. Okay, Something like that and just exported are take a screenshot off your this design and summit in this assignment. Okay? You can also submit your work via question answers if you want. Oh, so if you cannot submit using assignment or you might have skipped assignments, you can do that later on. So I hope you have enjoyed this lesson, how you're going to create different art boards on what X size or density you are you are designing, going to designing. That'll be X'd. Let's move on to the next list. 10. ♥ First Project for students: Now, this is the time for your first assignment, and it is going to be very simple. You need to open up your Adobe X'd and create a new document which is going to be the art board off Android Mobile, which is 3 60 by 6 40 You already know how to open up this template. And if you don't know, you can click on the art boards and let me the selected and you can see here we have this android mobile and you can also excesses from the first screen off this adobe X t. And now what we need to do is you need toe. Use your image if you want. Oh, if you don't want to use your email, you can use any other image. But I prefer that you use your image like you can see. This is my image. Use something like this avatar image. Then you can say something essences or, um, dem bases or whatever you your name is. Okay, then you are going to write some introductory text about yourself maybe. What are you doing? What job you are doing? What are you looking for on what are the things you like What? What are the things you like reading? Like you can see here, I have shown my interests, and at the end, you're going to use this burden. Uh, toe have some shadow on it and white text. And it is going to be all caps because most of the buttons in android material design they're all caps. Now about the size is this thing is going to be 1 10 by 1 10 dp which is actually the same size in adobe x t. So just 1 10 by 1 10 this is going to be 20 sp or ah, scalable pigs ills. Then this is also going to be 16 size and this is this text on this button is also going to be 16. The button size will be 200 by 48 BP's So why I am getting giving you this assignment just to make you familiar with all these sizes on that that dip sizes and sizes used in adobe excuse They are going to be the same you are designing for Avanex. Once you have completed this assignment, you are going to take a screenshot off this. You can also use this free software cording to take your screen short. And once it is like in start, you can select on this and you can It was something like that. Capture screen severed and uploaded. And show me your designs. Game another way off Extracting your this android material designers goto export all art bores and we're going to select this android and select a four folders where you want to export and export our our art bulls. Okay, now we're going to browse toe that for export folder If you double click it and you can see here we have it. And ah, let's use something in the middle, maybe excess dp I use this size and just upload it, OK? And I'm going to review it. So just to make sure that, you know, understand some of the things and how you can easily start designing with Adobe X'd. So if you have difficulty using and obey X t, you can take my other course sort of X T design prototype in Collaborated, which is going to cover all the basics. Okay, so I am looking forward to seeing your assignment, your face, your likes and dislikes and what are you planning in the future? I hope to see your designs soon. Let's start making your first assignment now. 11. UI Regions Of Android Material: no. Before going into our design, we are going to get familiar with what are different structures and water. The different you user interface regions. And what are their names off Android material design? Because we we need toe get familiar with it because we're going to talk to our developers about that. And when we were designing, we need to know what this region name is in Android system designed system. So let's get started. OK, now, first, we're going to see this image over here. This is material are your guidelines and you can see what? Here. This is our Akbar, which is you might have seen a lot off APS title over here at Primary Toolbar. This is content area. This is bottom bar where we have bottom navigational here. Some icons, maybe three or four. This is basically this light blue Seoane type color. This is called floating action button. Now, on the left, you can see this is side never, which is also called navigation drawn. Navigation drawer. Knave draw. Okay, so it is on the left. And if you tap over here on the hamburger menu icon, it is going toe slide in over here. Now you can see this is right. Navigation. It is going to expand some off the areas. If you tap somewhere, it is going toe slide in. But you can see there is a little bit of difference between side. Never. And right now side never have more priority. It is going to take the whole screen. Whereas this right navigation, it is going to leave the status bar. Okay, so the top one, which is the darker one area, is called status bar. Okay, now, if you look at the establish structure, it is also the same. Just a bit expended. We're not going to design right now for tablet. But if you're designing for tablet and that stop, you need to see these because there are few more options available here. Like you can see. What? Here and desktop more. We have a secondary toolbar or another toolbar with the primary tool, but because we have more space. So this design material design is really awesome. It is expanding with its, you know, screen size. Okay, so let's move on to the next. Okay, So you agents, you can see vertical dividers. How they are using it This is horizontal divider. Over here at the top. This is vertical divider. Just asked gray line and ah, separating the left area from the right. Okay, so they have said that if you want to create something like that, you need to use white space rather than, you know, creating many different regions. Don't try to create too many regions, just one region and used white space to separate other elements, like cars and other things. Okay, so let's talk about now. Tool bars. Now you all have seen the stool bars at the top. They have different tools like these. Ah, such icons. Thes three darts, which is far more. I was just going to show you more many items. And this is the title over here. These are called tool bars and you can see there are many variations for these tool bars. There are slim tool bars, a bit provider tool bars. And then there are tool bars that have detached. These are for tablet and desktop views. This is another toolbar called card toolbar. You know, you can see here they have used some card style off the way interferes for creating this toolbar. This is floating toolbar and this is detached. OK, so I don't want to get into ah lot of details, but you need to know that these are told bars this is bottom toolbar because many times their designer, they are going to talk to their developers and I think they should be on the same pace. They at least know how on what to call different elements and how they are going to interact. Okay, now the main thing, let's talk about this air. But this is very important because every app is going to have this Akbar. And once we're going to start designing, we're going to look at its different specifications. But right now we are going to look at what are different portions. Thes are action icons. These are never icon, which is going toe slide up our navigation drawer. This is many icons to see more menu options. This is such and these are more action icons. You can put one or two icons over here. Okay, so here are different variations off light and dark teams. You can see over here. This is like him. Talk to him. You can also see the shadow is a bit lighter in our here of a darker over here. Okay, so there is one more thing. You can also make it transparent. So any color that is on the background off your app on the whole screen, it is going toe blend into this. So these are different options. These are another app. Abstract colors like I have this blue color and a bit darker blue for this status bar. And we're not going to look at these design specifications right now. Okay, Now you can see here we have ah, menus. And ah, you can see these are menus. When you step over here, you're going to see this or venue tap on this area. This is a filter icon. This is the down arrow filter. It is called a strike on. And if you click on this one, it is going to show this. Okay, So a little bit about how this status bar is going to look like and how you are going to, you know, use it in android design system. Okay, Now you can see it is going to be at the top, and it ihsaa I'm not going to go into the sizes We're going to go into the sizes are in DP's in the next lesson. Right now, we are just, you know, going to look at what are different areas and how we can represent them or how they can vary in different appearances. Okay, so I'm going to go down now. You can see over here. Here is another content based colors they have taken from this background. This is a bit transparent one but it is black. 000 20% 0 back. Ok, so they have Jean. They are changing the opacity I really love how they, you know, change things in there on dried design system or android material design. Now here you can see we have the stock status part. This state is barred from taking the color from over here. This is life status bar 70% white f f f. So there are many variations you need toe. Keep your mind open that if you're designing something in android material design, you can have many variations for this cop title. But now this is Android Navigation bar. It is present on some off the phones. Mostly Google phones, I guess. And it is going to be dark and light. Whatever. You can use it if you want. Oh, okay. So let's talk about the side. Never know the side never is going to take up this much space and left some some off the space over here. It is going toe overlap on all the elements behind it. Okay, so these are different examples. Let me show you. This is the example of the left. Never. And let's see what? His example off the right now. Okay, so I'm going to play this. So this is right now you can see the sliding inside just in the content area. So it is more about this image. So they have opened up the image you can lead. You can go back. Okay, so this is just right now is actually acting as additional men. Men, men you for this image. Okay, so this is the difference. If you are wondering why there is right now, but left never the side. Never. This is the difference. This is going to take the whole screen, and you cannot do anything over here showing some off the screen behind. But it is going toe the right now is going to take the whole screen, and it is going to show you more options about the same content area. It is going to just take up the content area, not the whole screen. Okay, now these are white frames or cards, I guess. Okay, so it is just, um just keep in mind that most of the content on android their design system it is 100 material design. It is in the form off these cards, and they are going to be like this. Have some shadow. This is the button on. And we have multiple cards. Take an overly other cars like that and you can see what here carded content and expands and collapses. And this is a focused their bar on mobile and other things. So these are all the elements cards, navigation bars, status or system bar, primary toolbar content area, bottom bar. Okay, so I am going to give you another example. Like me show you this is ah, bottom bar. You can see here is the navigation and navigation, and at the top off it, you can see we have favorites explore an account similarly, this one and this one these are three teams and these are basically the bottom navigation which is goingto be global for the whole app. Global means that it is going to stay. Stick to this bottom during the whole application or some portion offered. So this is, I think, all about all the different regions you have studied all the cards Stop status bar at a bar content area bottom navigation left never or draw left jar and right navigation and floating action button. Okay, So I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 12. How Material Design Works: Okay, let's look at what is the team or the basics off Android material design. Now, this android material design is based on paper stacking on top of each other. Now, you can see in this diagram on the right there there are two elements. One is this paper, white paper. And there is another button or and a rounded shape Paper on top of it. You can see this is Z excess. So everything on your material design is elevated with easy access. Okay, so every element have ah, material thickness off one dp. Okay, So, like people, people have very light thickness. Very slim paper, but it has some thickness. Okay, So paper and things on top of each other, just similar toe stacking paper on top, off each other, like origami. You can You are creating few design or interfaces by putting different buttons. Different air bars on top. Off the base are the base paper. Know how much farther apart? One element is from another one is going to be mired in Z excess. How much it is? Ah, elevated from the base. Okay, So different elements have different animations and shadows, but right now we're going toe talk about that in the next lesson about elevation and shadows. Different material shadows. Right now we need to see and understand. This is the excess y axis and excesses thing that how much is a thickness off? Something like you can see your head here is a smartphone and it's sickness is mired in Z OK, z excess it is going to be taking It is going to have some three d shape. If we remove this easy access than it is, just do the or two dimensional. So to make this three d effect and these buttons and shadows, they are using basically two shadows. So here we have, ah, one shadow from the key light one light and the shadow from the ambient light. Ambient light means that is going to be very sharp light and you can see that have soft shadows on the side. And there's we have lighten dark shadows because the light is somewhere over here at the top and combining both these they have this mixed shadow, which is basically android shadow. Okay, so all this is working with the Z axis so you can see this paper. Are this button or this element is elevated from this background using this shadow. So they are, you can say, pretending to be like three D elements and using the shadow and this elevation. In the next lesson, we're going toe. See what are different. Shadows and elevations and water, different elevations for different elements. Okay, so each elements have different elevation, how much higher it is and how much elevated it is from the base. So let's move on to the next lesson. 13. Material Shadows: Okay, now, in this is in, we're going to look at Android material design, shadows and elevation and how they actually work with each other. Okay, Now, before going into any more details, you can go to this material daughter, your slash guidelines slash resources life slash shadows daughter CML and no, you can see here we have sketch illustrator and for the show file. And you can also open up this sketch file in Adobe X'd. So if you have a no, be extra, you can use this one. Okay, so they have to shadows umbra and penumbra of one is darker. Shadow this one. And this one is lighter or soft. Shero and ah, they have all different, you know? Ah, guidelines for how much or how much it is going to spread how much OPEC it is, how much blood it is going to have. So these are all different settings. But we're not going to remember any off that because we can already download these three for a show, file our illustrator file or sketch file and use them. Okay, Now let's goto this elevation effect. Okay? Now elevation means that how much on the distance in Z axis is from one element to another . So if one element like this one is at the bottom, you can see it has to dp elevation. It has some shadow and you can see it is elevated from this base. This is the great base at the Eric. Over here it is to dp elevated from the base. So it has very soft shadow, Not something. When something is going to be more elevated, it is going to have more shadow and more spread off the shadow. Okay, so it is very natural. Now you can see here we have This is the diagram. Here we have the Z axis And if ZX is moving at the top and the distance between these two elements is 60 p So basically the elevation from this one and this one is 60. Be elevation means that the distance from the top off one element this bottom one, the two afraid so this one. Okay, so the distance between this one and this one is going to be the elevation. But how much? This stop paper is elevated from the from the bottom one. Okay, so if you have, you are you have two hands. Just overlap the one at the top and see how much the distances between port off them. This is basically the elevation. Now you have caught the idea off elevation. All this elevation is controlled by shadow. If you If something is more elevated, it has more shadow spread around it and it has more shadow, more darker shadows. That is all we need to remember. And you can see. Here are the arresting elevations off different elements. Now, if something is more elevated like you can see elevation and DPS 24 it means that it is going to be at the top off every other element. So if some dialogue boxes appearing or some color picker something is appearing on the screen, you cannot do anything else. So this is going to be have most elevation and have more shadow rounded than we have Navigation draw Rij. Our model bottom sheet than 12 dp is floating action bar. You have seen them many times the circled plastered in and then we have sub menu. Then we have this bottom. They're barred manual cards. They have a DB off elevation and then we have the six floating action button snack bar. And then we have this Abbott snack. But it's basically status part a little bit of staters, that something has been done or your email her emails have been deleted or something like that. Then we have this re fresh indicator Quick country Such bar such matter that all this it has three elevation off. Three dp. Then we have card resting elevation, raced buttons, arresting elevation. These are the buttons that have ah, arresting means that they're not being pressed or they are not being touched. So once they are pressed, they they're going to have some different of shadow effect. And this is the switch. It has one dp so almost have no shadow. Okay, so here we have the diagram where you can see what Here, 24 these are the elevations so and this is basically easy access from bottom to top. And this one is at the top most. This is overlapping everything else. This is overlapping all these elements, and this is overlapping all the elements below it. So this is how this elevation and this huh? Android material design shadows are working Now. You can see here we have this floating action, but this is a very nice example. And then we have this AARP are now you can see at bar is a bit down in the elevation, so it has lighter shadows, OK? And if you look at this floating extra bar, it has more spread and more doctor around it, it has more spread. So it is up in the Z axis, so it has more shadow. So this is how it is going to work. Then we have this app knave drawer on the left side. You can see what it has Mawr elevation containing both floating action action button in a bar. So it is overlapping both off them. Its shadow is overlapping all the elements behind it. It has elevation off 16 so you can see floating action. But it is behind it. A body is also behind it. So these are a few more examples how these shadows are going to work. They have said that this floating action have some good shadow because it is elevated. It should show elevated over here because this you can see this Ah abaaoud at the at the back. It also has some shadow so you can read all these. What are different shadows and what are different values. But we are not going to remember all this. You can see we're here to DP Arresting button and pressed State is it's going to be a DP means that button is going to be elevated more. Once you press it and interacted with it, it is going to come up in the Z axis. Similarly, this one you can see what here? Once something is pressed, it is going to have more elevation and more softer shadow. It is more up. You can see prostate is double the resting state. Resting state means normal button which is not pressed or in traffic and interacted with. And once you press it, it is going toe, move up or down and have some shadow differences. Here we have this card card is basically this one this information card and it has resting . Stared duty be vested. 80 be No, you can see it has more shadow because it is raised and then we have these menus sub menus . They have more. You can see the sub menu have more shadow because it is at the top off this menu. Then we have these dialogues. They are going to be at the top most. And then we have this snap drawer 16 dp It has shared over here on the right. This is mortal bottom sheet. It is called. You might have seen it when you try to share something from some app like Facebook or something like that. Oh, our share your picture and try to click on the share but And it is going to show you you are going to share Gmail. Hang out Google or whatever. So it is called mortal bottom sheet. Then we have this three fresh indicator three dp It is also button and then we have these such barcode country. You can see this is such bar and it has a lasting say to screw State three dp on this is snack bar. This is basically just a single line action. Something like that indicator in in the indication bar 60 p Then we have the switch. This is the switch and it has one dp off elevation. So I think that is all about this. Ah, elevation and shadows. I'm going to show you how I have these shadows. I have downloaded material Io PST file And now you can see here we have all the shadows so we I don't need to remember all the settings to maybe three d p I have all the shadows with me Let me show you These are all the shirts, shadows on the right you can see And we have ah, four dp. And there are basically two shadows because the lights were two lights, There s so there are two drop shadows. One is this 176 and 10 24% which is Ah, a bit light shadow. Remember, I think. And this one is Sempra, and I'm not sure whether these are French words, so I might not be pronouncing them. Right. Okay, so this is how they have multiple multiply effect, because these shadows are going to mix together so you can download go ahead and download these material shadows from the resources. Thinks I have going to support all the resources links so you can download these and experiment with these. I hope you have understood this elevation and material shadow concept. And I really want you to learn this because I have I haven't seen any course or anyone preaching all this different stuff. So I thought that I should make the more detailed course on material design, so I hope you enjoy the session. If you have any questions to ask me, let's move on to the next lesson. 14. ♥ 8-point grid in Adobe XD & Material Design: tree. I'm going to show you what is eight point grid system and why Android Mobile design or Google material design uses it. Okay, so right now I'm in Adobe Exit E and, ah, you can create new art board, and we're going to use this android mobile, and I'm going to show you both the grids square grid and layout for and write more bites. Okay? No. First we're going to go to this curd, make sure you have selected this art board, and the columns were going to use our six, and on both sides were going to leave margin off 16 points. So this is their basic grade for the layout. So six columns on both sides. 16 margin column writ is 48 Qatar space between different columns. Is it? So this is there. Basically. Now we're going to replicate this by pressing art or option key. And now we're going to switch to square. Okay, So square size you can use either use it because there greed is based on eight point grid system. So we're going to divide grades off its or each box. This each box translation toe. Eight points are so the eight dp's. I guess so Right now, I'm going to use four. Now. Why I am using for Because they're typographic grade or their typographic baseline is lady toe with this four db baseline. Okay, so they are using four DP lines toe, you know, align their typography and separate tax from one another or the distance between two lines in any decks. Okay, so let me show you an example. That zone in and I'm going to type something over here with this size of 16 and I'm going to use uh, Roberto, I want Let's say hello, dear. Okay, so now you can see their suit for board over. Okay, Now, you can see if you look at port off these letters, they are sitting on these thes lines off four dp. Okay, so you can see here the it is sitting line over here. Then there's a gap off almost two boxes over here. So a DB gap between both off them and then this line is also touching this at the bottom. So this is how they're lying is going toe sit like that. Okay, So if I'm going to use 16 even if I'm going to use 16 points and then we're going to use 24 which is there lying height. So you can see this is how it is going toe look like so line spacing. You need toe. Always make sure that it is a multiple off four. So if I go to 20 it is again going to sit on the lines over here. So this is how their text alignment our text baseline is working. You can also use something like this so you can also drop buttons over here on. They are going to be translated toe again similar to the DP. So right now my balance size is 10 full dp wide and 36 dp high. So make sure you were using something like that. Okay, so let's zoom out and see how it is Looking S O. This is the grid. You canoes toe a line on my years, Your elements according toa there, eight dp creed or four DP pixel. Great. Okay, so this is basically four depicted I'm using It is equal in tow. Eight. Or it is similar to ADP because four is a multiple off. Okay, so our eighties multiple of four. So they are both four is basically half off it. So this this makes sense. OK, so for if you are designing in Adobe X T, I think you should try to use this square great leather than this one. Maybe this one you can use for layout, but I leave would love to see using this one right One square grid off square, size four dp and use the Android Mobile Art Board And that is all you need. Okay, so I hope you have enjoyed this layout grade and eight DPP excel Greater 40 people celebrate and how I have laid out in Adobe X'd. If you have any questions to ask me, let's move on to the next lesson. 15. Matrices And Vertical Spacing in Android App Design: No. You have already understood what is a DP grid line or eight point current system and how Enright material design is built upon it. Now we're going to go into more details about vertical spacing, how different elements have different heights, how these heights have been maintained and why this whole material design looks unique and sleek when any app is designed in it. Now it is all based on vertical sizing, the lines and spacing, and this whole system, it is going to work together along with your eight point or a DP cred. So let's get started. I'm going to show you This is the document I downloaded from Google Material Design and it is in Adobe Illustrator. And now you can see it is about more mobile key lines and spacing. Now there are a few things you want to understand. ADP is the smallest block or the four DP is the smallest block size in android material design. Now, whenever you build something, even if you are building a house, there must be small blocks and there must be some bigger blocks. For example, all your windows will be the same size. So this is a bigger block. It is not equal to the size off the brick you are using. So all the bricks, they are the smallest size, which is going to be a TBI, for example, and, for example, the second size block size. You want to use a bigger block, you want to use 56 db for that? So in android material design, if you look at over here, fixed, incremental, determine, determine with off structural you elements. So mostly the U elements. They have their 50 60 p inclement size, so they're using this bigger break for their U elements. Then there is the second thing, which is vertical sizing key. Now how different elements will be sized. What will be the distance between them? It is built on all these blocks off different sizes. ADP The color key is this one A deep is the size 16 dp than 24 48 64 56 70 to 80 an idiot. So the whole android material design is based on these building blocks. We have 123456789 types off different brick sizes, and we're going to use them to build our android material design. Now, vertical sizing is also going toe. Determine the sizes off different elements. Also, the horizontal margins are going to be over here. So I'm going to show you. Just let me turn on the key sizing over here. Now you can see I have ah enabled my vertical key lines and you can see they are basically showing the margins and the paintings now on the left and the right. If you if I zoom in, you can see on the left and the right. There is a margin off 16 db on both sides. It is equal margin and all the text which is over here on the left. It is aligned with 72 dp off distance from the border on the left side. So the text has a petting or margin off 72 both sides have 16 dp off margins on either sides. Okay, let's see other things. You can see how this is going to look great on all different devices. Now you can see over here. There's double margin from 16 and 32 used on this phone app where they have more icons over here lined up over here. So now you can see there are two margins over here 16 and 32. So they gave a bit more marginal hair when there is a better nor here. So they gave a bit more spacing for this content inside this area over here. Okay. Similarly, you can see over here. This is navigation drawer, and you can see here we have 56 dp size, which is another brick size, our main element size. And the rest is almost the same. 16. 70 to 16. Once you understand this, you can easily design great looking APS. And it will not be a mystery for you that how to design using material designer Coogan material design. Okay, now we're going to come back to this particle sizing key, and I'm going to highlight what are different. Just hide this one, and I'm going to highlight this size inky. Now, if you look at these colors, they're going to be present in this or 80 over here. Now you can see this red one was equal to a DP. So a dp side distance between these two elements, then we have eight and 8 16 db and between we have a separate line. Let me hard this and show you. You can see you know how the spacing is working perfectly. This is called vertical rhythm. They have created a nice, beautiful vertical rhythm using these key lines and vertical key sizing blocks. And ah, Now if you look at this one, this is purple. Let me see. This is 72 DP in size in Hyde. This is vertical with them. So everything is. Sizing is in vertical Now this is Ah, pale blue. Let's see. What is a pale blue pale blue is 48 dp. So this is, uh this is 40 year DP. So this one is 48 dp A sharp blue color which is 50 60 p which is your air bar. It is in 50 60 p. So if you have this file, you can easily calculate the whole different sizing system off material design and it will be a piece of cake for you. You can see this is a bit purple. This is blue, then these are also blew. It means I think this is one or two TB line over here. Let's open the horizontal margins now. These are the same we have discussed before 16. 72. All these lines are 16 dp wide and this whole distance is from here to here It is 72 db and the text is aligned on the 72. They be on the side. Okay, So I hope you have enjoyed this lesson and you have understood what does this vertical sizing and what is the skis? These are all the building blocks off different sizes for android material design. One more thing I want to mention here there's a born bounding boxes for each element you can see even though each element is different these icons around it or something like that . But they're bounding box, which is the actual size in this android material design is different. So this is 56 by 56 DP. Hair is the button. And I think this one is ah, maybe 48 dp, I guess. And these icons are 2040 people were going to talk about these icons later on in the next lesson. I hope you have understood this key. Vertical lines, vertical rhythm, vertical spacing. If you don't know what vertical item is, I have a full fledged course on typography, vertical of them and all that stuff. If you want to take that, you can take that. I hope you enjoyed this lesson. Let's move on to the next. 16. Buttons & Icons specs for Android App Design: in this. Listen, we are going to talk about buttons, icons and touch target sizes. And what are the paintings applied toe the icons on android devices and material design. Now there are standard for any touch target because you're icons and your buttons, they will be interactive. So if someone is going toe tap on them, they must be equal toe their finger size. Or at least it is easier for them to tap it. So the standard sizes 48 before the a. D. B. And it is based on the research that the finger size every finger sized capsizes 7 to 10 millimeters. So, according to that, their size is almost nine millimeter writing 48 dp So they're using nine millimeters for their standard. So if you are designing your app in android mobile design or any kind off mobile app, you should take care off the star Stargate size for our U. S. I think it is a bit different, but for Android it is 48 dp. So now you can see on the right side There are this action. Icons are in the Anbar and then we have Ah, here we have more capable areas with are the images you can tap on them. And ah, there is this plus icon over here. This is also interactive. And now you can see Let me show you what is how they are using different sections over here . So this is your icon over here? It has to dp off batting around it. You can see the white area. It has some space. So it is basically to dp on and on. This you can see again. There is almost two dp on all sides or maybe four, I guess. Then you can see around that they have more petting or spacing this pink area you can see what? Here. So this is your icon and on all all sides it is a four dp off pending. So keep that in mind that if your icon is 48 dp off size, there must be if you're designing You are an icon designer for Android Mobile Labs. Your icons must have a petting or four dp on all sides. You can see what hit This is a touch target. So in this case, the icon actual sizes 40 db But they're capable size or target touch Target area is 48 dp Now this is an icon which is standard small icons. It is 24 pigs ills or 24 dips or DP's. And if you look at it, you can see. But they're touch target. L will always be 48 dp and the distance between these tools to areas. Let me show you. You can see what hear every dot icons. 40 DP These are divert our icons. I call the small, small icons they're going to be 24 dp Touch Target will be on both will be 48 dips or DP's . And also there's one more thing that the distance between do these toe capable areas must be equal to 80 piece. So ADP gap between them so you can see or hear, hear. We have a deep gap between them and again in this section. We're here you can see, disagree and agree there is a cap off a DP between them. So this is their touch area. That's target, and the gap is a debate between them. So that user don't miss men Miss, you know, Miss Habit. I think this would be little misstep it and click somewhere else if if you want. If she wants toe click on Disagreed, she might not end up tapping over here. So here we have again. The button sizes, which is 30 60 p, is the minimum height off the burden. This is the minimum height any button you are designing for and write mobile designer Android Model design 30 60 p is the height and 48 db is actually the touch target, so you must have some padding around it to manage this size. So you're petting bluff. The burden should be 48 DP's. Okay, so one more thing. These icons over here they're called system icons, their android icons. And if you want these icons, you can go to this a material dot io slash icons. You can search for any icon or you can browse all these icons. Just click on any off them so it will be selected and you can see at the bottom you will see DP's 24 dp 32 db 48. Whatever size you want you wanted in black or white and pick on SPG. I think s which is the best thing if you want P and G's or icon forms it can generate for you. You can select any off these icons. Actually, I use these icons in my AP in the final exercise in this lesson, so make sure you can download from them material dot ru slash icons and you can download these icons. And now I'm going to go toe this one to show you some off the state's off your buttons and how different kinds of burdens have. So we have one this floating action button. It has this simple stated and this really suggested where they have it has a more spread ID shadow. Then we have this flat button. This is arranged a straight. So this is normal. But in this is a touch target area, this is again normal button on. It has some shadow around it. So these are two styles of patents. Then we have the same button, oppressed and disabled. Now, in the case off this one, the prostate will have some border rounded like this gray shirt and disabled will have this create disabled but annoy him. So these are two different teams dark and light. And there's one more thing. Okay, now I'm going to show you another kind of icons that are called launcher app. Icons of product icons from material Google design will material design and all these icons you can see this is the screen shot off my Samsung Device Android device, and you can see over here these are all the icon that they are in 48 DP's. I have a full course on creating these launcher app icons of product icons If you want, you can design your own APS icon there. If you do what you can, check out that course so these are other icons. So the actual icons, which we're going to use in our apple called system system icons and these are called product icons. So if you want more detail on different grid systems and guide their using for developing these designing these icon systems, you can go to this design guidelines really design guidelines, style and icons. I am going to link this going to show you this link share this link with you, and I hope you have enjoyed this icon sizes, button sizes and all this stuff off usability that how much touch target we need? If you have any questions to ask me, let's move on to the next lesson 17. Material Tabs: in this lesson. We're going to look at the dabs off android material design and why we use them. What are different types off these stabs? And what are the metrics and design specifications? What are the sizes in DB or dips for these steps? Okay, so let's get started. No. First we're going to see what are the components off the stabs. They are two types. There are two types of tabs. One are fixed steps you can see in this in this Friday area, there are three tabs and they are not school herbal. So if you have, like, over here four or five taps, then they will be going out off the screen and you can scroll between four or five different tabs. Fixed abs, they're going to be three. Fix taps and you can just scroll between these three, step on them and move toe that section. Now there will be tab labels present on them. You can use any color off your own brand or your own website, or your own app, or whatever color you want in your mobile tabs. And that is all. Okay. Now why do we use them? This is the second question basically the tabs. They are going to help you group your content and it provides the afford ins off displaying group content. Now here you can see there are different type of tab applications. Where you can apply does and how you can apply Those there is one on the left you can see default their bar plus fixed there. But this is a bar. This is going to be paged title or your application title. Then we have another. Another application off that extended at bar and fixed at bar. You can see here we have just three item. That is why they are called fixed and you can see or hear. Then we have this pinch pinch school content tab bars. There is no a bar at the top and just thes three sections were here and then we have ah such barred with these damn bars. Then we have These are the scroll herbal their bars. Now you can see that the difference between screw rebels and fixed is that fixed are going to start from the edge off this section. Okay, so edge off your whole canvas or android app, and it is going to start away from that. I think it is going to be almost 72 db away from over here. You can see this is aligned properly with each off them. The text off these item One and peace title. Similarly, you can see here we have with icons, the same tabs with icons. And these are the ones we're going to use in our application design in with photo shop and Adobe X'd. This is what I used. This is with the icon and the title over here. Okay, so each stab has title, which is going to be in all in caps, all caps. You can see favourites nearby three since the all all caps. So these air for desktop tabs, If you're designing for desktop perhaps or tablet, perhaps you can view these. I'm going to include the link. Ok, now there are a few things you need to consider while using these damn buzz first is that they are going toe group similar content. Okay, so if you are familiar with patrons on design patrons, which is which I have discussed in my user experience design for bigger schools, you can see you here on the left side Music, movies, books, games. So they are categories off one store. So there are different categories and you can buy from them. Now, here on the right side, this example is a bit wrong. So they have despaired that you cannot do something like this. Profile idiom sightings help because they are all different. Um, they're all different categories, so So you can see your hair. Don't that absolutely Between the destinations are very important within the store. So these are not related to each other. These are basically the grouping off this content. So movies are grouped in one content one section, one tab. So this is their primary You similarly over here you can see you just need toe allying them like that. You cannot use them. Ah, vertically stacked on top of each other. There is one more thing. There is no some menu are the sub their bar. You cannot do something like that. There is only one major category. This is basically navigation design patrons eso need you need to take care off them. Similarly, there is one more application that if you are using ah, very big name you are going to use something like this. New arrivals and daughter Dort. You cannot use the whole world like that. And also you can. You should minimize the four size. I think the four sizes different over here. Okay. Okay. So that is all this is the fix tab. Three items than we have different tabs. Okay, so this is what we want to discuss Over here. Specs, fixed tabs. Okay. Now you can see the tap sizes. 40 year DP, which is a standard tap size that all capable elements where you need to tap but your finger They must be 48 db in height. It is not true for the buttons. Buttons have 40 30 60 purified. But they have padding included with them. So they are again going to be 48 basically. Okay, then you can see what hair 20 dp is the bottom padding off this text. So you need to move your text 20 dp from the bottom line off these dabs 12 bp is the margin between the tabs on both sides, right and left margins is going to be 12 dp. And that is all I think. OK, now there are a few more things like me. Okay, so I want this one toe because we're going to use this one. So you need toe get what? Actually, the monuments are for these tab bars with icons. Now you can see here the the bottom decks is 16 db away from the bottom. And there is a 10 dp off gap between this icon and this text for the icon. I cancel our standard 24 dp for all the system icons like you can see over here. This is a such icon. This is more icona menu icon. They are all 24 dp's the whole height off this stab our including the icon over here is 72 TB. So this is what we are going to, you know, use in our app. So you need toe. Think that what are the specs? You need to keep these in mind. 16 deep from the bottom 10 db on the distance between icon and this one we are going to use already made patrons and we're going to use you like it. So you need don't need to remember all these Don't think that you are going to remember all these similarly here heart. More specs. 40 year DP 24 db 12 BP from the bottom for the icons and a few more specs you can see over here. These are for the tabs, which are going to be inscrutable. Dance. You can see your hair school Herbal tabs have a 72 D p off margin left, which is going toe align this text with this one and you can see it is a bit outside. The yellow bar is outside of this one, so I think it is going to be something like 56 or 64 over here. And this seems like a 16 baby gap over here. So this is how it is going to play a game 20 dp from the bottom 12 12 dp 12 db on both sides and ah, there are a few more specs You can read them or hear maximum. What is a maximum DP size for each step to 64 dp And what is the minimum? Okay, so this is all the things I want you to look at. You don't need to memorize all off them. But if you are designing something specific for desktop or tablet, perhaps you need to have a look at them. Okay, So that is all about tabs. What are the different types of tabs fix and school about? What is a distinct difference between them? One is dividing the whole tab into three. And one is starting from, uh, from over here. Okay. So you can see what hit. So this is the major difference. There are a bit off differences between specs. I hope you enjoyed this lesson. Let's move on to the next lesson. 18. Appbar Size and specs in Google Material Design: in this lesson. I'm going to show you what are the magics off at Bar? Because the Abbott were going toe. Take care off this one again and again. We're going to design every app will have. Almost every app would have this at bar at the top. So now you can see we are going to go into the mattresses off this water. The distance Is everything okay? So we have already discussed at 16 pixels Is the margin on both sides and 72 is the left margin for our padding for this title or the text? So now you can see in the both example this is a bit expended apart and this is a bit short and bar. In both cases, the distance from the left is 72 dp's and the height off the air bar is 8 56 It will always be 56. You can see this is the area where we have this 56. And these are the icons 24 db icons. And they have this stock this much. That's target 48 dp around them. You can see this is the blue boxes over here. And if you Look over here. You can see again. We have 16 pp on the left side margin for these icons and ah, the bottom Bedding for the text will be 20. So this is this. You need to take it in. Jake died in mind that your title will be 20. DP's away from this bottom. Okay, so in this case, the expanded one. The total height off the air part is 1 28 dp's And in this case it is 50 60. Now, let's look at a very nice example off an actual app project Monumental project title, airport description. Now you can see in this example it is showing you that how this whole system off the line and messed mattress metrics should be used. So you can see this is the 56. This is a but then we have this 80 for this area and it tp eyes use for the petting. Now 80 plus eight is equal to 88 which is their biggest block size. You can see what I'm getting at now again, you can see the next one is 72 dp's for this description off this project. But again, they have used 16 DP's off betting. Now 72 plus 16 is again 88 so these both blocks are 88. But they are. They have rearing distances by using the different margins and beddings around them at the bottom, and you can see this is how they have created this beautiful layout. Now you can see this whole system if you understand this whole system, that how you can manage these and clear different blocks with beddings and different heights. Using this eight point group system and eight point key lines and mattresses, you can create a beautiful vertical rhythm, and I create looking awesome looking APS. Now, if you're wondering what is the size off the status? But it is 24 DP's. So if I forgot to mention it as top status bar where we have this time battery signs, it has the height off 24 DP's. I think that is all for me. If you have any questions or any problems, you can ask me. So So you saw in the next lesson 19. Lists In Material Design : Okay, Now, in this lesson, we're going to talk about lists. You have seen these lists in your Gmail inbox and a lot of other APS, like your contacts in all these kind of perhaps not, lists have the equal bit and they have rules. You can see what here. And they are calling a tiles basically, because they are going to very in different sizes. Okay, so if you have a smaller content, you are going to use smaller tile, and if you have a larger content, you're going toe use a larger tire size. So these are basically rules you can see over here. Let's go directly towards the specifications and all these different sizes. Okay, so this is the basics on the right and the left. This list item, your whole list area, it is going to have a petting or margins off 16 and 16 over here, Then the text, which is the standard 72 will be the alignment from the left. It will have 72 dp and ah, list item weddings will be 16 on both sides. This is the same you can see over here. Okay, so one more thing where I really want you toe. Who is this one? Okay, so you can see over here. This is the top marginal here for the whole list. So it is going to be eight dp Before you start the list. The total height off this whole list will be 48. It is the minimum. So if you have single item list single line where you just have one line of text you're going to use this small one small tile which is 48 and the next I'll let me show you the next style. Ok, so here is the next style size, which is going to be 56. So if you remember in my lecture mattresses and vertical rhythm, they have different styles. For last 1st 1 was 48 than this one in 6 56 And next one is going to be 72. So keep that in mind that reading top there's using a teepee for the whole list. Then they have 56 56 56 for all these. Now let's move to the next one. And here you can see they have some action icons on the right. So the left setting is the same. Then we have the section icon over here, which will be 24 dp and the whole list item single list Item size is 56. Tactile size is 56 the margin on the board sides off this icon, for example, if you have some jack box or something like that, it is 16 and 16 on both sides. So this is if you have some action, we're here and let me go to the next one, which we will be using in our design. It is to line item and this is going to be list item off two lines and the tile size will be 72 Teepees padding and everything is the same. Just we're going to use this one. So these are all different two lines, single line elements off this material design which are list items called dials. Their structure is almost the same. Just the sizes are different for different content. So if you have ah, large content or two lines, then you are going to use this bigger tiles, which is 72. This is the same structure with some icon 72 tile size, even see what here Now, this is three line list. You can see the tile size is now 88 because we have more content, so we need more gap between them. This is the example over here on the right side. Gmail inbox. It is using a Nikon over here You can see over here and it will be 24 size 16 at least from right and left. And that tile sizes 88 dp. So I think we will be designing using this 88 dp in our designs. And this is their layout. How it is all laid out on their vertical them on typography is on a four g p baseline. So you can see they're showing that 44 you are living toe a deep your hair then, Ah, four db over here between these two lines. So I think they're using something like that. So they are also showing how the text is basically aligned on their vertical rhythm. So I think that is all about these three lines. Two lines, single line lists. If you want toe get more the days you can. I am going to link this page over here to see the whole specifications. And that is all. If you, if you really want toe, see the great list, which are in images image good list, which I'm not going to go into every detail off this material design because it's of any big system. I hope I don't bull you who using all these specifications, but I think you should at least get one stance on them or have a look at them. So I hope you have enjoyed this list lesson. If you have any questions, do ask me. Let's move on to the next lesson. 20. Bottom Navbar in Material Design: There are many components off Android material design, but I am going to just look at an overview on Lee, the ones that are Jews, mostly in most of the apse. And I have seen them a lot of times designers or developers using them again and again. So today I'm going to talk about bottom navigation Now bottom navigation. There are two or three things you need to keep in mind that on the bottom navigation, it is going to be providing the direct access toe the portion off your app. Second, there will be 3 to 5 top level destinations, so there will be only 3 to 5 bottom navigation items you cannot exceed from five. So keep in mind that 3 to 5 there's one more thing that the height off this bottom navigation you can see over here This is the one the and it must be 56 db and the icon size which is all already the standard is going to be 24 by 24 dp. One more thing is that maximum with off any off this one off them you can have 1 68 db and minimum off. Http Now let me go below and you can see over here. Here we have bottom navigation bar. This is basically the navigation bar Android system Mobil's and this is the navigation bar . And it is going toe have tracked access to three portions nearby favorites and recent. Okay, so one more thing is that the text with them should be very short. So don't use your all time favorites or something like that. You need to be very concise. Why? Using the text over here? Okay, Now, when we should use this bottom navigation when you want your user to have access to any off the abs portion instantly on day are off equal importance and you want them to access them from anywhere in the app you can have this bottom navigation eso you can see what here? 3 to 5 top level estacion of similar importance. So this is the main purpose off this part of navigation also you can see here we have a few more examples off this one fixed bottom navigation bar. There are also when you try to school up or down, it is going to appear when we're going to scroll up. There is on any mission or here let me show you. Okay, so about the colors you can color them like this. But don't try to use meticulous like that. If you have ah colored background for the whole tab are you can use fight on top Off it it is if it's have ah, darker color and you can see this one is very in pure white And the other icons, they are a bit off Ah, transparent. So maybe 70% or 60% transparent and they are mixed in the background of it. So this is how you are going to use or design that one other way. Is this one white bar with the color for the highlighted one and other ones will be increased. So these are two styles. Let me show you. These are two videos you can see or hear. They're showing that how it will appear. So once you scroll up or down. Okay, so I scrolled down and of any scroll up, it is going to appear. So this is how it is going toe shift at any minute. So this android material design it is very, very specific in the usage and all the animations and everything. And I really love this thing about it. Because this is the frayed cross fade animation on how you can use these dabs. You can see when the active tab is present. You can see the text and I call on the boat. Move up. Okay, so the inactive one is in the middle and the other one's move up. So you can see this is the animation. That is why it looks very cool. Because the active tabs, they are moving up in the air in the direction. OK, okay, Now we're going to look at the specs off this bottom Navigation. This is fixed one. It is going to stay same over here in including the whole app. And you can see the height is 50 60 p which we already discussed. And now there is the matter how we're going toe designed this portion. No, the active Deb for this you can see the distance from the bottom is 10 dp and from the top , it is 60 p for this icon. You can see this. It is it will always be 24 dp because it is a standard size of system icons for android material design. And you can see now that this difference between this inactive state and this active state is the force eyes You can see the four sizes different Also, you can see the icon is colored and icon is moved up So you can see over here for size bigger. Once the phone size is increased, we have less space over here. So they moved it up so you can see now it has 60 be top marginal top bedding, and the an inactive state has eight db topping you can see here is any mission how it looks . It looks really cool when they, you know, shift from one state to another one. So very nice feedback. If you don't know what feedback is, you need to see my user experience design course. Anyhow, you can see here is the maximum is a petting off 12 dp on both sides. I think this is standard among their app design 12 db 12 dp on both sides and ah, that is all. If you want to look at the other views like tablet views, you can go ahead and look at them and also you can see here we have again the same happenings, the same you can see this is just the icon. So the specs a little bit different 16 dp from the bottom And this is again the icon with the text and it has the same distance of one more thing is that icon toe The distance between the icon and the text is 60 p So this is another thing also you can see active you minimum bird 90 db This is with icon and the text maximum went to this one and maximum active you It could be this one. Okay, so the mini member it if you have, you can see here we have the small dabs. 123 These are a bit smaller, so the minimum Brit is for them. But just the icon is 56. So if you are planning to use four or five over here, you need toe use this pattern rather than using just the text and icons both off them So you can use this one so they can easily fit into this space. So that is all I think if you want, so you can go ahead and see all these specifications. Okay. And now there's one more thing I would like to you to show you. Is this one bottom navigation bar. What is the elevation off it and why they are using this elevation? You can see what? Here? Here we have snack bar, floating action button and contents floating a general snack bar. They have the same elevation, which is 60 B. If you don't know the elevation, you should see the elevation lecture I have talked about before. Elevation means that how much high, Higher it will be in the hierarchy on the Z index. So you can see bottom navigation bodies ADP to sting over the snack bar floating action button because usually need to accept access it and go to different portions within your app. Such boxes told BP because it will be the A portion off your content. Najjar is going toe take over all of the's because it is going to be 16 dp in elevation. So keep these things in mind. This is a very nice system Off Z index and different shadows. And which element is overlapping? Which one? So that is all about bottom navigation bar. Let's move on to the next list 21. Side Nav in Material Design: Now we're going to talk about the side. Never it. This will be a very short lecture. So the side never is going to appearance. You tap on this Ah, hamburger icon or here and you can see this is our side. Never. Now there are few mattresses and rules which are going to guide us the size off this side. But now the size of this maximum size will be 3 20 dp Because we need to have some space overhead so so users can tap and it is going toe disappear. So screen with the simple rule is screen with minus 50 60 Be so they are living like 50 60 b over here. So you can use again tap or here and ah, have this disappeared. So that is all I think so Keep that in mind that you are. If you was using something like this one, you are sizing it properly. So don't try to take over the whole screen so users will be will have problems stepping over here. So the basic rule is this 11 more thing which you want toe Consider what here is It is going to overlay on all your previous screens. It has an elevation off 16 dp. So it is goingto be on the top off the whole your content, your bottom navigation, your top navigation, your dabs. Or here it is going toe. Overlap all of them. Also, you can see at the status bus bar over here. When it moves over here, the status bar is going to be at the top off this one. And it will be, ah, part transparent and part opaque. So this is this is going to happen once you about this drawer is going to come out. This is going to happen like that. So you can see this is the background. And there is a dark background on the top which is multiplied in this background. So it has Ah, some bit of transparency, like maybe 30 40% transparency. So I think that is all about this side navigation and ah, I hope you have enjoyed this lesson. Let's move on to the next lesson. 22. ♥ Typographic scale I am using in Adobe XD: we have covered the color basics and all the close games in the last few lessons. Now we're going to look at how typography is going to play a role and what scale and sizes I'm using in my app. Now there are only five sizes I'm using, which are from Google Material design typography scale and the took 34 point is the main heading the biggest heading I'm using for my title title name off my app on the front screen. Then I'm using 20 points for my title on the APP, APP application title within the within the material design app and I'm using medium 4 to 8 with 20 and this is my body text which is 16 points regular Roberto and then the small text Roberto 12 points regular and you can also use medium over here if you want to. So it is going to look like this one. It does. Okay, so this is one thing, then I'm using 14 points for the links. This is also a medium for, so it is a bit ticker than the regular Ford. So these are all the force. I'm using these on all the settings I'm using. I am also using 14 points for the smaller text. Some places on some places. So let me show you my actual design in Adobe X'd to show you how I'm using all these sizes . Okay, Now you can see here we have the actual design and you can see over here if I click on this title. Double click. This is 20 medium roboto. So this is apt title I'm using. This is ah, 14 points medium because it is the specifications from Google material design eso these dare bars. They have all caps. 14 points medium. Then if you look at this one, this is body decks medium 16 points medium and the smaller text. If you double click on it, it's 12 point regular Roberto. So also over here, you can see it is 14 points medium regular roboto, and that is Ah, I think these are all the sizes I'm using. So, um, if you move towards see the foster screen, Okay. So here we have this first screen, I'm going to zoom in a bit. Okay. Now you can see here we have the full screen and this phone is basically 34 extra bold agony. And that is all the phone size I'm using. This is again 16 points for the stacks fields you can see or hear 16 points regular Roberto . So basically 16 points is my body formed and it is mostly used on most of the places on the buttons over here. And this is again the small phone, which is 12 regular border 12. And that is how you are going to create these awesome looking typography, different elements. They're going to look great together because we need to create some typographical hierarchy . Typography had our key over here. Some things must be a larger with the importance, and some things must be smaller, with the less which are less important. So that is all about this typography and how I'm using it within my app. So see you soon in the next section and ah, let's design a create looking up 23. Master Color Scheme in Material Design 2.0: Now, if you want to be a great designer, there are only two things you need to master. One is typography and second is color scheme. Now, if you want to build a great color scheme off material design, you need to understand it. And there are few basics and there are few principles you need to follow. And your color scheme will be awesome. Okay, so here are two things or few things I'm going toe give you. Okay. So for any good color scheme, I think you just need to kill us. And if you select those two killers create, you can very them. You can add a few light and dark variants off that girl toe build appears. Scheme, Color scheme. Now here you can see this is material design palette and they have shown that this is your primary color, which is going to be over main color. And this is the second regular. Now you can see the prime Mikola they have selected in the middle. It is not too light, not dark. And but the second regular they have selected it is going to be a bit On the lighter side, there are two more things which you need to see. If you look closely on this, be primary. It is written invite. And if you look at the secondary, it is written with black color. Now what does that mean is it means that contrast ratio between the text and the background . Here you can see the text and the background it The contrast ratio is create. It will be easily visible and readable. So these are a few things you need to keep in mind. These are different settings for the same color. Light, darker shades, lighter shades. On Dhere, we have lighter shares and darker, dull shields. Let's move on toe actual color scheme pallet where they are showing you all the instructions. Okay. Now, if you understand this chart or discolor scheme, you can build any color scheme with your material design or Enright app design or any other AB. Now you can see here we have two killers. This is our prime. Irregular. This oneness and this is over. Second regular. Now you can see this is primary color on the left. Then we have primary variant, which is a darker color, which we're going to use for our status bars and fuel the elements here we have. Ah, very light shared off the primary variant. Here we have less saturated. We have very local er and it is a bit on the vital side or the light side. Okay, then we have this very sharp second regular and the second Revere Ian a bit darker color. So actually, they're just using two colors. And these are the variance off these true colors. Okay, so this is one thing. Okay? Now, the second thing is that the color you are going toe use as a text on these colors. You can see on thes two darker or sharper colors. They are using white as the text and on all these colors they're using black. Okay, so what does that mean is if you look at the bottom side over here on the last 80. Over here, on primary, on secondary, on background, on surface, on at it. This is basically showing what color we are going to use on which background or which color Primerica or so if he was using chemical, As you can see on primary means that we're going to use white color. You can see over here on the prime. Mikola. So all the variants off these primary colors that these two villians they're going to use this f f f value on secondary. You can see these are two secondary and second rebellions were using black. This is on second remains on secondary. You are going to use black a little on any second regular on enter. We're going to use F f f because at local is bright red So we are going to use white color on this You can see or hear they're using vital or it and on surface on surface means all the backgrounds used in the material design. So if your app has some background and the content is scrolling on on that background, it is going to called surface. So naturally the surface is basically white on all and material designs and the background is going to be Oops. OK, so the surface is basically your cards. So if you have some material design guards flowing, I'm going to show you in just a second. So all the cars, all the information on top off your background, is going to record surface surface is basically you're all the information cards or any, um, information blocks on your mobile app material design app. So they are going to be white where they are due by default, their white Also, the background is white and they're saying that on surface we're going to use this color as a text on background. We're going to use this color. So basically, their main idea behind all this color scheme is contrast ratio. So you can see they're maintaining good contrast ratio between the text and the background . So that is their main purpose behind all this color schemes. No, If we look at these color scheme, you can see this is primary color and they're showing how that you can make a different color schemes using these prime acres. Okay, so this is one example This is another example where they're using third light shared off the same Primerica leverages this publish a light color and let's see the interaction off this primary and second regulars. You can see here we have primary in second dark primary for the status bar and then this is fort abundant. So you can see now it is looking great because we have more colors and let's see here his example. We have more colors over here, so one color, which is our second regularly, is going to be for our primary actions. Here we have the editor there showing how you can use other. And this is how the other color is used and the on color you can see the on color is white . You can see on edit Fight on background. This is the background White. This is the This is our, um you can see card. This is the card elevated card. It has shadow. It is also white, and the color on it is using is black. So this is how it is showing that this is the accessibility. So once you move to the lighter shade, you are going to use black alert to maintain the contrast ratio between the background and the foreground color. Okay. Now, if you want to check the contrast ratio between collapsed, you can check with this contrast ratio tool online, and I think it is contrast to actually issued or calm. And you can use colors over here like you can see. I have added do killers from a color scheme. One is this two e. Dewey for the text. And this is for the background and you can see here we have a good contrast issue. It must be above four. So this is how you can check your contrast ratios. Now I'm going to show you very old ballot material design palette, which was brought in 2000 and 14. And these are the basic major killers for all that pellets. Now, you can use in material designed to point or which is the latest version. You can team your app with your custom color so you don't need to limit your websites or our android material design using this color palette. Now, in the less lesson, we're going to see the color tool, which is given by Android material design. So let's move on to the next listen. 24. Online Google Material Color Tools: Okay, now in this. Listen, I'm going to talk about this material design collateral, and this is how we can use it. And it is online toe by material design. And you can see this is their palate. And they have the striping purple and the purple indigo blue light Gussie on. So they have the specific colors. So how you can use this is first click on this primary, and you can see here I have created some of the other schemes, So click on the primary and select your particular. So you can see now I have selected this primary color in the middle off this color scheme, you can also use this one. Okay, so this is my primary color. So fine. Then click on the secondary and ah, let's select this one as my second regular. Or maybe this one. Oops. I don't like this one, so I'm going to switch to this one. No, let's select something. Bourbon. Maybe a like purple. Okay, So whatever colors you choose, I'm going to go with this yellow color, and you can see now this is a good looking a good color scheme with this red and yellow and it's in a bit off Pincus shared. So this is how you can create. And it is going to show you some off the accessibility issues like you can see these different screens, how your tabs are going to look, and this is how the text and other elements are going to look. This is your sidebar. Never. These are your text guards. And this is the list, I think. And this is how if you move to this accessibility, you can see it is going to show you that black text is not visible illegible on this one, also the black. That's why test is not eligible, not eligible. So these are a few problems, and I think they will be because every color is not visible on every other color. So you need to select whether either black or either via text for the legibility purpose you can see over here. These are all black shared, so they are really visible on this one, and these are two white, and this is another light shirt on, like shared. It is going to use black. So this is you can, how you can build your color scheme and also, you can export it. Toe and Reid are US or court, Ben. I don't know much about it because I think it is going to be in material examine file, but I'm not sure maybe your quarters or developers know more about it. Also, if you go to this custom tab, you can select any color you like. For example, if I want to use something like this for the second regular and for the primary color, I want something, uh, like that. Okay. So you can select any custom color you want, so let me go back and see how my colors and items are looking. So secondary is a big dull. So I'm going to move it over here somewhere. So now you can see I have selected both custom colors for my primary and secondary color. I really don't like to experiment within this tool. I'm not sure, But as a designer, I like my photo shop. Or maybe Adobe X'd where I can experiment with contrast ratios and color schemes myself. So this is just for donating some idea that how your app is going to look like on now I'm going to switch to my o B x d But I'm going to show you how I experimented this color schemes. Now you can see here in my adobe x t I have this prime color scheme and few next combinations were here. I'm using again a phone for the title off that app and Roberto for every everywhere else This is the link style 14 points, 18 points for the create text and now you can see these other colors for the gray. This is the great killer This is a primary text color It is not full black it is to eat to eat, to eat and you can see here If you look closely, there is a black line on it over this straight a circle and Thies, I have used as my status is this is the darker shade and I'm using light color on it just to improve the accessibility. Similarly, over here I'm using the starker shared off this one as my status bar. This is my primary color. This is my second regular adult shade for Britain's off the same second regular. Ah, and I'm using vital where it and ah, the accessibility really sucks for this one, but I think it is pretty visible. So I'm getting on base basing on my eyes. Okay, So this is my links color. And this is my error color. Now you can see this is how I experiment by building Michael scheme. Now, if you look at this, these are basically blue grace. They are not pure glazed creates They are built from this primary color. And also you can see this sculler if I go to this one a circular. I built it based on this blue color. So if you click on this blue color and move all the way up to the regular, you are going to create another regular for this color scheme. Okay, so this is how I have managed to create this darker shade off this regular for other states . Again. The UN color for these other states will be this white like this one. And ah, that is all. I think you can understand how I created this color scheme. I'm going to share this file with you, so don't worry. You can open it in adobe X t. I don't have any file for for the shop, but I think I will in killed image preview off this one, so you can relate to that. So that is all about these color schemes and how you can use different tools and how you can experiment within your for the shop and adobe extra tools. If you have the basic understanding off on colors and primary and secondary colors, you can create any color scheme. I hope these lessons will help. You are a lot on, and if you have any questions to ask me, let's move on to the next lesson. 25. ♥ Download Material UI kit for Adobe XD: No. We're going to use Adobe X T to create material design and the design off my app. And before we do start doing this, we are going to download few assets or you I kits, which we're going to use to quickly develop this design. Okay, so now, as you know, that android material designed to point or newer version of original design has been lost. Eso There are few stickers shoots which are missing. So I'm going to show you what you need to download. You need to download this android. Do I buy great simple story A. This is the awesome joy you can download. Then there is this sticker sheet components which were present before this android material designed to point. Oh, and now it is not available. But I'm going to share the link My google driving so you can download this one mainly. We're going to use this one and read your g y by straight simple stroll. You. So let me show you where you can download it. Material designed to get dot com slash and right the way. This is by great simple studio and you can download Adobe X t figure for the shop CC Onda sketch 40 toe 4.2 or 42. This is you can hear you can download. And once you have downloaded this, let me show you It is a very big um a lot of files. You can download the X division if you want toe. You can also download the for shoppers and if you want, But we are going to need this one. So once you have downloaded and extracted these files, you will have this file. And Reggie, why? By creeks and pastorally? If I double click and open it, I'm going to show you that it has all the components, even the stickers sheet and everything in it. So we don't need the second one. No one head. Let me zoom out. And now you can see at the top. They have all the components over here. Guards, different menu items, extended menus, different air bars, different tabs on different coasts or call them. Okay, so that is all we need. Just download this one, and we're going to use these components toe, drag them over to our screens and copy them and use them to create awesome looking design which is this one. Okay, so, um, let's get started and make sure you download all this. Also, there is one more thing we're going to use. I'm going to use open CC libraries by cloud libraries by adobe. And what you can do over here is I generated this in my photo shop. Basically this city library. If you don't want to use it, make sure that you created this whole color scheme before you start on designing anything. Okay, So what you are going to do is you are going toe. Let me show you the way. So, in the next lesson, we're going to create first template and I'm going to show you how you can use all these colors and create the color scheme before starting on this design. So let's move on to the next lesson. 26. ♥ Design Login Screen Part 1 - Medical Android App: before we start designing in and over a x t. I'm goingto tell you few things which are very necessary. Number one is that Adobe Extra is a vector tude. So in Adobe X'd make sure that you are designing in Vanek. So whatever you're designing your art board size will be 3 60 by 6 40 db and it is actually in debates. So every monument is as it is, as specified in android material design. So you don't need to worry about converting it to are multiplying it two or three X if you are using for the shop. So this is how we are going to start our designs. So I'm going to create a new file and click over here and we have this android mobile click on it and you can see here we have this file. This is our starting art board. You can see here we have the art board. If you don't know much about Adobe, Ecstasy should take my course, which is a big nurses to expert level course for Adobe X'd, a no b x d prototype designed person, I mean, collaborated with developers that is the name or title off that course. So first, we're going to create our log in screen. So this is a log in screen. It is 3 60 by 6 40 dips or DP's and our fill color or background color is fight. We don't need any and greatly out. If you want, you can use the square grid layout, which is going toe have on it. Eight size. You can use that if you want. Oh, this one. You can use something like that if you want, but right now I'm going to hide it. Okay, so first we need our background set up over here. So we are going toe drag our background image from our assets folder. So here we have our assets folder. Let's drag this background image over here and let's move to this one and drop it over here like that. Okay, so we're going to use something like this. Let's make it a little bigger. Okay? Now, what we're going to do is we're going to overlay a rectangle over here which is going to the same size off this art board. Let's some off the border around it, press TV and selected, and we're going to use this background player. So Bagram glare valleys will be five, not the opacity. What? This one? I'm going to use five over here. Oops. I'm not sure what its problem with this. Just click once five is going to be amount. Brightness is goingto be eight, and opacity is going to be 30%. So we need something like this, which is a bit a little bit off bright because our text should be visible enough over here . So this is our background now. You can select both off them, and I think we should lock them so we don't accidentally move them around over here. Okay, Now we're going to drag our logo into our file. That's dragged the logo and drop it over here. It is very big. The size I'm going to use is 1 20 dp Oops. Wonder and GDP size this size. I'm going to use over here. Let's align it in the middle and from the top. It is going to be 72 dips on the piece. Now we're going to use some text, which is going to be agony. So we are going to shift toe agony GP goes Who's okay So we are going to shift pregnant again and the size is going to be 6 34 p. T. So this is the same size as it is and extra board. So here we have our text. No, we're going to use text for the second line. I'm going toe drag something like this and we are going toe. Copy that text from here. There's clothes, the's extra files. Okay, so here is our text from log in screen. Let's try to drag it on top off that, See what happens. Let's do it now. Okay, so our text Israel here, let's change the force toe Roberto Voter regular. And it is going to be 14 points. Something like that. So I'm going to use like this. So I think it just copied the first line. So we need to copy the rest off it center line it of you. Press V. We are going to again align it. You know this So 15. 15 now in a o b x d. You are going to press Artur option key. So if you want to see the distances between two elements so it is seven. I'm going to make it. Eight here dips the difference between being bought off them. Now we are going toe drag a few off the fields from our designed kit. We need these. So I these I created custom Lee. So I created myself. But now I'm going to drag it from Ana. Do you like it? We downloaded. So let's open that. Do I get this is a bucket. Let's find those text fields are long and fees. So here we have the input fears that zoom in. Okay, this is active input field and this is inactive. So we have to text fields, hidden text. We need focus one. And we need this one We need these to Basically, we might also need this one which is focused center like this one, because in some places, we are basically feeling over text field. So let's copy all these. Come on, See? And we are going toe goto Our file based it with hair like that. So these are standard sizes, so we don't need toe worry about different layouts and everything crazy. OK, so here we have, we're going to name it Boss Word. And this is going to be my password Okay, so we don't need this or here. Okay? So I'm going to remove this Dilute. This also discussed, sir, we are going to have it just over here and, uh, colors. We are going to deal with them later on because we are going to have some color generated over here because we need all the colors from this CC library I created in Vidin for the shop. This is our city library. So now we are going to do is I'm going to select this move to the city library, click on this black text. This is to Ito ego e No. Along with that, you can use similarly You can do the same, right? Click and add color to assets. So if you go toe this SX area, you can see now this text color has been added. Now, if we go again, toe, let's like this one. And if we go again, we have another color, which is blue grey status. I think this is for this texture. You can use this one blue grey medium. So now this color wear again going to add it over here. You can do this manually. You can just create a few. Connecting is over here with the same color. Okay, So if you know what is the color, for example, to Ito Ito you can use that has a decimal value. This is the manual method I'm going to show you. OK, so you can use something like that. So No, it is this color you can right click and article right now. It is already added. So it is not showing me the option. So you can create different boxes off that are create your whole color scheme before starting this design and added to your colors. And then you can just click over here and apply that Philip rather than using CC library. So if you don't know how to U C C libraries or start them up, you can use something like that. Okay, so this is done. This is our email. Okay, so this is going to be e mail. Something like that. Okay, so this is basically disabled. Feel I'm going toe, use this one rather than this one. Or maybe we can use this one and four password. We're going to use this disease. Okay. Lets him off. This one. We have basically to foods. And the color for this bar is going to be the killer, which is our this active color, second reactive. So this is our active color destroying that this part is our here. Let's move to this layers and see with the type mark I'm going toe hope it over here. Something like that, and it is going to use the same color. So first rejects, add this color to our assets and move toe the asserts and select this one and use this color. Okay, so we have over text field ready. There is one thing which is not present because it is older version off these tech fears, which is on the top small label, which, as you can say, floating label, which is the actual name off that patron they're using in two point. Also, we are going to add a hair email, something like that, and we're going to use the same color, this one. So this is a new bedroom which has been amongst in, uh, this new material designed to point. And if I see the distance, it is going to be 16. That's create. Now you can see this is the actual layout we must be looking for. Let's see, what is the distance between these two? Let's make it a little bit less. Okay, so I think it is looking great. We just need represent that this is how it must look. Let's move it a bit down over here. Okay? So also, I think that this is very slim, so I'm going to make the height to, So it is a little bit visible on the top off that also, I'm going toe, um, use the fill toe, have something like 40% because it looks ready. Very done on this back on. 27. ♥ Design Login Screen Part 2: Okay, So past Virginie to enter. This is email. Everything done. We're going to generate a button over here, so let's create the burden. So the button will be 42 DP's high hopes I need 42 over here, and it is going to use 80 picked. So if you want to increase, you can increase to 90 something. I think this looks better. Remove the border and our primary color. WAAS this one. Okay, so I'm going to use this primary blue on this button. This is what we used and Breast V and let's well, we don't hear. Okay, so I need tohave 24. Let's use 24 difference between these two. Okay, Now we're going to add log in text over here, which is very easy. Logan 14 will be not the size we're going to use. We are going to use 16 or here for the burden, and regular and white will be the text. Okay, let's align it in the middle shift. M. C. And it is a lying in the let's add some rounded corners to dp off rawness and accept some shadow over here. Just going to be two and six and the shadow color. We can use the same shadow color like this one, which is our primary collection. Also, add this color over here in the document colors and ah, that's add this as a shadow. Okay, Now we can use something like 50%. Okay, so this is how we're going toe shape our shadows. OK, Okay. So this is done. Let's aired. Forgot password Over here. This is going to be a link color, which was different. It was a blue color. So let's middle align it with this. Something like that. Now I'm going toe again. Open my sissy library with my sissy library. Next. Closed this file Don't save. Okay, so C c library, Let's open up cc library again, and then I'm going to use this link Brugler. Okay, so this is our forgot password. And, um, if you want, you can move it a bit, would head, or maybe keep it over here like that. So no worries about it. Okay, So one more thing we need over here, which is a new do G B doors Next. See way. The color is this one. So going to use color picker, toe pick up this color. Okay, this is our decks. Color Neutra Chipotle's here. Go. So this create account color is basically going to be link alerts. Add this to our document colors over here and also to our Essex, You know, let's align it in the middle. Select this text. He was discolor. Okay, so we are done with this. If you want to underline just this, you can use that over here like that in a txt. And now it is underlined. This is what we used on in our photo shop design. Okay, so I think this is great. Let's align it in the middle. Everything. Align it in the middle. Okay, so we forgot to add some shadow on it. So we're going to add some shadow and the shadow color will be something. Told her to this. Let's move it to 50%. Something like that. Okay. Looking great. Our shadows looking great. If you want to add the top state of small, you can add it or we are going to hide it on a log in screen. So if you want to add it, you can drag it from this area over here. And let's see if we have a dark black status part. Okay, so here we have it. If you zoom into this one, it is basically have this status bar and we can copy it and basic over there. Next. Best it or here it is on. We are going to make this film transparent. And this is how we are going to use this screen. So the fill off that status bodies transparent and we have some time and everything over here. So our this screen has been completed. Log and skin. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 28. ♥ Signup Screen for Medical Android App: Okay, Now we're going to create sign up screen. And before we move to the sign up screen, there are few things I want. Oh, tell you over here, which is? This email label is going to be 12 points or 10 points. In photo shop, we used 10 points, and here we're going to use 12 points because they are looking very small and align it with this text overhead. OK, one more thing we used and I can over here a check. Mark, I go on if you want. Tobe, bring that icon over here. You can do that and go to the icons. And this is our baseline check. Let's move it inside. Our that will be extra document and move it over here like this. Let's move it inside. And it must have some fighting over here, which is going to be 12 from this one. So I'm going to use this color from my asserts this color for this one. So I'm going to select it and click on this color. So here we have this check. Mark, if you want toe, do something like that. Okay, Now this screen is complete. Let's move on. to the sign up screen. I'm going to duplicate this one. I'm pressing art and click on the name. And this is how you complete get it signed up. Sign up screen. Okay, now our status, but is going to be changed because we have some ab Ottawa hair on. And these things are going to move around because we don't need this password, and this is going to be changed. Toe, um, I already have an account, and this is going to be log in? No, something like that. Okay, So also, this button is going to be changed to create account, so we are going to shift this button sighs. Next, make it a little bit bigger. That's L. A center line. It shifts. See? Okay, so we have this create account and everything over here deep. It'll be the same. Let's make it a little bit smaller. Next, make it 100. The bees and we are going to move everything up. Maybe over here, because we need one more text field over here, which is going to be our America's decision number. So let's move this below. This is going to be in the middle. That's group them control or command G toe, group them and we are going toe. Name it pretty in. Now. If you want to create symbols out of these buttons, you can right click and create this pardon as a symbol makes symbol. But right now I'm going to leave it like that. Okay, so we have this email focused. Mongie, this is our email. This is our password. And we need one more field, which is going to be Oh, well here. And it will be okay. Next. See the distance between them. I think the distances no less. So we are going to move it over here like this. So I'm using a 16 dp distance you can see on the left side. It is showing me the distance between all these and here I am using 24 over here. Okay, so between the button and the text field 24 dp's now I'm going toe group everything over here into a form kwon ji. And this is our farm sign up form. Okay, so, no, we can move them around like this. So this is easier for me to you know, control. Okay, so we have something over here. That's it. Jane, the text to Okay, now we are going toe drag the top bar overhead. So we are going to delete this, uh, status bar, and we're going to grab another over here and put it over here. Okay, so we are going to go to this, do you? I get this awesome Jew a kid that is making our life easier. So we are going to go to the top. Where we have the air pars next year is the, um, bar we need over here. Um, okay, so maybe we can use this one because it has the back button and we might need to go back. Go back to log in screen. So let's spend use this one. This is tool bars and which told about Is this one? 12344 writing. Okay, so this is for tomorrow and see all you can use this one toe five. Let's use the 500. Come on. And now we're going to base it over here, and the magic is goingto happen. Oops. So it doesn't happen over here. OK, so moving at the top and the color for this one. If you remember it is going to be toolbar. BG. Let's see, what is the color off this one? So we're going to use this color for this, and the top is going to be status. Part B G is going to be discolor darker color. So let's see what is happening. Okay, so this is a little bit problem over here. We are going to move to our assets, and we haven't added this color. This is our primary blue color. Let's add discolor. Add color to the assets and we also need another color, which was this one starker color on this 118 to 9 40 So let's and this color 18 to 94 D. Okay, so let's add it over here. And also we are going to right click and color to the SX. Now we have two colors over here. One is a bit darker color, and one is a lighter color. So let's, um, again go to the stool bar. This is a tool about background, and this is our prime regular. I think this one is was our primary color. And if we move to this one, let's see what is happening over here. So this is the basically the color. Ah, this is lighter. In the top one status part, this is going to be darker. Okay, so now you can see we have the same arrangement over here. Let's, um, based title change. Let's change it to sign up with GP tools. Okay, Now you can see we need to move our things a bit down. If you want toe, remove the shadow around this on. This is the shadow. If you want to move, the shadow removed the shadow. If you want to keep the shadow, you can keep it. But I'm going to use this team. They're smooth. Things are any things down, So I'm going to use 80 80 piece for this icon. I don't want it to be very big. I need more space over here because the Jews are already known that he is in this app is using this app. Okay, so let's move this a bit up over here because I don't want toe, you know, change. Ah, sizing off this one. I wanted to be the same 80 over here because if I move it down, it is it will be difficult to adapt with the Tom would here. One more thing we are going toe center. Align this Pardon like that. Even if you want to keep it over here, I don't think it is going to be Ah, big matter or here. Okay. So I think our design for this screen is complete if you want. Oh, keep the shadows. You can keep the shadows. Let's use the shadows over here. Okay, so our sign up screen is complete. If you have any questions or any suggestions or anything about the school so you don't understand anything you can ask me questions, any questions, even number questions Are any simple questions? Torch be shy. Try to ask me whenever you have any problem, OK? So you can see our to screens. Sign up and logging are complete. Let's move on to the next lesson where we are going toe do more about it and, ah, we're going to create our dashboard screen 29. ♥ Dashboard Tabs design within Material design Specs: Okay, now, in this lesson, we're going to create this dashboard screen. But before we dig into dashboard screen, we need this stab our with icons over here Now, in my boat you like, it's I have such And I wasn't able to find this patron or here because I think they forgot it. Or maybe they I didn't added in their free version. So what I'm going to do is we are going to use this these three items over here, and ah, we are going to combine it with something like this over here. Okay, so let me show you some off. The specifications to hide is for these fixed air bars Is 72 dp's 12 dp is a top marginal here. Then we have 24 dp icon than we. Our text is going to be sitting at the bottom off 20 dp block or 20 db baseline. And this line is basically to DP's so we can create it ourselves. So we're going to do that in this lesson. So let's start with creating this stab are in this. Listen, So here we have our files, so I'm going toe just replicate cricket. This one are Drop Shin Ki, and I'm going to drag it over here to create another screen or here, and they're still eat the background. So, no, we don't need these backgrounds. Thesis rectangles. I'm going to unlock them. So we are going to delete this and also going to delete this. We don't need the logo right now. Maybe the stacks. We don't need these phone we don't need. And this one and this one I'm just keeping this text over here. Okay, So if we use this one, this is our toolbar. It is a bit different. So what we need over here is something closer to this. So it is Toolbar number 1234 So I'm going to copy this right now and maybe let's see if we have something. Okay, so great. Copy it. And we are going to baste it over here and let's dilute this one. The stool bar. We are going to delete also the books. Also the status part we need to delete This is our four. So I'm going to move it up like that. We would change the colors later on. So right now we are just going toe removed the shadows so I wouldn't remove the shadows from this layer over here. Okay, so the shadows have been removed. Now let's move this. Ah, item over here, it looks Oops. Okay, so I'm going to go up. Up, up, up, up over here. Okay, so we have this this third dad bar and come on, See? And I'm going to baste it over here. That something like this. Okay, now what we're going to do is let's make it a bit move it a bit down over here. And if I double click on this background, these are the bounds. They are basically 48 dp's, but for the tab with which we want that it is 72 db. So we're going to increase the size to 72 dp's. That's increased the height like that, and let's move it over. So our indicator is at the bottom off this one like this. OK, so we have you did a very nice background that zoom in to 200%. Let's move this a bit up. Okay, let's change it color. So it's easier for us to, you know, define that we are designing something in something like that. Also, this one we're going to fill it with discolor and in exchange, discolor toe our primary blue. Okay, so this this is more like it way need to design something along these lines. Okay, so we need our icon over here. Before that, we're going to create a block off 12 dp's. Okay, So height is going to be 12 because we need to place our Icahn's below this. Okay, So looks, use something like this. I'm going to use the color red just to make sure that these are our guidelines. And that's dragged icons over here. This is our dashboard. This is a cloud a Plourde. And there was one more activities where his activities. Oops. Ahead. So I'm going to grab all these, drag it over into my Photoshopped file, Alps actually file, and I'm going to drop them outside like that. So here we have this. This is our cloud. This is our dashboard. And this is our activities, so I'm going to align it with this line. You can see how it is easier now for us to do something like that. This is going to be our dashboard. Oops. Everything should be in the gaps. Bash, Lord. And this is a D. We are all done creating this. I hope you have enjoyed that. How We used the specifications given by Google Material Design and we use them to create something like that. Now, there is one more thing. I think it should be in the middle. Same. This one. This should be in the middle. Okay, so now they are looking create. Let's align this icon with groups. There's a line this icon Lexie with these icons are actually so we are going to drag them over here when we have this indicator and everything. So now we have Okay, So, uh, from this layers panel, you can select this one, and you can select sync files. And now you can easily arrange them rather than, you know, fighting with these. Okay, so here we have the dashboard like that. And if I try to combine the dashboard, let's see if this combined There's something weird happening with this SPG file. So I'm not going to combine anything on. Just leave it like that. Okay, So this is how you are going to align everything. Your dashboard is goingto be indicator. This is our indicator. And if I want to increase the size off over indicator toe three DP's. I think I'm going to use this one three d p. Indicator size. Let's move it along with this line. Let's remove this. This is about this was our guide exchange discolor off this background to our primary blue , which was this one. And also for this one, we need the same color. And for the status bar B. G. We're going to use a darker shade, which is this one. Okay, now you can see our dad. Bod is complete. This is going to be the title off our AARP rather than user experience. Design GP Tools Year Talon 18. Okay, No, we have created this top bar, navigation bar or tab are basically this is our air bar with fixed tabs three Debs, And we're going to use that in our design again and again. Okay. So I hope you have enjoyed this lesson. Let's move on to the next lesson where we're going to create the content off this dashboard . Next, rename it the dashboard. So see you soon in the next 30. ♥ Doctor avatar and Graph: now in this lesson, we're going to create the top portion Over here. We have a we have the Everton image off the doctor and some text off the doctor. It's enlarge activity. And then on then we have over here a small circular bar graph spectrograph. Okay, so let's start getting something over here. So we are going to use a doctor title. Doctor, excuse this title. I'm going to use this text because it is in just small text is not a very big text. Let's cleared another line. Let's left the line. It. And for that, I am going to use, um 12 points like this. And for this one, I'm going to use 16 points, 16 points. Next just city in the color will be our text color, which is I think I forgot to add over here. So this is our text color, and this is going to be our gray color. If you want to use this quickly, you can use this one. This is our text. Curricular, actually. Okay, so now what we are going to do is we need to ellipse, and, um, we are going to use 58 The piece which were used in for the shop toe. So here we have 50 years by 58 we're going to replicate it over here. I am pressing aren't option key to replicate it. And now I'm going to do is I'm going toe enable my square grid. Okay. Why I did. I'm going to show you that I'm going to leave 16 margin from here 16 from here. And it is easier for me to align things like that. And now it is in the middle. Everything looks great. My alignment is done. And now I'm going toe grab the doctors image, which is, uh, over here in my assets images, doctor, female, female, female. And I'm going to drop it all here like that. Now I'm going to do is I'm going to make it a big smaller and we're going to select both off them, right click and mosque with ship. That this is ah, very properly. Do it because sometimes I have to, you know, changed image. And now I think we have done it. And for the border, I'm going to use, um four over here and now I think I can't use the border so what I'm going to do over here is I need another circle like this one below this one tohave to show some border. So I'm going to create some border off four oops food that shows the busty 100%. I'm not sure why it is not visible. Okay, so the problem is that border is inside, so I'm going to move it outside. Centra Stroke. Outer outer stroke somethingto outside. So it is now visible. Move it inside. I think similar. The same thing was happening over here, so I moved outside. It is going to show, so it is not showing because it is no masked. So let's use this border. And the color we are using for this border is a bit different, which is, I think, this discreet for the border. I think we need to use the same color for the border. Let's add it so we can use this color something like that use the border to because it is looking too big. Ok, now our everyday our image is done. We are going to create the graph over here. Okay. Now, to create this erecting circular bar graph, we're goingto go through a process. So I'm going to duplicate this one, and we're going to remove the border, Jane, the field to blue and we are going toe replicate again, this one press art option key. And I'm going to change its color toe white or maybe something else like this and make it a bit smaller, moving in the middle off this one. Select both shapes and subject. No, we have this holler ship. This is just a bar, and and there are many ways to hide it now that matter I'm going to use is I'm going to use another shape to hide, cut off the lot half part of this one. So I'm going to move it like this. Move it. This one in the middle like this and selecting both shapes again. We were going to subject, and we are left with this ship. So this is going to be our graph. Okay, so this is our circular progress bar. And, um, for this one, we're going to hide the border and the shadow, and you can see here we have the same effect. Now, if you want to change the color off this one on off course, we're going to change the color to this one. This and now you can see this is our, um, graph. OK, now we're going to put some text over here, which is going to be 50 percent complete and the size will be 10 10 points. Let's move it in the middle like this and we are going to use 11 for the line height and the text color will be this one. Let's so mouth and see how it is looking. It is looking a bit ticker. So if you want toe create elastic line, you can do the same. And also there are many ways to do that. You can also move it or hair or maybe add some shadow to this one, something like that to make it more stylish. So let's hide this dashboard a good over here and let me show you how this look like looks like so you can add some shadow which is going to be this blue color or maybe the same blue over here toe. Have some light around it and you can also make it like 50%. So it is going to look 35% better on 35% and a few more things. You can also use a bit off dull shit of this blue or here like that for the shadow. Okay, so I think our this portion is complete. We have made this. Okay, Right now, if you want some rounded corners around this shape, this is not very much possible because we need to draw it using pen then and I won't. Don't want to waste time with the pen, so I think this technique is good. You, If you want to add some shadows, you can add shadow to this one or on the shape below it. It's up to you. Okay. So we can also add something like this minus two. So shadow is appearing on this side minus five. To shadow is now. Right now, over here on this side. So also, five for this one. Okay, so this is how I'm using two shadows and creating this effect, but I think I'm going to hide this shadow and use this one on Lee. Okay, so now we have completed our this top section. We're going to move to the next section in the next lesson where we're going to design the first guard on the screen 31. ♥ Dashboard Card Top section Design: okay now in distress. And we're going to create this card over here, which is your appraisal updates and everything over here. Go to prison year, and in the next lesson, we're going to create this with the civil burden. Okay, so let's get started on. We're going to go toe over documents that we left. And now we are going toe create on a tangle over here. Um, off the size off, the size is going to be 192 dips off height and 328 is going to be the Okay, So let's align it in the middle like this. And we're not going to use border this time. If you want to use border, you can use some light border north discolor. But if we go to our C C libraries, I think we had this border color is the border color. These are the border colors, basically hoops. So let's aired this color and use it as our border. You can remove the field right now. Okay. So one more thing I forgot is that on the background off the stash board, our color is different, which is F something clicks see what it was. The color It was discolor. F seven F nine f e solar teaching the background F seven F nine f It is already changed. Okay, so this one is going to be white. This stopped one stop rectangle. It is going to be white white. Okay, so we have something closer to this. Ah, and we are going to use four dp off round nestle here you can use to if you want toe, I'm going to zoom out to see how it is looking. OK, so it's looks great. Okay, before that, we're going toe. Um move Few things in tow. Different areas and sections. This is going to be top on tent. So if I hided let's see what is outside of this one. So this is part nine. Let's move it in the top content. These two are also outside. Can going to move it inside or have 50% is going to be top. Let's hide it. Okay, so we have this content in over here. This is our top. Come on. Jeet is our damn body. This is our Margie. It is going to be our guard. Okay, So everything is going to be inside this group. So we are going to create this BG. This is going to be background. Okay, so we have this lined up. We are going toe use this line as a separate or were here something like this. And it is going to have the same color like this one also, if you want to use some shadow around it with the shadow. Okay, so this is the problem. DoubleClick and the shadow video I'm using is one and three for three for the blur and 16% black. Something like this. So it is looking like a card right now. Okay, so we need to drag some icon on here. Some text over here and one button over here. So I'm going to die the text and skip this quickly. Okay, so the text is done, I'm going toe, make it area text, and I'm going to grab it like this. Left a line, and we are going to use something like this. So here we have the next It is not going to be done. It is going to be 16 so make sure it is 16 and this is going to be 24. I guess Let's make it 2016. 20. And the next color is goingto be this one. Lets go over here expired. Discolored because we're using it again and again. Also this color it is also our text color Great X color. Okay, so we have this under control and I'm goingto leave 12 from the top. Let's create the burden now. So the burden is going to be over here like this. No border. The feel is going to be our this primary color secondary color. Basically, I'm going to add it over here again. And I think we used a different second regular, which was this one. So I'm going to add this one again over here, and also I'm going to add it. Toe are seculars over here? Okay, so we have basic things laid out. Maybe we can make it a little bit bigger because we have less face at the top. Something like that we're going to use to BB from NUS at some shadow around it. And the shadow color could be this one or this one or this one, this one. So I'm going to use some very light shadow 40%. Something like that. That's had some Dexter over here. Central line it. We're going to use white color for this text. That's something you something like that. Align it in the middle like this. And I think we need a little bit more longer Britain because we have, lest margins and beddings on the both sides. Okay. So we can also use something like 14 over here because it makes more sense. It it's kind of a status. Okay, so we have. So you are the designers. You can change few things here and there if you want to. 12. OK, so we have 12 over here. What is the problem with this? Because I think this is on sub pixel level 0.5. We're going to remove 0.5. We're going to use for 27 and see what is the distance. They're small for 20 years, and it's going to be 16 pig zealot for 16 points at the bottom. Okay, so our text in everything this everything else is done. And if you want, you can also use 15 Roberto, and let's use this something like this. And I think the 14 is looking better because we have more? Um, you know, more space over here, and it looks better. Okay, so now we're going to replicate this text over here. Okay, so we have this text over here. Let's make it line text, and I'm going to align it over here like this. Let's make this a little bigger in the text color. I'm going to use this. Create, ext, because it is kind of a studious. And let's graham over icons and put them over here. These are asserts thes animal icons. When we had this one, another one is this one's Grab them and brace them over here. Dragged them one by one. Move it inside. Over here. Like that. Also this one. Now I'm going to increase their sizes. So it is going to be 36 and this one is Let's keep this one as it is. Okay, so we are going to use the physical er to be something like this. Text color also for this one center. Line it with this, Actually, what is the distance between this one and the border 12 also for this one, Actually, you should mind your them by putting some 24 big seller 24 dp block over here. So the correct way is that if you want, you can use something like this. 24.24. But you go ahead. Okay, so it is not basically 24. So we are going to use a block off 36. Let's use a 40 40 block. Something like that door here for this one. Let's lock this guard background because we don't need to move a drown. Let's like both off them and move them over here like that. Okay, so basically, you need to do something like that. But we're not using this like this. We are using our eyes to, you know, for aligning things. So I'm going to believe this rectangle like this, and I think they're looking pretty good on Doesn't feel any problem viewing this. And now if I have everything looks, move all these inside this card, and if I want to move it up, I can move it. Something like that. This icon is looking a bit the bottom and does not align with this one. There's a line it to top off this text. Okay, so I think it is looking. Create If you want to move this icon or make it a bit bigger this time, bike on this thumb scan, you can use 36 by 36 something like this and change the color toe. This maybe this one. So this looks great. Also aligned the left edges off these icons, this one in this one like that. Okay, so in the next lesson, we're going to create the next content, which is our next card. So let's move on to the next lesson. 32. ♥ Dashboard Card bottom Design: before we create the second part of this card, I'm going toe show you few things which I did, which I change into this. Okay, so first thing is that I adjusted the size off this text to 16 points, which is basically over party four sides, so I don't want to mess with that as 14 is basically a smaller size we're using. So this is 14. This is 16. Also, this icon is 36 this one I changed to 28 DP's. Okay, so this is going to be continued by 28. Or here also made the size off this 1 98 height and width. Should be 3 28 I'm not sure why it is. Uh see 100 end 20. Okay, so three and 28. Okay, so this is the size. Okay, Now we're going to replicate this one, this card, and let's see where this card waas Okay, so here we have. I'm going to concur, Mandy and we have this another card, and I'm going to drag down over here, and we need we don't need few things, so I'm going to delete them like this line. Okay, so I have deleted the unnecessary things. I'm going to resize it and just drag the new I gone over here, Jane, the decks. So I'm going to speed it up. No. We're going to use the button and change its color to the disabled button, which was our on this color over here. Disabled. Burdened. Okay, so I'm going to click this removed the shadow, and that is all We're going to change the text toe. Um, no need to center. Line it from our shift. See em. And it is in the middle. I think for, uh, for Mac operating system. The shortcuts are a bit different, I think. March, if C o r maybe control Gypsy. I don't remember. Okay, so you can check that out, or you can use just a slack port off them and use these controls over here. Okay? No, If you want to do some minor adjustments like you can see over here, this icon is looking too much close to this left side. Yeah, I think it is just having. Then the distance. I'm going to use 12 dp's and few more adjustments like you can reduce the size of this one toe 140 something like that and move this burden sync button over here. A big top also checked us right and left margins, so it must be 12 DP's. I'm using 12 around the margins, which is, I think, the standard for material design, Google Material Design. And I think that is it. If you want to change anything else, the distance between these two is 12 DP's. If you wanted to increase the 16 deep is you can do that and it is going to look like that also. If you want, remove the shadows, you can remove the shadows, and it is goingto be the same proofs. This is goingto be the same election of the Shadows. It is the basically the effect we designed for in for a shock, because this button is no elevated and this is flagged for it means that this is, uh, this is basically interactive. So that is all about creating this dashboard. I hope you have enjoyed this lesson. Let's move on to the next lesson 33. ♥ Design Activities Screen: before designing the activity screen are moving to the next thing. I'm going to give you some tips over here for arranging. Oh, are being making better use of fight space in your design. Okay, so now if you look at over here here, we have 16 dp margin on both sides for hold this cars. And this these elements No. I'm sure that you might be wondering that this elements looks a bit different from the past . Example. Because these lines over here, you can see that this, uh, text and this image I want toe move it more for the inside the city. Okay, so what we're trying to do all hell is Let me show you. That's let's turn on the grid. Ah, square, Greg. Okay, so let's zoom in and I'm going to show you. You can see here we have this content and it is starting from 1234 almost over here and here we have the content, which is starting from this, and it is also looking outside of this area. So I'm going to do is I'm going to move it inside like this over here. Or maybe at least over here where they match with each other. Ok, so also, we're going to do the same for this. That seemed what we have or here. Okay, so let's group them together. This is a trap. So there we have some off the problems off these extra elements, so I'm going to move it more inside this also this fun. Oops. So maybe I think I need to move these two with each other like that. Okay, now we can also move these two. I picked more over here. Or maybe 24. Okay, so this looks better. Okay, so let's room out and done off this grade and see the results. Now you can see they're looking more aligned. More best metre spaced. Even if you want to move this a bit closer to this. Oh, here. Like this, you can do it. And now you can see they're looking more aligned with each other. Okay, so this is just a simple tiptoe. Align your you a design elements. No. We're going to move toe this activity screen. Let's replicate this dashboard and name it activities. It is. Now we're going toe Enable this in the dashboard top area. Okay, so to enable it, we're going to DoubleClick. DoubleClick and we are going to use our capacity, fill their using 70%. We're going to use 100%. Also this icon. We're going to make it a big 100% of it and do the rest for this one. We're going to disable it or we're going toe use. Ah, bit off less transparency over here. So we are going to use something like 2%. So it is using 70%. Sure. We're going to use 70% for the next. Let's use 70%. Just move this indicator of what? Hair? Select boat off them bones and indicator. And we're going to middle align it like that. Okay, so this is activated. No, we did something. We're here. And for that, we're going to remove all this. Just this one in this one. Maybe we are going to keep this one. We don't need this graph. So you're going to delete it? And also we are going toe Relate these? I guess so. Let's dilute this one. And also this one. No, this text is going toe serve as our top text, which is for our list items were basically creating list items. Let's on group at first. Okay. So in this example, I'm going to use three lines off text over here, and this is our main circle. I'm going to reduce their size to 40 which is actually the size on global treatments. So I'm going to use 40 for this one. Okay, so we have two elements over here. We need one more thing, which is our arrow icon. We're going to drag the arrow icon over here. This is our arrow icon, and we're going to drag it into Adobe X'd. All right, go ahead. That's a line it like that for some. Next inside it. So 01 Something like that wiki toe. Make it a line in the middle slack boat off them like this. Allying it in the middle. Okay, so I think our text and everything eyes almost lined up. Let's move it closer to this one. Because the distance should be, I think, almost. Oops. So we have two overs over here. Let's move the border around it. And now it is exactly 40 dp's. Okay, so this is the exact size Google recommends for some status or images or here. So I'm using this one. Now we're going toe. Move this closer and it is going to be 16 db away from here. This is the exact specifications. Also, this is going to be 16 to be away from over here. Okay, so we have everything almost lined up. Let's change its color toe this blue, which is our active color. And what we need over here is some rectangle with vital er. Or maybe we can use something else. Let's use. Okay, So let's use a rectangle off height off 88 and moved the border. Phil will be fight, and we're going to move it below everything. Okay, so we are done with this one. Let's the's in the middle off this. So what we're going to do is we're going to group them, so let's group them. This is our students, something like that. And we're going to align it in the middle of this. Also, these two were going toe group them into next. There's allowing it in the middle of this one, and also this one. Okay, so we have almost completed this. Lexie, What is the distance from here? Let's make it 24 rather than 25. Okay, so this is done. We need one more line at the bottom for a separator. So I'm going to drop online, and we're going to use discolor this very dim border color, which is going to look very nice over here. And we're going to align it at the bottom off this. Okay, so now you can see we have everything over here. Now, we're going to UN group this text because we're going to update it with using a text file. No, We're going to make a group off all this, and we're going to create repeat greed, or we're going to use a repeat. Weird. So I'm going to select all of them. Click on repeat. Good. And this is our repeat. Good. No. See the magic off, it'll be extra. So we're going to create a repeat great list like that. 3456 items. I guess you're going to need six items over here like this. And now go in the middle of this and try to reduce the size move up, and it is going to be zero toe. Make it perfect. Okay. So you can see, no other list is complete. We are done with this activities. If you want to change anything, you can double click and Jane the colors off this one. Before that, we're going to do one more thing. Okay, so we are going to update this text appraisals. So I have already made a text file, and this is for activities. So I'm going to drag this file and I'm going to drop it on this presence, so it is going to change everything now. The problem is, I think my text was middle aligned, so that created some problems. So before that, we are going to go back to the first step and a boat like this one and make it left aligned Also this one. Make it left a line. Now again, create eso. Repeat, it is already there, so I'm going to repeat it again. Reduce the size in the middle. Okay. And now we are going to drop the next, or here now you can see it doesn't replace our change expedition. Okay, So you can also mentally and it over here, like zero toe something like that. If you want to and ah, a few more things. For example, if I want to change something over here, maybe I want the color off this one to be change toe this this blue hopes. So before that, I'm going toe un group my grid. Okay, so I'm going to change my color off on Lee this item. So this is going to be white, and this is goingto be also white. And let's keep discolor the same, okay? And no, this one we can use. Ah, maybe some other color. Maybe this one. So this is different color scheme than before, but I think I really like it very sharp. Very nice. So this is just to make sure that something is very important happening over here. Or maybe something like that or user needs attention to this one, or this is possible or something like that. Other color scheme you can go with is this one. You can use this background like this, and for this one, you can go with a darker color, which is this one, something like that. And for this you can also go with this darker color. So actually, we I used this one because this is our primary colors. so I don't want it to be used in inside my app a lot. So this screen is complete. This is the magic off repeated grade, and now we're going to duplicate the screen, toe another one and clear the sink screen in the next lesson. 34. ♥ Design Sync Screen: Okay, now in this listen, we're going to create sing screen, and we're going to replicate this one because it is very similar to this screen. So first, we're going to use this stab and activate this sync files over here rather than this activities. So I'm going toe go in and ah, do the same. Make this 70% or 60%. And this text is goingto be 70%. And this is going toe. This is basically feel. So I'm going to lose this one. And this is our This is our icon. There is this icon. Okay, so here we have it. Let's make it 100%. And this line bar is going to move. So this one is activated that to ask, deactivated. And now what we're going to do is we're going to delete this. Delete this Really this I believe this and release this Now we are also going to UN group this, so I'm going toe on group. So we have all these layers on. Now we're going to again great creators B grade. And now we need just four items of 123 and one more like that. No, I'm good. Really Use the space to zero again. Moving up zero. Perfect. And we're going to drop the again. The file over here. Text file If you don't know how this magic actually happens, these are This is basically a text file into four lines and I have already type. So I'm going to drag and drop it onto my Lear, which I want to change this one. And now you can see it has been changed a lot in 44 files, Four entries. If you want to change something over here, you can do that. Men were lead by double clicking, double clicking and entering over here. So I'm going to use this as my disabled screen. So let's make it December. Okay? So first we are going to do is we are going toe news the opacity and make this text capacity to 60%. Oops. So we need to unwrap this Basically first under grid. Where is our grid? That son group it because we're changing the styles or here, so capacity, reducing the opacity off the text capacity toe 60% like that. Let's change its color to something else like this. Or maybe something like that. And also this one. I'm going to use something. Let's user sculler toe opacity this Let's use opacity s so I'm going to make it 60%. Now you can see this looks clearly inactive or disabled because we cannot use it. And if you want to change the status, for example, my images to download our like 10 images, then I can also do one more thing. I can change its color to this one. Something like that. Or maybe darker shade off this one. Let's open up our libraries and see we had other colors over here, so no, I'm going to use a mother killer from Assisi Library. I'm going toe select. I have selected this one. Let's open up this one. And I'm going to use this darker color to emphasize that this is important. Okay, Something like around something like that. So, uh, this is how you use your repeated greed. And if you want to get something inside it, you can do that in Adobe. Actually, I think it's an easier to, you know, change things. I'm going to sink files. Let's rename it. We need one more button and status over here so we can do one thing that let's cleared this bottle appraisal as a symbol. Make it a symbol. Go to symbols library and I'm going to drag and drop it over here like that. You know, I'm going to right click, and I am going toe unwrap. This group is and a group symbol, because I'm going to change some of the very 10 hikes. So here we have sink to cloud. Let's see if it is going to fit in the same size. I'm going to drag the icon over here, basted over here somewhere. Let's drag it inside. This zoom in looks come on, plus ism in, and we need to align it in the middle of this. So I'm going to use this. It's allowing it over here. Then I'm going toe 11 tau 12.12 points or 12 dp's from here and also the text, and this one is going to have quality bees. Looks great. Let's move this in the middle of it. Off hopes sink everything the cloud, but and make a bigger burden. It is easier toe vest or click by any user hopes. Let's make it something again like that. Let's see. What is the distance between? It must be above 12. This looks great. I'm going toe. Align it in the middle. Oops. Next group ID Command G and then Aligned Unlimited. Let's add the status over here on the deck stroller here at the bottom. So let's bring the color off this one toe. Let's changes toe this so this one create ext aligned in the middle. I'm not going to use the boto medium 14. I'm going to use regular 14 over here. Something like that. It is very low at the bottom. So I'm going toe, make it closer to this one. So this looks great. It would be the distance between these two. Uh, OK, so I think this one is done. If you have any questions or want to know more about the specifications, are all that what I used over here? This is basically 88 DP's. I'm not sure why it is showing the one pixel more, but if you double click over it, you can see it is 3 60 by 88 DP, which is a specification for three. Line A three line A list item from Google material design. Okay, so we have created this successfully. We have one screen left, which is on the stab over here is the tab on this screen. I think I forgot to add the tab. So we're going to use some dab icon over here to show the screens this left drawer navigation or here. So let's move on to the next lesson where we're going to create the last screen, which is left drawn navigation. 35. ♥ Nav Drawer Screen: okay, Before we start designing this narration drop we had won some just wanting to fix, which was this one. So we're going to copy this hamburger icon over here hamburger menu, and we're going to paste it. Copy, And we're going to paste it over in all these designs in the place off this over here. So I'm just double clicking to get to this one. Control V. OK, so you can see it has bested in place. So we're going toe use another feature off at o B x D. So we're going toe klik and select with shift by clicking all the different art boards we want toe work with and control or command re. Okay. So you can see I have bested this element multiple times on all these art books. So this is a very cool trick if you want to do that. Okay, so now let's This is our tab bar. And we heard something over here which is in the toolbar contents back at all. We're going to delete it similarly and going to go with this one, so we just need to delete these back arrows. Okay, so we are all done with this, uh, hamburger men, you know, we're going to create the side. Never. And, ah, we are going to use this dashboard as our background, so I'm going to replicate it. Command control, De. So we have another screen or here now I'm going to name it, Never draw. And what I'm going to do is I am going to hide everything except the state of spark. A So I'm going to move the status, but at the top like this and hamburger menu and all other things, I'm going to group them into one group, uh, are called background. Okay, so I'm going to lock it right now so we don't mistakenly move this background. Now we're going to go to our you I get by and Reggie way by great simple studio, And we're going toe crab this screen and what we actually need is let's move to this layers panel. We need this navigation draw side navigation draw redoubt this status bar. Even if you want to copy the status part, you can copy it. And also this background. Okay, So what we don't need is this one hopes So we have some problem. We're here any hope. Okay, so let's select this just right now. Commanded control or command. See? And we are going to paste it on the top off this one. Okay, so now you can see of a navigation. Draught is here. Let's see, what is the other earlier over here, which is this one? This is background on. And this is let's copy this background and based it over here. Okay, so now we're going to move this overlay at the back. But the status body is going to be at the top like this, and what we are going to do is we're going to use some capacity to this 50%. Let's make it 50% capacity like that. Okay, so this is over here, and now we are going to make it. Let's develop, click it and use this background, and I am going toe crab it over here and make it full of it. Okay, so the hide is full. Now, we have set up our main things over here. Let's Gleaton the ones we don't need. Okay, so maybe we don't need that's this is basically a list eso I'm going to select everything below this We just need three off them. Okay, so we are going to use one is change profile or maybe select. Ah, appraisal year. Also over here. We're going to use the name off our doctor. Let's use this email like whatever it is over here. Let's see. Place this image over here, every tar and I am going to change the big map over here to that straggler doctors image. You were here images, and this is our nice looking Dr. There's a place it all here like this, and I'm going to remove this big map, size it and click somewhere else. And you can see now it has already clipped. So I'm going to double click and select this movie. Drowned. Let's make it a bit smaller like that. Okay, so this looks good. I'm not sure, but I think this one looks very close to this border, so I'm going to move it below. Okay, so let's see. What? Where is the size of this one? So this is our list, So I think we should move of a list. At least it, um it dp's down. So something like that. Now, let me see what is the distance. 10. Okay, so now it is looking better because I think that material design Google material designed they have some separation between list and other items off a DP, at least. So now we have encourage separation, and we just need to change our icons over here. Okay, So I'm going to drag icons over here. Also, if you can, you can change this background, which is this mask image. So we can change it over here like that. And I'm going to bring this background from my SS folder, and I'm going to replace with this one. I just dragged the image on top of this one. Okay, so if I move now outside of this, it is going to be something like that. Okay, So one more thing, if you want, you can also overlay some more things on top off it like this one, and I'm going to fill it with the discolor, and I'm going to use some capacity like that. Maybe something like this take outside and you can see this is the same effect we were looking for. Okay, so let's drag this image in the middle. Oops. Something like that. Okay, Now we're going to replace these icons. So let's get to this. The last task icons. And here we have the icon. This is a profile one. And this is the law goat. And the change here is this one. So I'm going to grab all of them, drag it into my file, based them in the best board, so they don't mixed up over here. And what I'm going to do is copy and go into the this role inbox icon based it over here. No, I'm going to align it on top off this. I gone and just leave them box icon key. And now what I'm gonna do is I'm going to change the color to this highlight color, which was our this. Ah, secondary highlight color. So this is how it is going to look like. And for this one, you can see they have used some color over hair, which is let me show you what is the color off this one? 54% capacity for Phil black color. So I'm going to do is okay, so we're all good. There is one more thing. If you want to do it, you can move this logo at the bottom and put some line separation. So, law, goat is different from all this. But if you want to keep it over here, that's up to you know, I'm going to read all these icons, and I think other navigation draw is done. This part is going to be at the top off. The status part is going to be at the top off. Everything okay? Because it has more elevation and then both off these things. Okay, so that is all about this design. I have shown you how to complete completely designed all these. Let's selectees and move them. Or here, let's move it inside These. Okay, so we have designed six screens and ah, thank you for taking your time and building with me in all these lengthy exercises. I hope you have enjoyed this lesson and learned the Google design Madrid design specifications and learn how to use you. I gets to quickly build your design. Okay, So what we are doing over here is we are just teeming. Ah, based on colors and typography and a few off the elements, sizes and distances using material, Google material design guidelines, and I hope you have enjoyed this lesson. The next lesson. We are going to use batch export feature over here, which is in export badge export to export our all the assets into different resolution buckets. For xxx dp i xx e p i three extra works one next 1.5 x and all these different resolutions which are supported by Google material designing. If you have any questions to ask me, let's move on to the next lesson. 36. ♥ Final Assignment Adobe XD: Okay. Up until know you have learned all about Android material design and how you can use android material designed to design awesome looking APS. Now, you have seen me doing one exercise for you. Now, I want you to create another assignment. This is going to be your last assignment. So you are going to create Ah, very simple messaging app for me. And I just want you to create three screens. So let me show you what what and which screens you are going to show me for your final assignments. Create a team ah, color scheme. And apply that to material design. Used y kids and ah, uh, try to bring this life. You can use your own ideas if you want to. You can use your own custom force if you want toe. But I want thes three screens from you. OK, so I'm going to switch to my desktop and we will see what I want actually want from you. Okay? Okay. Now you can see I am on this messages plus SMS app and you can see I just want these three screens from one. Is this inbox which have all the different contacts and all the different messages sent from your friends and the date and maybe the time over here. And we're using three fixed tabs over here you can see at the top, and the next screen will be the messaging screen where the different messages appear and you talk to your friends and then the last queen will be contact. Okay, So, SMS I wanted our want you to design sm ists, contacts and calls. If you want to skip the call, you can use this SMS and thes two screens, actually abort. Okay, so three screens. One is with this SMS where you are talking or chatting with your friends. One with the all these contacts and one this inbox where you have all these smmes. So try to use your white kids. I have provided you on during the scores. Try to reinvent the wheel. So go ahead and designed this exercise. I'm going to review this exercise and I will give you tips on hot. Improve your design skills. Take the screenshot off shorts off. Your designs are export them as jeopardy. You can design in three x two x or four x xxx sdp I but make sure you create nice looking, good sized art board screen where I can easily view them. Don't try to submit to large files, so it will be difficult for me to view them separately. Okay, so make sure the images you are going to export from your art boards to show me embedded. You can use some more cup if you want to. You can download any Samsung or any android as phone mock up and put those screens in three different markups and send that to me. That's a good way to present your designs. Okay, so I hope and see far seeing forward and waiting for your assignments who start designing them now. 37. ♥ Batch export assets in Adobe XD: Okay. Now, in this lesson, we are going to take care off the assets extraction part off our design. Now, asset extraction is basically we need to give our developers all the different resolutions for for next two x three x So one image is going to be like duplicated 45 times. So we have to give five or four files to support all the different density buckets Google Android has eyes supported is supporting right now. So what we're going to do is there's a very creative function in Adobe X'd. So we're going to click this and make it batch for Mark for patch exports. So this is our logo. Make sure you are going to name it local big, something like that. And also this local. I'm going to name it Logo Small, something like that. So I'm going to just mark this So this is going to be in the badge export. Also, this one. I'm going to mark it as a badge export. Also, if you want toe, use this logging over here, you can select both off them. Come on G and use this as a bar Bt and Logan and also market as badge export. So you were going to bat export all these assets also this But I know here, and this is our burden. Sign up. So I'm going to market as my asset. So keep doing it for all the assets you have used. You can also mark these ah, icons over here. Okay. So you can use these icons and mark them, or you're you let your design our developers do the rest. Okay? So you they can get these icons from the system. I cause of material designs. So you don't need to worry about extracting all these icons. Okay, so maybe this button, we need this patent Subedi in a Brazil. I'm going toe market. This is our sink wooden. Okay, so I'm going to call it sink, so make sure you are naming them properly. You can also talk to your developers about naming conventions, what they are using, whether there's using dash or underscore. Oh, are some other method off naming their fires something like that. Okay, so maybe we can expect this. Okay, so this one button, I'm going to be the n sync cloud. Something like that. Okay, So once you have selected all your extract and all the assets you want to extract. Just we are going toe goto this menu over here Export and batch. So it is going to export all the assets we have marked, so make sure you have marked them properly. Okay, so on this export screen, we're going to select Android and we have designed at 100% MDP. I never change this. This is the folder I have selected. You can export to whatever folder you want. Form it. Always try to use BMG because it can support the transparency here. Okay, so, no, I'm going to click on export. It is going to export all the assets. Let's see, where are those asserts and how they have been exported into multiple different sizes. Okay, Now I'm in my export folder and you can see it has created all the different resolution. Supported asserts the all the assets that go into your app. They are going to be in these folders. Tribal sdvi triable, ldb I m d b a x DPS xdb I and triple X HD via So if we open up this one, you can see the sizes are very big you can see the buttons are very big. The logo is very big, so if we go to this one, you can see all the assets are a bit medium sized for extra extra high definition screens and then these and then smaller ones for this one. So if we click on this, you can see where the teeny tiny log in Britain. So normally I think we're not going toe. Need these two LDP and STP I we're going to need X m x x x and triple X. So that is how you use your adobe X'd to extract all the assets used in your app and give it to your developers. In the next lesson, we're going to learn how to use Zeppelin dressed. Extract all the colors, gorge and everything using your Adobe X'd and give it to your developers. And it will help your developers quickly build the color scheme and typography or your off your app, or even see the specifications that wart button on the size off the burden in DP's. What are the distances off different buttons and spell elements in DP's? So this is a very great tool. So in the next lesson, We're going to use Zeppelin. So for that, I'm going to go to my Mac. Eso next screen recording will be from my I Mac eso See you soon in the next lesson. 38. ♥ Using Zeplin & Android Adobe XD on MAC: Okay, now in this listen, we're going to use Zeppelin dot io for extracting our all the assets and all the different developers specifications and all our style guards and all our distances between different elements using Zeppelin dot io If you have taken my ah, it'll be extra course or workflow more than represent calls. You might be already familiar with Zeppelin dot io. So know what you need to do is you can sign up free and you need to download Zeppelin dot io for your operating system. Right now, it is working with the Mac app. You can see here we have the Mac app and there's also a windows app, but at O b x d Just support right now on the Mac app for Mac users. So if you are a Mac user, I think you are in luck. You can easily extract all your assets and everything using this. Okay, So download this app, install it, and you are going to launch this app. And once you launch it, it is going to show something like this. Okay, so here we have this Zeppelin. I have deleted my previous projects, so there will be only 13 projects. So you are in a free more so you just can keep one project. So I'm going to create fun project and it is going to be android. And I'm going toe press on, create. Okay. So I can change the name, Toe GP tools, Something like that. Okay. And extensions. They have already added that it is going to use examine. Now you can see here they also have the guide. If you click on it or txt, they're going to show you that you need to go to Export and Zeppelin for sketch on bx defict. Mind for the shops. Easy. So these are the full four APS they are supporting right now, So I'm going to switch to my Adobe X'd and you can see over here. Here's the file were designed. I have shared it using my cloud CC libraries. So how? I opened up this one open and I went toe creative cloud files, and this is my extra in class and write file. So I have opened up over here, and now what we're going to do is we're going to select all the art bores go to file export in CEPAL in. Okay, So this is the project we won't replace with import. And we designed it MMD p I because it is the Von X. So we're going to select this one, so change and click on here, and it will start uploading different screens. If any screen is failed, you can click over here and retry once more. Okay, so we have all the screens uploaded. Now we can mingle with them and choose different colors and typography and everything. Okay, so first I'm going to go with this screen logon screen. Now I have opened up this screen and you can see if I click over here it is showing me the size in DP's. Okay, So the distance between these two is 21 db and ah, this is ah the distances from both sides. 101101 day be from carpets. 213 dp's. And if you look on the right side here we have this panel where we can add our typefaces. Okay, so this these are the burdens where we can add the color. So if you want to add this color to our style guide, click on over here and it is added. OK, Similarly, if I want to add the Styx face or the style, I'm gonna go and call it Ah mean AP name something like that. Press enter. And that is all. Okay, now you can see at the bottom there is an example court, which your designers are going to love. Really love. Okay, you can share these video developers and ah, they are going toe. Get the content you can see Here is ah, content tippy toes. They can copy it from here. Also this one this is Ah, text over here. They can copy again. You can add all these colors. These are more colors you can are add these This is in the style I can see like sub heading 14 sp. Okay, Something like that. Okay, so right now I'm adding all my different return on different colors. You can see Here is my color. Is my input next active? Something like this on. Then we have this password forgot Password. It is a link. So I'm going toe call it link next. Something like this. So this is how you are going toe build up your Steiger juicing Zeppelin dart ire tool. Okay, so one more thing this is our assets are now you can see you can download it into five different BND farmers. So your developers, they're going toe, Just click this one and it is going to download all the assets into this folder. So this is the four dry created Zeppelin so you can export to this folder like that and you can see if I click on this button. It is showing me the size of this, but I am just pressing my key over here 90 dp by 42 db So this is really good. Your developers, they need to the sizes in DP's Okay, not the pictures. So similarly, if you go to other screens, you can have different icons over here. These are system icons also the sizes off. These you can see this is 80 80 p high and 3 60 db vied. So for this one, it is a three db in height. So all these you can have them who are here. Ok, also, if you double click over here, you can see here we have the color, so I can I'm going to add this primary color. This is also our killer for the status bar. So I'm going to add this. Okay, so let's call it status bar. So I know that discolor belongs to state a spot. Also, this color you can add at end like F bar, something like that. So your developers can know that this is this belongs to amber. So you are going toe Add all different colors and all different textiles. This is your 12 point or 12 SB um next something like this. This is your white text. So you are also going to use this white light. Next her award A medium. It is for our air bar. So I'm going to use a bottle here. Something like that. Back. Go back to dashboard. So you were going to keep doing this for all your app And select every style textile you have used every color you have used. And then we're going to go to the style guide and you can see here we have all the medic done automatically. Here we have all the colors Long, gray, black like maybe link steal a black dark blue grey action bar. So we have all these colors and on the right side, you can see if I make it up it for either. You can see this is the android and developer scored for their textiles and their color palettes. So all the color palettes and stack textile will be generated automatically and they can just copy and paste that cold over here. Okay, so that is all about how you can use Zeppelin. If you want to add more extensions or you want to share this with someone you can add, invite others like clicking over here, invite by email or use a name. Also, you can add to slack on. This is the link. You can copy the link and ah, one more thing is that if you want oh, add more extensions or if you are developing in any other language your developers are they're not using Androids told you. Then you can go to explore extensions, and it is going to show you other extensions that have bean developed by Zeppelin or they are developed open source. You can see your hair swift Objective C exam, Ill swift and objective C is for, um, Mac or IOS iPhones. CSS less s is for Web. A CSS is also stylist for Web. The egg native is another one. So if you want to add you can our air to Zeppelin You can choose your product gp tools and you can add to Zeppelin. And ah, that is how you can use your other extension over here. Okay. So once I'm done, I'm going toe click over here. You can see these are one I can select anyone. I can disable anyone if you want to. If I want react Native court. I'm going to get that s so here we have off hoops eso here we have the direct Oops. So here we have all the react native court. It is no different, so you can see constant colors and content. Textiles. This is totally different. Different style guide in different cording pattern. You can see at the top there saying that it's reignited If you want to change something or a few settings off this you can use heck that assume a large be at yourself or whatever. So you can tell your developers that this is the app we are going to work with and it will be easier for you to collaborate with your developers on this android material design project. I hope you have enjoyed this lesson. If I get that time, I'm goingto make the video using the ever scored on. This is another software or app for collaborating with your developers on any air project or any project. And ah, that is all. If you have any questions, you asked me, let's move on to the next lesson. 39. ♥ 9-patch Adobe XD: Now I am going to talk about a very different concept which is called nine Patch Tool and nine past tool generator. There are a lot off for different tools online where you can use them as a designer toe. Create nine patch artwork for your developers. Know what? Actually nine patch means is actually, For example, if you have seen buttons on your android devices or ah, on your android tablets. Okay, So if you have seen those buttons, you can see that if that same burden is on a mobile device, for example, let me show you this one this sink to everything, but it can be expanded by using nine patch artwork. Okay, So, for example, if you're usually switching to tablet mode or is using a tablet device to access your ah, this ah, app what it does it this image, this nine patch image, What it is going to do is it is going to expand this button automatically to accommodate on the next screen. So if your tablet screen button is a bigger one, we're going to use just one graphic element to produce multiple size buttons which are going to be generated automatically by android studio and recording. Okay, so the concept is very simple. What we're going to do is we just need this background at the back, which is this rectangle four. And I'm going to right click and export it. Export by export, selected on right. And I'm going to export it to my folder. Okay? No, I'm going toe access my folder and you can pick up anyone off these eso. I'm going to pick up this one x x HDP I, and I'm going to drag it and drop it over here. Okay, so this is a very simple tool. And now you can see here we have some off the boundaries over here on top off it and ah, the let me select this one xx STP. I was selected, actually. Okay, So select this act. The resolution you have designed for of this image. Okay, So what it is going to do is you are going to You are seeing some lines over here. These are few black lines on left and right. And top and bottom. First, we're going to understand what these lines actually mean. So the top and the left line Okay, so the stop line and the left line. It means that this section this whole section off despondent from top to bottom, including this shadow. It is going to be repeated if the button is going to expand in the horizontal direction. Okay, so this is going to repeat, Repeat. These pigs are going to repeat over here, over here or here, and these corners will be pushed away. OK, so in this in this kind off act, what they're trying to do is they are expanding the burden, but the corners and this shadow, they're not going to, you know, um, get pixelated or get distorted. Okay, so this portion and this portion is going to be this is going to be repeated. So that is why it is called Patch nine Batch. It is repeating this patch again and again. Okay, So Okay, now this is about the repeated repeating off the sections off this graphic. Now, these two lines on the right and are at the bottom. These means the content petting. So where the content or the text on this button is going to fall? Whether it is going to take from this to this whole button in this shadow area. No, it is not going to take it. Take that space. So we're going to go toe content bedding and we're going toe just it like that. And we we need our content or the button text over here inside the Spartan. So now you can see these lines have been No, These lines are smaller and they have been shortened because we have fixed up adding content fighting over here. Okay, so now you can see these are different resolutions for MDP I extra ph d p i xx sdp I and triple X HDP I Okay, so it is going toe generate all the graphics for all different resolutions. And we are going to give just one file this background with shadow included, and your developers are going toe kiss your hands that we can use this simple graphic and ah, uh, into any system, any tablet, anything. OK, so it is going to expand on its own. So that is the major concept behind this. Ah, um nine pad generator. Optical bones is I think, the visible re shore, maybe something like that, but I don't know much about it. And you don't need to worry about it. Just make sure that your stretch regions and content betting is defined perfectly. Okay, once you are done with this, you are going to click on this town. Lord Zip and it is going toe. Download the file. Let me extract this file and ah, let's open it. And these are the 45 resolution that is going to support STP MDP I all different resolution that if you're developed, we can open it. You can see these lines on this graphic, okay? And your quarters, they can use these and they can generate any kind or any size off this pardon without distorting its shadow or its corners. Okay, so that is the secret behind this. So now you know how you can extract your ah buttons. Are these kind off graphics on these nine patch graphics from over here? And one more thing is, it's naming convention. You can see at the end off the name off this file there is appended point dot nine dot PNG . So every file you're going toe name, you're going toe. Name it and the and you're going to append door to nine. So it is basically telling your system that is nine patch file. So I hope you have enjoyed this lesson. You can and do this kind of nine patchwork with all the burdens. I think you just need to produce one for all these burdens and maybe one for this one for this darker blue button and you're done, you don't need toe create like hundreds of files. Just create to these nine patch graphic assets, and then they are going to serve all the different buttons on your device. I hope you have enjoyed this lesson. And if you have any questions regarding nine Pashto rule or whatever you can ask me regarding Android, that material design, I hope you have enjoyed this lesson. Let's move on and learned something more. 40. Whats New Material Design 2.0: Okay, So those a few who are wandering that Why I haven't told anything about material designed to point or the latest version of material design. If you look at the material design design guidelines, they have totally revamped them, and they have totally changed everything. But most off the 90% of the specifications or design specs, they are the same. So I'm going to show you in these two or three lessons that what is new in material design and how you can get benefit from or read out or take guidance from this new material design guidelines. Okay, so let's start with what's new. So they have added few new things. Thes are three new things text fields. They have different patron. Now the text field pattern is different. There are two persons that they're following based on their evidence based research is then we have this extended f A B. I'm going to show all of the's you to you. Okay, then we have this layer density. So rather than using desktop play hours and, um, mobile or high density layers, they have changed it toe low density and high density. So if you are working on a bigger screen where users can have a mouse to click. Then they call it High density or ah, a screen which is very, very high density, like 600 BB I or very dense screen, where you can use smaller DP sizes toe. You know, the user can easily tap that dp sides because it is very dense. Okay, so let's get started. I'm going to show you a few things. First, I'm going to show you these text fields than extended F babies than this density layout thing. Okay, so here we have the new Leo. This is basically an old patron which is getting very popular with the This title moves up and you can see this is the new text field, which is better, I think from the previous one in terms off user experience and following the pattern that this is actually a text field. So I'm going to show you where they have. This is basically two types of foods. One is this one. This is our client field with the label. This is ah, field with the outline. Is Onley stroke at the bottom? Okay, so this is normal and this is activities. So once someone click on it, it is going toe. Move the label up and input input will be highlighted like this. So I'm going to show you the actual interaction. Okay, so you can see there is interaction. So if you want any if you want to use any off this these into your design you can use these into your design and they're going to interact like that. So I really love this, this new patron and ah, this is you know Ah, And if you want to know the specifications you can and go below and there are few more alterations you can see here, you can team it according to your app, you can see over here. Actually, I have told that what is this primary on surface and answer for scullers mean So you can see they're just using one vita color in different variations. And to show this text fields, you can see here they have this teeming. So actually, in this a new version off material design. You can team your app whatever color you want. So this is really, I think, really good for designers, and they are not limiting them and you can see over here has another example on there they are using custom typefaces with custom teaming. And ah, if I go down below, you can see Here are the text field specifications 56 hide to 80. These are almost the same 16 one DP line and then we have 12 dp 12 dp on both sides. This is their default fighting for I think these kind of things where there is some text inside some container. So if you want oh, see more you can go on and click on the specs and you can hide bedding and dimensions and text baseline. So text baseline is that the text is going to sit on this line and their baseline is based on four db text baselines. So make sure if you don't know about baseline, you should see my course typographic for you are designers. Now I'm going toe, Go back. Okay, so this is the new, uh, thing which is teaming and these two new patrons for text fields. Now let's see what they have this fab. I did go there a material designed to point or okay, So here is the Fab, which is card floating action, but And it is going toe have different patrons. Let me show you. OK, so here is in a direction it can perform. If you click on this fair but floating action button, it is going to show you more default actions you can do with this screen. You can see over here this is their new. You can see the any mission behind it. It is having some light, dread, color and emission. And this icon is moving and moving back into a transition. So these are few things. Also, they are showing the interactions on that It is context bear. So if you try to switch between two items at the top, they are going to change this. Ah, I can over here. Okay, so you can see I come toe has changed. So these are few behaviors. They have added a few more things and they have shown that you are not going to use more than five over here. So if you are using something like that, this is not a good pattern to use. Okay? Also, you can see you can do that. You can do that. And so this is a very new interaction. I think they are adding a few more things like you can see what Here. This is totally different Composed, new and sent to all of the's. Also, you can see you cannot add too many items are very few items. So if you want one, it is going to be sporting like treat four or five, maybe maximum items. So this is their new fab Britain. It is also going to show it in this extended fab. This is extended fab and it is going to show in this label and plus icon. So it is going to experience something like that. So it is going to float on top off everything at Cardiff. You are browsing into e commerce project R E commerce app. It is going to show something like that. You can also expand it over here. If you remember the margins on both sides, it's 16 dp's so don't. So keep that in mind. Here we have that you cannot use two lines. You need toe, do something like that. Don't use a lot off large text on these kind of Britain's or fabs floating action button. Okay, so this is about floating action button. They have added a few more instructions and an emissions. I really love them. Okay, now let's talk about the density that they were talking about. What is a dense tuk? So you can see the default density is that way are supporting large start tap target targets and margins. So it is easier for the user to tap. OK, but on the high density, we are going to use smaller things if it improves his experience. So it means that there are smaller tap targets on this. These high density screens. Okay, so what? I have industry. So here is a very simple example. You can see this is at list off items and you need to check them so their minimum default is 48 DP's for any touch target or anything you need to interact with. No, but on your high density screen, you can reduce the size of 30 toe. So it means that you can see this is my mouse cursor, and I can easily tap on it or click on it using my mouth. But for a finger, it should be something like that. Similarly, this is thes. Our text means 44 56. This is their standard and you can see over here. Here are action buttons. Thes are at the bottom, like done or maybe view file or something like that You can see or hear the touch. Target tap target is basically 52. This is the area defined for these two 36 here we have 24. So this is how you can use and apply that few things you need toe Ah, wide is if something is focused task like some f or something. The portion off app is asking you for some input. You are not going to use high density. Apply has the high density. You are always going to use low density. OK, so this is one thing. So there's another example here you can see this is a high density screen and they are using very wide margins. Okay, So smaller rawhide and the margins are very vice so it can have more space because we have larger screen size No, on a smaller screen size, maybe a tablet or smaller tablets. You can see they are using smaller narrow margins and the height off every true is a bit larger. So this is actually they're accommodating for the space and, ah, the resolution. Now these This is about touch target specifications. These are the same. 36 is the height of the burden minimum, but it's a tap target is going to be 48. Similarly, an icon is 24 but a step agonist 48 dp's. Similarly, for these bigger icons system icons, the 48 is the tap size. This is the minimum size. Okay, so again, these are men. There are many examples for all these density related items. Line height. You can also change the line height for typography densities like you can see here we have ah, largest screen or high density screen where we can shorten our line high so you can see or hear. This is sitting at the line height off 20 baseline 20 Be a sign and here's you can see we have 30 toe, so these two lines are two separate from each other. So here we have low density screen and here we have high density asking you can see they're based Sign is the same for the Pickard line. So that is all about these three new things that they have, they are offering. I hope you have enjoyed this lesson. I'm going to explain a few more items in the next two lessons, so let's move on to the next lesson. 41. New Options to Design for: a few exciting things I would like to discuss over here about material designed to point or new version, which is they are supporting few more design elements like curved corners and edges and rounded corners. So you can see here we have this example on their website shine app. If you haven't watched Google Material Design Conference, I think this is just you need to know. OK, so you can see over here there is an edged surface over here and this container or here it has some edge on the left side because their shrine is the I gone off the shine is this diamond? So they are using this girl for showing some diamond shape. Okay, so on also on there, you can see what it add to cart Icon on. There is an edge over here. Okay, so this is very different. They are supporting all these new things. If you look at this one, you can see here it in the This is the same app and it is on a tablet size. And here they are showing that how you can show your or transform your whole material designed teaming into new whole level on different grid lines and different desktop mobile and tablet devices. And ah, you can see here they have the Spartan add to cart button. You can see it is really looking nice. The shadows are also very light and them they are not looking like hard shadows from material design 1.0 and also the use off this custom text type of four style. This is making looking this website really cool. Okay, so you can see the text they're using is Rubik light these This is their typographic scale . 34 24 2014 16 14 14 12 14 96 is their biggest headline. So this is really good Brie designers and our developers, they both have some options to, you know, he used their creativity into more ways other than having ah, street edge or here. Then there's another example This one, this is screen And if you look at it, this is also having some rounded corners you can see or hear. Oh, here. So this is really cool. I like it. We have more options to work with. We have more areas are more you can see over here. This is their tab Tab AB are you can see it is totally different from what we designed over here. So we are very free to, you know, design something like that. So it is looking really cool on it is not looking totally material design. It is looking that they have some given some you can say space to work with. So they have given some more options to designers to explore their creativity. So I really love this. This new options you can see over here at the bottom of our cars. These are having some rounded corners. They're looking really nice. Really cool. So keep that in mind If you're designing something, you are now open to design few things like that. If you're designers are your developers Sorry. If you're developers, say that we can't designed this. This is not possible in material design that you can show them these examples on material design guidelines. Okay, so that is all about this new some openness in design options for designers and even developers. I hope you have enjoyed this lesson. Let's move on to the next lesson. 42. Spacing Grid in Material 2.0: as I have mentioned before in my lesson that their spacing method and their baseline guide and how you are going to use key line mattresses in your mature design. This is basically the main base off understanding material design and how you can use it. Now you can see over here everything is aligned to ADP. I'm quickly going through it because I have already discussed it. Four D B grade For text, you can see the small boxes. Four db This larger 12 boxes is ADP. So, Eddie, be top margin padding at the bottom 12 deep Eat. This is for the partum navigation. Over here you can see your part of navigation line before DP cred. And if you look at over here on the Abbott and Floating Action button aligned toe ADP grade . So for DP based language for text you can see or hear here we have Kevin and good morning. You can see they are aligning with this. These small lines or hair red lines, they are basically each line is four dp apart or four dips apart from each other. So here we have again four db even if you are using four d B or a D. P. They are multiples off each other so everything is going to align. If you lined with a deep, it is also going to align with four DP So here you can see on. Then we have this list and 48 dp for single item and you can see at the top They have left three lines, so it means 12 dp off top padding or margin. So keep that in mind. They're using 12 dp a lot off times as their margin you can see over here. So this is this is making sense. You are going to connect all the items with each other. Then this is the same. The title for all these is going toe have 72 dp off margin from the left. So this is all the same. You can go ahead and you can look at all these. Okay, so now you can see they have this. Ah, there block size 64 for this is for other screens but ends and all these. Okay, so you can check out this spacing method. I have shown you the basis off the spacing method. This is the same. But I thought I should explain it again because they have changed their material design guide. And it's look, maybe you might get confused that what is happening over here? Now you can see here we have this touch target. I have already disgusted, So I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 43. Buttons Types and States: Okay. Now, in this lesson, I'm going to explain our revised you more about Britain's. There are a few different types of but and this is simple text, but And this is outlined, but and this is container, but And this is another button, which is toggle button. So these are four different types of weapons. Okay, so there is one more thing that is related to this button. This button shows mawr emphasis. It is more strong. It has more heavy container. This has less emphasis. So your eyes are more attracted to this one than this one than this one. So one more thing. All the text is capital. This is another one. I think I You didn't use it in my design, but I think you should use it so but didn't have all caps. And that is how. Okay, So this emphasis is basically from visual design concept that the things that need more attention, they must have some more vivid visual. Wait, So they are using this very properly. Okay, so you can see these are their design principles. If you don't know what they are identifiable findable clear. So make sure your buttons are clear, they are easily findable User can easily see them. This is a four dances and signifiers if you remember my lesson from user experience designed for beginners identifiable. And they can easily be a separately from other elements that this is a burden. Okay, so these are a few things I wanted to show you before I move toe, you know, a few more next lessons, and then we have this hierarchy in placement again. They have shown high emphasis media. Memphis is low emphasis. So if you are using a very sharp color, it is means high emphasis. Okay, so here's you can see these are a few items over here, and ah, this button is going to be most having the more emphasis because it is highlighted and also elevated and bigger in size. So that is what they are showing over here contained. But and this is also has high emphasis. This has the highest emphasis than this one and then this one. Okay, so this emphasis thing, I think I forgot to tell you about this one, and I think they have shown it in their material designed to point or guide, ready, seriously, and Now you can see over here. This is how these buttons are being used there, showing that you should use them like that or not. Okay, So don't use too much large text for these kind of parents like Ezard table at this cafe. And also, I think this isn't capitalized. So they are giving you the caution that although it is not a very big other, but you should not do it. I hope you have enjoyed this lessons. These are a few different states who were focused breast. This is going toe. Do some animation. This is disabled. I think the use disabled by using opacity to 50%. Okay, so, uh, that is all. I think you need to know these states, and you need to know what is the emphasis off these buttons and how to use them. I hope you have enjoyed this lesson. If you have any questions to ask me, let's move on to the next lesson. 44. List Items In Material 2.0: Now let's talk about material designed to point or lists. You can see here is the crane material team. And they have these lists, these images and these places and they're available properties. Okay, so, similarly, they have fuel specifications. Over here, there are three types off lists of online, and then we have two lines over here. You can see double line, and then we have three line. Okay, So if you want to see the specifications off each of them, you can click over here and the petting on both sides is 16 for these. Okay, 16 for this list item. Let's hide the petting. Now we have Dimension off. 88 for two lines. It's 72 dp's and forcing a line. I think it's 56. Let me see. Okay. Yes. Forcing the line. It's 56. Okay, So if you want to see any of the specifications, you can click over here and let me show you the example of two lines. And here we have the 64. This is another 1 64 with two lines. I think they are using this. And Gmail, I guess. Reading his 2016 on both sides. 28. I think this is a matter of extra hair. For example, two minutes ago or something like that. So they are using this block. We're here. Then we have 28 from the top baselines of 28 DP's. It is going to sit on the 28 dp line over here. Okay. And for this text, it is going to be 20 on DP Blow this one. So basically the line height is trying to dp over here between these two tax over here. Okay, so that is all about this. You can see the image size over here. This is 40 DPS, which I have used in my course. And if you want to include some icon over here, you can see if I hide it. There's an icon, small Bluetooth icon. It is used by 24 by 24 dp and 32 dp is the distance between the small icon and the lines. And if you have bigger, I gone. The distance is 16. So, for example, maybe some marital image for the person who have emailed you. So you can use these to form a square or circle, or you can use image off 100 by 50 60 Piece over here. Ok, so these are the new specifications they are looking create. And I really love how they have implemented this baseline concept in it. Here we have the ADP and ADP top bottom margin or petting You can see for the list items. Okay, so I think that's it. Okay, so this is for the collapse. An expanded list item. So if we have something like that, they have 48 dp. The smallest 24 is the icon expended item, and this is the same for everything. 72 dp Where the text is going toe a line or here on the left side. So 72 dp from the left is our first a vertical line where the text is going toe allying. Okay, so that is all about lists. So I hope you have, like, this Material design guide 2.0, for the lists. Most of the specifications. 90% of the same. I think maybe more than 90% I if I guess I think it's 95%. Okay, if you have any questions to ask me, let's move on to the next lesson 45. Bottom and Top TabBar: Okay, So I was browsing through this material design two point or guideline, and I have seen something new, which is a bar bottom. So this is a new trend. Basically, it is based on user experience design, and it is such that anything that facilitates action should be closer toe where you were going, toe press or tap on the screen. So mostly users, they are going to use the term. And this kind of navigation it is going to facilitate come usage more on easily. User can tap on this search bar also this hamburger icon and also this floating action, but in a fab and also this many. But Okay, so this is another new patron. What dated is they actually implemented the same one at the bottom. Okay, so one more thing is that you can also do something like this over here. It is flexible. Okay, so here they have some off the guidelines that don't just use it for one action or here try to addict Lee store three actions. So bottom everybody's going to provide three actions like the menu bar and this such bar. This more I can All right. These two off them. Okay, so that is a new thing, which I think that came into this one. And you can see over here. This is this is these are a few more patrons were hair centered Fab Britain. Then they have this and fab at the one side floating action button is on the right and are the other actions are at the bottom like this. So this is new patron. If you want to see more about what you can learn about it and what you can see, this is another pattern. I really love this insect fab. So there are a lot of new things that are coming for designers in this material designed to point and you can see let's see what is the interaction and how they look like. So let's see this way, so really like it. Okay, so back. And then again showing the the introduction so you can see now this inbox is using few actions. When someone presses on the email, this fair button or this floating action button, it changes toe reply button and few more actions. I really love this new one. Interaction and behaviour. I really love this. Okay, so you can use this kind of things in your new APS using material designed to point. And let's go back to our old at bars that were on the top. So you can see you already know that how they are going to be there, going to be consistent. These air designed principles you need toe follow. These are regular type, Deb. And then we have these one contractual extra action bars they have. Like, if you open up a photo or something like that reflected something that's going to show you cross and different actions later. Toe that item over there. Okay. Okay. So let's see what we have also here. These are few navigation. Icahn's title over overflow menu on the right. This 5th 1 I think we have already discussed this. Then again, if you want to go to the specifications, you're going to go Don't a lot. A lot, A lot at the end. And you are going toe See all these specifications. Okay, so if you click on it, you can see these other specifications. Images are still learning, so let's go back. Okay, so here we have. Okay, So if we click on it. You can see these are again the specifications 32 from this icon 24 eyes icon height eso 24 DPS is the icon icon icon 24 24 24 So you can see the gaps between them is 24 dp and ah, we have 16 dp margin on both sides for these icons 16 dp top and bottom bedding and 20 dp is the line from bottom where they are going to sit and where your text is going to sit baseline So if I hide this, you can see this is summer baseline and also you can use these text and what is the size of the stacks? You can go from here and see what is the specifications. 20 dp White. This is on text color. If you remember accurately, then this is extended Tobar and I'm not sure why they haven't shown the tabs. Maybe the tabs are on their way section in another section. So I hope you have enjoyed this air bar top A new bottom interaction and behaviour. If you have any questions to ask me, let's move on to the next lesson 46. Material Tabs 2.0: Okay? No. I am going to revise a little bit about dabs using the new material design guideline two point. Okay, so here we have the tabs. And if you click on the left side, you can see there is usage, not me. Behavior placement, fixed abs, credible tabs, their states teeming specifications and implementation for developers. Okay, So first you need to know that what is the behavior? So if you click on it, you can see there's they're moving left and right. So motion is also seen in these behaviors. And I really love this whole. They they have been moving this and you can see over here you can also move them with swipe like that. So this is I think I missed in Ah, my other lessons. That how they are going to behave. So I really love how they have arranged everything like behavior off these all these interaction elements and not me. Let's go back to specifications. And I think it is going to take some time to Lord, I think we have already discussed this when we designed it. So this is very basic. 48 40 year, 72 24 Icon size 20. Most off their sizes are the same 12 12 at the bottom and top. So if you want to look at the specifications, you can go over here. The specifications are almost the same as the previous ones. Instead, I think there is just one update. I'm not sure about it, but I I think that this 52 was not 52 before it. Waas maybe 56? I guess. So. They have changed this to 52 rather than 56 from the left. I'm not sure about it, but you can. I think there's no way to check back. Maybe you can see my biggest lesson than check. They're OK. So that is all about these. Ah, okay, so there's not much change. Everything. Eyes almost the similar. These are the design principles scalable, informative Pierce Pierce mean that they are going toe act as appears. They have, like two or three tabs rather than just one. So they are going to work in combination with other tabs. Informative. They are going toe show information categories. Basically, it is used for different categories that are going to stay at the top. Scalable means that we can have fixed and scroll able both. Both kind off thes thes steps. Okay, so if you have any questions to ask me and let's move on to the next lesson. 47. Material Card 2.0: now in this. Listen, we're going to discuss a little bit more about cards using material designed to point or new guidelines. And they are almost the same. But the few things like not me, they have introduced like I haven't discussed this one that there is an Avital image. This one number, this is the whole container. This is called the container off this card. Then we have the content inside it than in the content we have every time. Its title secondary text. This is a media, any image or maybe video. Then we have this text supportive text at the bottom over here than we have action. But then we have some supportive icon actions or hear icons optional for for directions. So this is how it is. It is going to go on. This is another one you can see here We have rich media, The top entitled Secondly, title supportive texts and actions. So this is it's an art Me Here we can see. You can also use some off the dividers. Okay, so this is again the card, but it is divided into two things like this is the information block. And here we have the availability options you can select. And then you can click on reserve to reserve this caffee or whatever you want. Reserve. Okay, so let's see the interaction. Oops. OK, so collapse and expand. These cars can also collapse and expand. Okay, so you can see this is their behavior really nice? Really Cool animation, simple transitions. Let's see more of them. Yes. So here we have it. Contracting and expanding so small, guard, just to show some of the information. If you are industrial, you can open up the whole contact like that. So, uh, let's go toe the iconography. And where is the specifications? I'm going to go to back to specifications. So here we have some of the specifications. This small image 80 dp's 3 44 is the maximum size and why it is because they are living some off the margins on both sides. So 3 60 dp is actual size and 16 ate and ate their living on both sides. Okay, these are action buttons. 16 db over here. So basically, the air dp is a distance from over here for the capable area and 16 dp is the line for aligning all these, um this text and all the different actions inside. Okay, so 16 dp is the margin on all sides. Stop right, left. And I think at the bottom is also a 16. But the actual margin for the capable area is eight. Fighting dp's 1 48 is the height of small guard. You can very that height. That's doesn't There isn't a very big issue. So you are going to make sure to use this height which I think I haven't used it. I am using a bit more. I'm or maybe less. I'm not. I don't remember right now. Anyhow, so here we have this 1 94 db for this one, the bigger the biggest, biggest size off this card. And here we have secondly text and the distances between them where they are sitting on the text baseline 24 30 to 26 then 24 is the gap between this separate online and text supportive dext. Then we have again the 36 block 36 db off block baseline Over here Then we have 32 debates for these items that are applicable. ADP is the distance between them ADP on the left side for this action button because it is aligned over here with this all this text. And actually it is of a 16 dp. So, action, that text is going to be 16 dp away from here. So these are all different types off cars. You can see these are called outline cards and these are elevated cards. Okay, so I think we use something like this. Our plane guard in our designs, we didn't use any shadows, so we can use something like that over line headline and something these kind of presence. So I think one pattern which we are not using in our cars is I am using ah, regular button over here in the card. I'm not sure whether it's possible or not in their current specifications. I think it's possible I have seen it in the burdens section. So here we have button button. We have used one button over here on the right side rather than left side. I think they're using on the left, and we were using it on the right. Okay, so anyhow, these are the specification. Make sure you was using 16 points are 16 DPS basically DP's margin on all sides. Then we are using, Um, one more thing. This is the card. A maximum card width is 3 44 This is what you need. Toe. Take care. OK, so these are two majors guidelines. I hope you have enjoyed this lesson. If you have any questions about this card layouts and all that stuff you can ask me or you can go deep into these mature design guidelines. I hope you have enjoyed this lesson. If you have any question to ask me, let's move on to the next lesson. 48. Typescale New Looks 2.0: Now let's revise the new system off material design type system. There's no calling a type, scale and type system, and it is almost the same. But I think they have upgraded their layout. And there you can see the explanations. They are more accurate now. You can see this is the case. Sentence sentence sentence. You can use them in the sentence, but in the button, you can see if you go to this button. Over here. Roberto. Medium 14 size 14 sp. All gaps and 140.75 Is Allegis placing? So this is what they are using. Okay, then we have on caption 12.4 overline. It is also sentence. You can use a long sentence in caption, but in buttons you need to keep your worst or two or three. Or maybe four. Max. I guess so. These this is their new scale. You can check it out. 96 is the biggest size. Also, if you want to go with any custom phones, you can go with that. They have shown some examples over here. Let me show. These are some custom phone 60 regular 60. Then they have hatched three, which is a Patriot formal script for regular 48. And there are few more examples. Like you can see Roberto Condensed regular 20. And this is subtitled Verrill around fall Afford. This is another one from Google Force, and Ah, OK, so this is how they are. They have shown a lot of different examples off how you can use them. As you can see, you big medium, 14 caps, all caps looking really graceful on this, uh, app would here. And ah, I think that is all. If you have any problems or you need to calculate things you can see they have also shown some off the conversions in their tracking. Okay, so for size and pixel tracking from sketch divide by OK, so actually, they have shown over here a sketch file. Let me show you material designed, type, scale and sketch. You can download this and you can open up in adobe axity easily. And there you will see all the different four sizes and everything. So let's download this one and actually open it to make more sense open. And I am going to browse to my desktop and open up this one. Okay, so this has been opened up 14 missing. Anyhow, we don't need to worry about the fort. Okay, so here we have all the different sizes. Okay? And report on 96 light. So as soon as they're headings are getting bigger, you can say they are using light phone lightweight, once they're heading is regular sized. There's using regular heading reported 34 regular regular. And when they are a bit, you know, on the smaller lines of smaller scale, they're using medium or help it take for okay. Also, you can see the spacing is a bit different. It is more spaced out in the burden, so it is easier to read on smaller sizes. That is all I think they are using. Basically, select me. Zoom in. So this is their type scale. I really love it. Onda. It's easier for me to, you know, open it in Adobe Eckstine. Oh, so don't worry. If something is in sketch our sketch file, you can open it easily with adobe X t. I hope you have enjoyed this new type scale, material designed type scale. If you have any questions to ask me, let's move on to the next lesson.