Android UI Fundamentals Masterclass | Morteza Kordi | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Android UI Fundamentals Masterclass

teacher avatar Morteza Kordi, Expert Developer & Marketer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

5 Lessons (1h 19m)
    • 1. Androidui1

      27:46
    • 2. Androidui2

      27:28
    • 3. AndroidUi3

      6:23
    • 4. AndroidUi4

      8:28
    • 5. AndroidUi5

      8:39
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

63

Students

--

Projects

About This Class

The main goal of this class is to teach you how to build amazing-looking Android apps.    

My name is Morteza Kordi, senior mobile app developer and digital marketing expert, and I’ve designed Android UI Fundamentals Masterclass with one thing in mind: you should learn by practicing your skills and building apps. 

I’ll personally be answering any questions you might have and I’ll be happy to provide links, resources and any help I can offer to help you master Android User Interface Fundamentals. 

In this course, you will discover the power of Android app development, and obtain the skills to dramatically increase your career prospects as a mobile app developer.

So... Why This Class?!

  • You'll learn to code like the pros - not just copy and paste

  • You'll learn the latest Android APIs and services - we don't teach old junk

  • You'll build apps

  • You don't need experience

  • Your apps will match with the real world

  • You'll get lifetime support

Meet Your Teacher

Teacher Profile Image

Morteza Kordi

Expert Developer & Marketer

Teacher

Hello, I'm Morteza. I'm here to help you become the best version of yourself. I help people with low-income gain high-income skills to earn millions of dollars. I help you learn coding skills, python, data science, android app development, ios app development, web development, Instagram marketing, Facebook ads, copywriting and more. If you wanna leave your 9 to 5 job and start earning serious money, follow me and let's get started!

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Androidui1: Hello there. In this section of the course, we're going to learn about the android you I fundamentals on. We're going to learn how to make our application look good on all devices. So you're going to learn that not to use the hard coded values for their height, orbit or any other attributes of our layouts because are using hard coded values will not help us to use our application in multiple devices and make it look, look good and consistent in those devices. We have to set some rules for our components for your components so that those components we look good on all devices regardless off their resolution or maybe their size. So now just go ahead and open your android studio software. And then let's start a new Andre studio project. So first we need to specify our project. The template. So here you can see that at the top we have some paps, the very wears TV, android auto and Andriy things. So for this course, we're going to use phone and tablet, so I'm gonna choose the empty activity. So let's click on next on. Then we're going to specify the name, package name save location and the language. So for the name I'm gonna choose Android. You I on You can specify the package name and then the safe location path and make sure that the languages job. So now here the minimum. Maybe I level I'm gonna choose a P I 16. Let's get it can finish. So now that the project is started, let me tell you a story that I started learning about programming an android development. I was creating an application for a client on my application. It didn't look good on different devices. It looked terrible on tablet devices. It was not dynamic on. The client was not satisfied. So what was the problem? Well, the problem Waas I was using hard coded values. So what we mean by hard coded values? Well, let's take a look at this Hello world here that we have at the center off this constraint layout. If I selected, you can see that the layout wheat on the layout hartis rap content. So this means that the width and the height off this text view will be as big as its content. For example, if I change, that is the text of this text view to a very large text. You can see that now the weed increases. Okay, so this is lapped content. So what if I change the layout? Wheat to, for example, 50 dp. What happens now? You can see that now that I added. Ah, hard coded value. Now the wheat is decreased on. Look at the text. The text is still visible. Why? Because the high it is wrapped content. So what if I change the height to 50 dp to another hard coded value for the layout height? So now it notice what happens. I cannot see the entire text here. So now if I try to run my application, you will see that the text, the entire text is not visible. So at the top, first, make sure to choose your device, so I'm gonna choose pixel X l a p 29 on. Then I'm gonna click on run up. So look at this application here. It doesn't look good at all. Notice the text here. We cannot see the entire text on because I added the hard coded value 50 dp. That looks terrible. So if you try to use this application as your resume me. And if you want to show it to your employer's, it's gonna give you some very, very bad results. The employers want employees you because you don't know how to set rules for your layouts. So that is the importance of using the rules for our applications. So let's go back to our layout here. Now I'm gonna change the wheat 40 sticks view to wrap content. Okay, Lap content is better, because now the wheat for the sticks view is as big as its content. Let's go ahead and run the application again. Now we will be able to see the text off these sticks view, okay? And if you want to make it more dynamic, you can also set the layout height to be wrapped content to. So now, if you run the application, it will look better. Or at least it won't actually just caught the texts because there is no space. For example, if I try to add more techs here and then if I try to run the application now, you can see that it's gonna create more lines off text here. So now let me give you this story so that it will completely make sense here on the left side. We've got this developer. This guy is living in the now he's happy he has created an application. But this application kind of looks terrible. OK, there are no rules here. Everything is hard coded. D u I components are not dynamic on everything on the you. It looks terrible on different devices. So different devices will show different wheels, or you I based on their widgets on the application. So it's kind of a very bad situation. On the other hand, we've got the employer or the client. Discard is an entrepreneur. He wants to make money. He wants to become successful or rich on. He has the money. Okay. He has the money that he wants to give us to create an application for. So what's the dynamic here? This guy, the employer or the client or the entrepreneur is always thinking in the future. Okay. What does this mean? This means that this guy does not leave in the now this guy has a vision and he wants toe make that vision a reality. Okay, so this is a very angry guy. So this guy, if you actually try to give an application. That is not dynamic. That doesn't look good on multiple devices and tablets. This guy will not be happy. And this guy won't be able to help you to solve the problem. Because it's not the job of this guy to help you, Okay? He just wants to make his vision a reality. So you cannot convince this employer toe, except you're terrible application. OK? If you do that, the dynamic will be gone, and there will be no transaction here. Okay? You will not be employed. You will not get the project on. As a result, you will not get the money. And you might end up in a broke developer. That's not what we want here. We are a problem solver. We want to solve the problem. And as a result, we get the money. Okay? You want to know what is their employer or clients? Problem on? We want to just solve that problem. Okay? When that problem is solved, then describe becomes a happy person. So let's go back to our application to our android studio on. Let's learn about the rules that we can set under you are using the constraint layout, a great layout that will help us to create dynamic layouts. And you are in Android. So now that we learned about the rap content attribute here, we have also the match constraint. You have already learned about match parent as tribute. But in constraint layout, we don't have much parent. We have something called match constraints with which is a lot like the match parent. So I'm gonna select the stakes view, and here we can change the layout weed to be match constraint. So here there are some constraints set for this takes view on if you switch to the text that here you can see this examine code off this text view on. Then I'm gonna open this preview here. So now we have some off these constraints here, for example. It says app layout constraint. Bottom to bottom off. Parent. What does this mean? This means that this layout here refers to this text view and when it says constraint bottom, it is actually referring to the bottom off. This takes view here on we have an underlying to bottom off. Then we have the parent has the value. So what is the parent. The parent is the constraint layout. Okay, so this simply means is gonna attach the bottom off. This takes view to the bottom off, thes apparently out constraint land. Then we've got another attribute. Layout. So this layout refers to this text view constraint left the left of the six view to left off the parent again, the same as the previous attributes. And then we have the constraint right to write off the parent constraint, top to top off the parent. So that's how this takes view is actually centered inside a parent. But now here, if I try to delete thes constraint attributes, you can see that now the place off the stakes view is changed. And here we have an error. We have this quickly line here below the stakes view this underline red color. And if I horrid hover over it, it says this review is not constraint. It only has designed time positions, so it will jump to 00 at runtime on issue after constraints. So what is this 00 court in this year in Android view? 00 co ordinate refers to top left corner here. So if I actually just moved the layout or I them to the right. But the X will be increased. And if I move it to the bottom, the voice will be increased in a positive value. So take a look. It is drawing here, for example, assume that we want to create a game. And in this game we have a character. And this character is currently as position zero as the X and zero is the boy in our mobile screen. So this means that this character is currently at the top left corner, the current position. OK, so now I want to move this character to the right. If I move this character to the right, then this means that the value of the X will be increased. So now the value of the X is positive. Five. But if I want to move the character to the left, Okay, so remember, the X is the horizontal access. And if I want to move the character to the left than the current value off, the X is going to be, for example, minus five. So now imagine that I want to move the character to the top or bottom. So now we're going to deal with voy the vertical axis. So if I want to move their character to the bottom now, the value off the why will be increased. So now the value off this boy's positive five on from the current position. For example, a zero Okay as the void. If I want to move the character to the top, then the value off the vile will be decreased on the value is going to be minus five. So this is how you should imagine how should suppose off what the Android court and it says . Okay, it starts from the top left corner zero as the X zero as the why if I move to the right thing expert be increased. If I move to the left at the X would be decreased. If I move to the bottom, the boy will be increased. And if I moved to the top, divide will be decreased. So hopefully that makes sense. Now let's go back to Android Studio. So now if you're harbor over this red squiggly line, it says if this view is not constrained it it only has designed time positions. So the design time is going to be top left corner. So it will jump to 00 at run. Long time, unless you at the constraints. Ok, ok, so now let's go ahead and just switched to the design tap. And here I want to show you something else. If I select this takes view here on the right side part, you can see this Inspector attributes And here we have a section called Constraint Region. So here we can specify the constraints on you can also specify the flap content match parent or hard coded values. So here, take a look at this square. We can add the constraints here, for example, on the right, we have this plus sign and we can create a connection to the right left bought them and top . But I want you to focus inside this square. So here, for example, we have this squiggly line. So what does this mean? This is actually called match constraints. So whatever constraint we said it's gonna match them. OK, So for example, if I add a constraint to the right And if I try to attach this text view to the right, this constraint is said And if I attach this constraint to the left. You can see that now. This constraint is also said on I want to also set a constraint to the top. Okay, so here you can see that we have Asama field circles to the right, left and top off Thes takes view. Okay, I can change the place off the stakes view if I want. You can see these constraints but here, take a look at this quickly line. This is called match constraint. But let's change it to another thing. Let's just happen this squiggly line and let's see what happens. So now the layout read is actually changed to wrap content. So these Chevron's specified a rapt content attribute And if I tap on this chevron here, let's see what happens now we have this solid line on. It indicates the heart called that value. For example, in this case, it is 411 dp. So this is what we want to avoid as much as we can. Okay, the either want the squiggly line match constrained, sore, they're wrapped content. So that's it. So this is about the constraints for this text view, but here I want to delete this takes view and I want to drag a Parton to our layer. So just ragged here again. We want to add constraints to the spot and other voice. It will jump to the top left corner off the screen as against here. So lesage to their design town. Now I have to specify. I have to be sure there exactly. I want to put the spartan on the screen. So, for example, I want this spot in to be centred horizontal. How I can do that so I can create a constraint to the right. So if you switch to the take stop, you can see that this constraint is added here, a layout constraint end so and indicates the right off the bottom toe end off the parent to the right of the parent. And then I want to just drag on. I want to create a connection to the left off the screen and here I want the spot in to be attached to the bottom off the screen. Okay, so now you can see that this spotting is actually centered horizontally because it has to satisfy their constraint to the right, on to the left. And if you look at the constraint visit on the attributes section, you can see that we've got these Chevron. So the layout feet on the layout high. It is actually wrapped content. So now I want to add some margins to the bottom. So there is some space here. For example. I want the Spartan to be exactly attached to it to the bottom off the layout. So let's add some constraints selected spot in on here inside a constraint which visit section for the bottom. Our margin. Let's at the value to any fourth on, then tap on. Enter key on your keyboard in order to sip mate this value. So there is an external space on external distance between the Spartan on the bottom off this layout, this is called Marty. We can also set a margin for the right so I can change the 0 to 16 on here. You can see that this margin is actually indicated here and then we can sitting margin for the left 16. So here, if I want to, I can change the layout feet off the spot in, for example, I can tap on these Chevron's in order to change the default off this part into 88 DP or I can change it, happen it again in order to match the constraints. So now it takes the entire constraints. But here you can see that there is also these margins on the right on under left. So it doesn't just attach exactly to the edges off the screen. OK, so this is how I want my button to look like and this is how I want my button to be positioned at. So whatever device that I run, my application on this bottom will be at this exact position at the bottom. It will actually take the entire wheat on it will have a margin on it will also be centered horizontally. So if I run the application so here it is my bottom at the bottom, off the screen. We also have thes attribute the bias for these constraints. So let's elected spot in. And let's change this match constraint toe rap content. And let's change this bias. I'm gonna just are select this handler and just slight. It's disporting to the right or left Here. We can see that I can change the rate off the Spartan and I can change the position off the spotting here according to these constraints, right? If but if I just put it at 50 it will be centered horizontally. Here. Exactly. The value is 50. So now it is centered horizontally. So the constraint layout is very good because because we can set some rules, Okay, because we can set some rules. That is a perfect layout that we can use for our application. So it's a really very simple layout. We just need to add a constraints, constraints about them, constraints right on. You just need to know where you want toe create the constraints where you want to exactly create the connections we have also these margins margins start, actually refers to the left, left off the screen, margin left on Dhere. The margin start on the margin left. Both of them are the same. So because in android we also have the right to left. Language is the most put. The emergence start also on margin end and right in this case is also the same. So now let's learn how we can change this tile off this spot in. So let's switch to the tech stop on here I want to add another attribute to the spot in the attribute is going to be this style attribute. So this highly is going to be rigid up calm, pat. So let's just search for it. Just taking here. Bridget that up compact dot And then here just typing Barton, I thought colored. Okay, so choose the color style. So now the color of the spot in is changed to this color. What is this color where we get this color? So open your project pain, open the out for their go to rest values and open the colors of exemplified. So here we have the color primary color, primary dark and color accent. So the Collins accent is set for the color of the Spartan when I choose this style for the spot in. So this is how our application look like if I set a style to this Martin, if I choose the rigid up compact Botton colored, it's gonna get the color from thes a color accent so I can change the Carter how? Just go ahead and open your Web browser. So on Google just searched for material palette on. It's going to show you this lynch material palette dot com. Just happen it, and it's going to show you these amazing material design colors. We have also the material design icons that we can use in our application. There are lots of icons here that we can use. You can also search for the icon. You've got the colors that we can choose here. So let's choose the pallets. For example. I want to choose thes deep orange. So if I tap on it on, if I click on this orange here, it's going to give me some nice combinations that I can use for my application. OK on. I can also tap on one of these colors in order to copy the hex of the simple code. So I'm just gonna tap on these color the darch primary color if I want, and then I can go ahead and use it in my application. But here notice that we've got some names, for example, the accent color. I can use this accent color in my application. I just happen it in order to copied on my clipboard. So let's go back to Android Studio, and I can just paste this color here so we have hashtag ff 98 00 So now the color accent is Theis color. If you go to the activity on airline minute XML, the color off this spot in is changed to the new color. So hopefully that makes sense. And if I want to, I can also get the darch primary color and just paste it here. Hashtag e 64 a 19 on I can also change the color primaries. So here I can see whether we have a color primary here. Yes, we have. I just copied and paste it here. Okay, so now this is about this tile off the buttons that you can use on your application. Another cool tool that you can use in your android applications. Is there the color system that we get from the material that are your website? So I just searched for material design colors and I just happened there first link. So here is going to show you some amazing guides that you can read that will help you to create amazing you I for your applications. Make sure to read this guide here. If you want to create cool applications, OK on. There are also some other tools that we can use that are inside this website. So hopefully that makes sense. On another great guide that I can give you is they get hope. For example, you want to use a specific bottom off fancy button or a fantasy toast message. You can simply are used other people's coat. You can use the external libraries at them to your coat and use them. Or if you want to use a chart, there are lots of libraries that do the hard work for you, so you don't have to always reinvent revealed. Okay, there are lots of libraries out there that will help you to solve the problem. Remember, you are a developer. You are not a programmer. Okay? You just want to get the materials, the components, the library's everything that exists in order to create the final application. Okay, just don't think that you have to just invent something. Invention is not your job. Developing something is your job. Solving problems is your job. So remember, used these tools that are actually out there and free. So let me, for example, show you they get hopped up site on, help you to find out a solution to a specific problem. So here it is. They get heart website on. I'm gonna search under. Get hop. I'm gonna click on the search on. I'm gonna search, for example for Andrew it. And then I'm gonna search for a partner. Okay? I'm gonna tap on my keyboard and see what happens. So you can see that there are lots of libraries here. For example, we've got this certain circular progress button, so let's see. What is this? I'm gonna open it in a new tab. You've got the android floating action button. Okay, let's see what we have here. Floating action button, toggle button on. We have to switch button. You can see that these libraries really, really make my life easier. As a developer, we have the large button I can go to another page on. I can see the other libraries. So, for example, let's see, what are these libraries that we have already opened? So we have this cool feature. If I want to add this feature the uploading process, I can use it. I can simply at the dependency, kowtow my project. You learn more about adding dependencies and injecting the libraries to your application later in this course. But here it is. You can simply just copy this code on go back to your android studio project and then go to the greater the scripts, build out greater module app on, then here inside the dependencies block here, just paste this code. But instead of compiled, you need to say implementation. The compile is deprecate ID. And then when it When you add this code to the dependencies block, you simply need to click on sink now and make sure that your Internet connection is on. Otherwise, it won't work on. The library is added to my project successfully. So if at the bottom, if you click unbilled now, it says built completed successfully. This means that the library is added to my project successfully so I can use it. How, by simply going to they get harp on. I can read the documentation, rate their wiki, the user guy and see how it works on. Also, you can just click on this clone or download, download the project, run it and see the code. See the project structure OK, or if I click on another tap, we have another library. We have this cool feature. We have other libraries here. For example, this switch button, the toggle button that I can use. We've got the example code the how to use on. We also learn how to use it in Java code. Then we have another library here and also another one So we can see the possibilities are endless on. You can use this libraries. You can just create applications that are awesome in, for example, two weeks instead of a year. Okay, so hopefully that makes sense. 2. Androidui2: Hey there. So in this video, we're gonna learn about the and rodeo I fundamentals. So this is the part two off this Siri's. So let's learn about constraint layout. Let's see how it is working. Why? The constraints are very important. If you want to create dynamic applications dynamic, you are so first and foremost. Let me give you an example. For example, of the sun, we have the sun in our galaxy. Right? This son is at the center off all those planets. We've got one planet here. Another one here, Another one here. I'm here. There are all around the sun. So what's going on here? So what is the force that keeps all these planets at a specific distance from the sun? So that force is actually the same as the force that we have on Earth. So on planet Earth, for example, let's assume this is the planet Earth. If you drop an object, then it's gonna fall right by what force? By the force off the gravity. So the force of the gravity is going to keep all of us down. So if an object falls and there are no other forces to prevent that object to fall, then it's just gonna fall. The gravity, the force off the gravity is going to just keep everything on the ground. So that is the same force that keeps all these planets around the sun. So now you might ask that. Okay, how it is related to constraint layout. Well, the constraint layout is actually the same. All these planets have a connect, a connection or a constraint to the sun. OK, so that's why they are at a specific distance around the sun on we can to see them at a position that is fixed. So let me give you another example. When I do rock climbing three times of EQ here I am. I want to just rock to the top. Okay, so how can I do that? I have to create a connection to the rocks that are in front of me. Okay. Otherwise, I cannot climb to the top, so there should be a connection here. I have to grab the rocks. I have to. I just moved to the top. I have to bring my legs up on. There are some other variables here that will help me to just go up. OK, so this connection is very important. If there is no connection here, then there will be no position for our planet's on in case off their rock climbing, I might fall. If there is no connection. If I don't create a connection to the rocks, then I might fall. So let's go back to Android Studio. And then I'm gonna explain to you how to create more dynamically out. So go ahead and open the android you I project. And then this solution designed view here. And if you want to, you can zoom in order to be in order to see the layout better. So here we have the bottom. Now I want to add two more buttons to my layout, and I want to center thes two buttons horizontally and vertically. How can I do that? So, from the palate section, just drag two buttons here, Another one here. Okay, So because there are no constraints, thes two buttons might jump to the top left corner off the layout because if you don't create the connections, the default position will be here Top left corner. Okay, so now I have to spot in the first. The right one and the left one. So I'm gonna change the text of these buttons because I want to refer to them as I'm teaching you this concept. So the left button on their right botton. Okay, so just select the right. But in first, we're gonna learn how toe position or how to center the spot and vertically in the layout. In order to do that, we need to create a connection from the top edge off the Spartan. We get this little circle here that is an empty circle. Create a connection to the top edge off the parent on. Then let's create a connection to the bottom edge off the parent. So just drag this little circle here that we have at the bottom it off this button and just drag it to the bottom edge off this parent. Okay, so now it has to satisfy the connection to the top on the connection to the bottom. So that's valued is now centered vertically in delay out. Okay, so you can think of the Spartan as a people pleaser person that has to please everyone that it is told to. Okay? It has to please the connection to the top, the edge off the screen. It has to please the connection to the bottom. Okay, so this part and still needs a constraint. Because if you just to issue the text app on, you can see at this spot in here that we have the right button. If you have hovered over this squiggly line, it says this view is not constrained horizontally. At run time, it will jump to the left on lease. You add a horizontal constraint. Okay, so we only added the vertical constraints. There is no constraint horizontal here. So how can I solve this problem? I can simply create a connection from their write it off the Spartan to the right it off this layout. And now the connections are satisfied. There are no errors on at the wrong time. This spartan will always be at this specific position that we have here. So now we have this left button. So there is a challenge for you here. Pause the video. Try to do the same thing that we did for the's right button. Just go ahead and center. This'll left button vertically and then created connection from the left edge of this button to the left edge off the screen. So give this challenge your best shot and then continue watching this video. Okay? Hopefully you could successfully add the constraints here for this left button, but I can just create a connection to the bottom. It's really simple. I haven't seen a simple they have like this before, because in the past we had to use a lot of complicated layouts, a linear layout relatively out on. Then there would be a lot of child parent relationships, and you can see that inside the component re. It's very simple. We only have two constraint layout and these other bottles. But if I wanted to use the traditional way of designing the layout like this, I had to create a really complicated layout. And that's not good. Okay, so now we have the radical constraints. Let's add a horizontal constraint to the left. So now thes connections are created, but this doesn't solve my problem. What is my problem? Well, the problem is that if I want this left button and this right button both off them to be centered horizontally, how can I do that? So, in order to solve this problem, I can create a connection from the right edge off this left button to the left edge off this right button on. Then let's create a connection. So just select this right about 10 and then create a connection from the left edge off these rights. But in to the right it off this left water. So here you can see that it's kind off, actually difficult to see the connections. You might actually get confused a little bit. So in order to solve this problem, Android studio has something called a blueprint on here. You can see that if you hover over this icon, it's a select design surface. If you click on it, we have the design. We have the blueprint. We have the design plus blueprint. So the blueprint is very helpful. If you wanna create the connections and see them on how see how they are connected together . It's very simple. It's gonna simplify the process. Off constraints lay out for us, so I'm gonna choose blueprint instead. So now it's gonna show me the blueprint. If you want to see the design, you can just click on design or if you want to see that design plus PLO print. You can do that. But here, I only want to see the blueprint. So now I created a connection from the right edge of thes left 10 to the left edge of this right for 10. But here I want war. Also create a connection from the left edge off this right button to the right edge of this left button. So if I try to do that android studio my not allowed me to do that, I don't know, it might be a bark. It might be something around with the android studio, so this problem exists on it. It exists for a very long time. I haven't been able to solve this problem using the design view. So there is something wrong with these design view here, but here we can solve the problem using the text. So that's why I always say writing example Coats is your best tool. If you want to create dynamic layouts or you I okay, you can't always rely on this design view because it's not going to solve your problem on you might end up being confused on being sorry about has laid studio. So just to issue the text app on, then just select their rights. Bartender. Here you can select it in the preview if you want, and then here just go ahead and create a connection from the left edge off the spartan to the writers off these left button so you can just select or you can select their left but and choose a proper I d. Because if you want to create the connections, you have to know the idea. You have to refer to the specific idea. So I just selected thes left bartender on the idea is going to be left, bought in okay and then select the right button here. And the idea is going to be right. Botton. So now here Because I changed the I DS. It is joining me some errors. For example, I created a connection from this left out into the right button. So I have to change the i d off this button to write about 10 here so that the connection is created correctly. So here I want to show you something very interesting, because if you don't apply this principle in your layouts, your layouts, we look terrible and you won't be ableto solve the problems. Well, so what is that thing? That is interesting. Take a look at these constraints Here, for example, we have the constraint bottom to bottom off. So it is kind off, self explanatory. We don't have to explain this one. Let's take a look at the second constraint that we have for this left left bottom. We have constraint end. So what does this end mean, actually, and refers to the end off that bottom. So the end, Because in this case, we are using a left to right language, which is actually English. The end refers to their right. Okay, We start from the left and the end at the right. So when it says constraint end, this end refers to the right edge off this left bottom here and here. It says to start off. So what does this start means? So again? Because we're using a left right language, which is English. This heart means the left edge off this other layout off this other view, actually, So the left edge of thes view here is the's right button. The left edge is this one. So we have created a connection From the end off this left 10 to this start off these, right? What in? So we don't have left to right anymore. Forget about those terms in their layout. Because if you use them, your layouts will always be. There will be always a problem with your layouts. You won't be able to solve them just because of this little world. Okay, It is kind of strange. It is weird, but this is the principle that you should apply in your layouts. Otherwise you're gonna have problems. So this is very important when I say and here I mean the end off these left what? In the right edge on when I say start here. I mean, the left edge off these right button. So end means right on start means left in left, right? Languages on the it is going to be reversed in right will of language is so in right to left languages. Right. Means start on left means end. So just keep that in mind. You can write it somewhere you can tattoo it on your arm. Just remember that whenever you want to design a layout So now that we have the constraints set up for thes left button. Let's go ahead and create a connection from test heart off this right, But into the end off this left button. So just happened this right button under preview. So it's gonna highlight this spot in code on the XML. So the connection that we're going to use here is going to be constrained. Start notice that I didn't say left constraint start to end off. And an excellent plus, i d slash left, Martin. So now these two buttons are centered horizontally inside this layout, when I say centered horizontally, I mean both off these buttons together are centered horizontally. So if you see you should design tap, you can see these connections. But now I want to delete their margins because I don't need them. So just elect Thies writes. But in here and I deleted their layout a margin end on margin, right? And I also delete the margins off this left Barton. Okay, so now that we have these constraints set up here for us now, make sure that they lay out with on the layout. Height of your buttons are wrapped content because I don't want to determine the width and the height of my buttons by a fixed value. Okay, I want them to be a dynamic. So let's go ahead and run our application and see how it looks on our device. So here it is. The layout left what in right button on the bottom at the bottom. So it looks good. If you want to see how it looks on other devices, you can go ahead and click on this device for preview on Tuesday. Device here, for example. I'm gonna choose a six inch device, So this is how it looks. Let's change this one to design on. Let's go ahead and change this one, too. For example, a tablet and see how it looks. Any tablet. So let's choose. Another device, for example, issues a 10 inch tablet. So this is how it looks on a 10 inch laptop tablet on. We can go ahead and choose other devices. So here it is. Generate phones and tablets and you can choose a four inch screen so it looks consistent across all devices. Now, let's go ahead and use an image view and sanitary it horizontal here because I want to show you something about the image view that is necessary to know if you wanna use image views in your layouts. So first we need an image. Just go ahead and open your Web browser so you can use the pick somebody that calm in order to download free images on royalty free stock. So I'm gonna search for Michael Jackson. Let's see what image is going to show me. So let's select one of these images I'm gonna choose at this one on. Let's download it. Just could you can free download, and then you can use one off these resolutions so the 1st 1 is okay for our application. So just click on download and then the images downloaded. So here you can see that there is a trash here in the name off this image. So it seems that the dash is not allowed if you want to add your images to your project, so let's go ahead and at this image to our project and let's see what other android studio is going to show us, because I want to show you that if you do not name your images correctly, according to the Androids, through the your rules then you're going tohave compile errors. So here it is, the image I'm just gonna right click on it and then click on copy Image on Let's Go Back 200 Studio. So here, let's just drag. Let's open the project pain and then app raise right. Click on Destroy billfold there and click on Paste. So choose the Dr Bell instead of the driver dash V 24 identity can. Okay, so it's gonna show us the image if you want to. You can change the night here, but I'm just gonna choose the default name on Just click on. OK, so if I try to run the application, let's see what happens now. It says Dash is not a valid foil based resource name character foil. Best resource names must contain only lower case. A fruit set numbers zero through nine or underscore. So these are the characters that are allowed, if you want not use them in your image names. So open the driver for their on right click on these image Michael Jackson on. Then you can just click on a reveal in finder, so here you can rename the image, so I'm gonna choose M K. OK, that's it. So if you just go back to Andrews Studio, you will see that the name image the image name is actually changed to NK that J p G. Now, if I try to run the application, there will be no compile letters, so hopefully that makes sense. Now let's go back to activity on their line Minute. Examine on. Let's drag an image. You toe are constraint layout here on as the image I'm gonna choose m kay. I'm going to select it and click on OK, so the image is added here. So now I'm gonna choose so you can see that the layout feeds from the height is wrapped content. But let's go ahead and just position it here a little bit at the top. So let's create connections to their right left on to the top. OK, so these are the connections that I created for this image of you on Dhere. For this image view, I want toe use this Kate hype attributes that will determine how the image is going to be fit inside the image view. So just search for skate type and here you can see that there are some values that we can choose. For example, if you click on this little triangle here, we can choose center inside that will center this image. Inside this image view, we can choose fits heart. You can see that the image now is at the left. Off this image view, we can have the fit end. We can have the center on. We can have the Matrix. So this is how it looks. If you choose matrix, you can have the fit X y, so it will completely fit the X and the high borders on. We have the fit center on. We have the center crop. Okay, so for this image, I prefer fit center. So this is the attribute that you're gonna use in most of your projects because you want your image to be a fit at the center of the image. You So here I want to show you how to use the guidelines in order to create a constraints. First of all, to select this image view. And then let's go ahead and delete thes constraints that we created here. So the top constraint is okay, but the left and the right constraints should be deleted how we can delete them inside these attributes section. If you harbor over this field little circle here, you can just click on it and delete the constraint on. You can also do the same for their right constraint here. Okay, so these constraints are now deleted. Now I want to add the guideline. So how can at the Kaitlyn So there is an icon here that says guidelines. If you click on it, you can see that we have add vertical guideline at horizontal guideline at Vertical Berrier at horizontal Berry year at group. So let's choose this ad vertical guideline here. If you click on it, it will be added to this component three. So it is actually added to the layout. So in order to see if we need to zoom in a little bit here, So just select this guideline here inside the component tree. So it is selected, and now I want to just drag this guideline to the right. If you hover over it, it's it will show you this handler and you can drag this guy going to the right. So let's just just line up this guideline with their right button and here it is showing me an absolute value. So I don't want this fixed value here from their left. So I want to change it to a person. So if you click on these a little icon that is a lot like the play button. If you click on it, it's really be changed to another position. So now from the right, it is the 49 again. This is just our, ah, fixed value. I don't want it. If I click on it again now it is in persons. So I chose 85% here as the guideline here. So now if I select this image view, I want to create a connection to the write off these guidelines. Okay, so let me show you how it looks. First, let me just a decrease the size they beat off this, um image view to 100 DP. Now I want to create a connection from the right edge off this image view to this guideline . Okay, Now let's add another guideline, So just click undies icon for this guideline and then at another ad vertical guideline. So this is the guideline to if you want If you want to. You can change the i d off this guideline. So let's change you too, for example, right guideline on Click on Yes, on the second Von. Let's change the I D to ah, left guideline. Okay, now again, let's change the dis guideline toe percents. Just click on it. I think you have to click on it two times to change it, toe up her sense value. So now it is at 6%. Now I'm gonna just drag it so that it lines up with the left button. And then let's create a connection from the left edge off this image view to these guideline that we have here. Okay, so it is kind of centered here, right according to the left and right buttons. So now let's go ahead on test this layout on multiple devices, so let's zoom out a little bit on. Let's choose another device. Let's use a five inch device. So this is how it looks on a five inch device, and you can see that the image goes off a little bit, so I don't like Theis. Distance to the top. But first, let's test this layout on other devices, so Let's see how it looks on a six inch device. Okay, lets see, for example, on a tablet. Okay, so let's see other devices, for example, generate phones and tablets. Let's choose, for example, 4.7 inch device. So let's do something about this image here. Let's go ahead on Let's create a connection from the bottom edge off this image view to the but a top off thes left bottom. Okay, so as I do that, you can see that the image goes down a little bit here. So it is kind of centers here around this area. Now let's go ahead and see what happens on other devices, so it doesn't matter on which device we test this layout. The image will always be centered around this area, so this is good. I like this one on a six inch device. Again, the images centered. Let's see what happens on a tablet. So again the image is centered, so it looks good on this bottle at the bottom. Let's change it to match constraints so it takes kind of the entire reads, and now it looks better. So now let's go ahead on Let's run the application and see how it looks. So this is how you create constraints using the guidelines guidelines are very important on they can help you to design better layouts on better. You I So this is how are you? I looks like on this emulator, and we've got other guidelines that we can use. So here we have thes, for example, at vertical barrier on at horizontal value. So you can add these other tools to your layout and see how you can use them to your advantage. So here, let's select this image view on. You can see that the layout feet on the height off this image you the value is a hard coded value on That's something that we should avoid. So let's change. The layout leads to wrap content on the layout highs to be a rock content. Okay, so it is now very large. Okay, the height is very large, so let's change the height to match constraints. Okay, so now it is better on. We can also change the layout with to be match constraint. So now it takes the entire distance between at this left guideline and the's right guideline on here. If you want to. You can change the scale type of thes image so you can search for scale type and change This fit feet center to another value. For example, you can to center crop or you can choose center here. Center inside. It might be a quick value, so now it looks better. If you run the program, Let's see what happens. Let's see what we're going to see now. Okay? It's now better. 3. AndroidUi3: Hello there. So in this lecture, I intended toe add a psychology tip at the beginning of my lecture because most of the students go through a job interviewing process, so these psychology tips will help them a lot. So I got this one from the psychology today. So let's see what this step says. People remember the first and last things you do so make a good impression and end a high note. So basically, it says that you're somehow judged by your looks. Okay, So dressing well smelling good is very important if you want to get hired in a company. So this video is about allowing the android studio to infer the constraints for us. So imagine that there is a social situation here on a psychopath. Enters the's situation. So this guy is a psychopath, and he's here on There are other guys here. For example, there is a person here on there is a girl here. Okay, um, she's here. Someone else's here. So this psychopath So let me just typing here. The name. So you understand? What do I mean by psychopath? Okay. When this guy enters the situation, he sees all these other guys and this girl here. So what's going on here? So this guy assumes that because thes sky dresses bad discuss. So this guy is a loser. Okay? This guy infers that this person is a loser just because he dressed bad. Okay, on another assumption is being made for this girl over here. This psychopath here things that if he starts talking to this girl, he gets rejected. Why? Because thes psychopath things that the girl things, that he has dressed very bad. Okay, so this is how he thinks about this situation. So now let's go back to Android Studio on. Let's start learning about constraint layout and how the constraints are in for, so just go to the activity. Underline minute exam. L. So here we've got this Hello world takes view. Let's just select it and then deleted. And then so it seems that I just deleted the constraint. So let's just select the whole text view on then press and delete key on your keyboard. So let's drag a bottom from this palette section, toe our layout, So just like the bottom here and you can see that unconstrained play out. You can drop the view anywhere on the screen. So this is another great advantage of using a constraint layout. So, for example, I want to put it here, notice that I want the bottom to be at the bottom. And here, this is actually centre horizontal. I just drop it here. Right? So now, instead of adding the constraints myself, how about allowing the android studio to unfair the constraints based on the position of this spot in under layout? Right. So just like that psychopath that I mentioned earlier, we can allow the Android studio to be that psychopath and in for the constraints for the spot in. So how? Here you can see that we've got some items. Make sure that you select at the bottom. And he had We've got some items for the constraint layout. One off these items is actually for inferring constraints. So if you hover over this item, it says in for constraints. So I just happened. This item here now, the constraint starting furred. So let's just switch to the text up and see what we have here. Okay, so we've got this spotting here, so we've got some attributes for the constraint constraints. Bottom to bottom of parent end to end of parent and start to start off parent. So in this way, the button is centered horizontally, as you can see here, and it is at the bottom off the screen. OK, so there are some attributes here, for example, you can see that the Barton we'd spend the height is wrapped content. We've got a margin. Bottom 16 on here. That's it. That's how the constraints are inferred using the android studio. So how can I continue? For example, I want to add a text view here and put it at the center off their layout. So I want this takes for you to be centered horizontally on vertically. So I just drop it here and then I go ahead and tap on these in for constraints by them. So now the constraints are inferred for me. So if I just reached to the text stop, you can see these constraints here. So let's add another item. For example, I want to add about in here. Okay, so I just wanted to be here on another button here. Right, So here, I can just go ahead and tap on these in for constraints, so the constraints are in first for me. But sometimes the constraints that the android studio create for you are not the ones that you necessarily want. So in those cases, you just go ahead and adjust the constraints. Okay, So for example, for thes spotting here, I can just manually change the constraints at or delete the constraints if I want. So you just need to adjust the constraints based on your application based on your project . So this is how the process works. You just add a view or layout to your view here on. Then you add the constraints using this tool in for constraints on. Then you just go ahead and adjust it. Constraints. Then you add another item to the layout, then you in further constraints and then adjusted constraints another item in fair adjust. So this is how the process off inferring the constraints, works on. It's gonna actually save you a lot of time and effort. So use this tool. It's a really cool to that you can use in Android Studio 4. AndroidUi4: this video is about Android resource qualifier on Let's see, What is the tape off the day gets yourself happy and excited before seeing someone whom you want to like. You go ahead and open the android You I project on disk Click on it. So now the project is open for us. So let's wait and see what we have here. Okay? So here you can see that the application is in portrait mode on Dhere. I have chosen a tablet. Let's change it to a mobile device. So now what happens if I try to use this application in the landscape mode? What can I do them? So in those cases, if you do not limit your application to be only in portrait mode and if the user tries to see your application in landscape mode, then the Android studio is just gonna make something up on. Then it will show something to the user. Okay, so let's run the application and see what happens with this current application. So now let's try to see this application in landscape mode, so it should show me an option to use this app in landscape mode. So now this is the landscape mode. So here you can see that this is good. But what happens if I want to see a completely differently out in landscape mode? Can I do that? Yes, you can. By using the Android Resource qualifier. We can do that on the Android studio is smart enough to differentiate between the different states of application. So if the application is in portrait mode, then it's going to use the layout that is related to that portrait mode on. If the application is in landscape mode, then it's gonna use the layout that V specifically designed for the landscape mode. I'm sure that you have seen the applications that have completely different layouts in landscape mode. For example, one off the famous funds is the Gmail application. The email application will have a mass. Their detailed view application, where it has the contacts at the left on there, content off the email at the right. Okay, but it has a completely differently out in portrait mode, so let's see how we can do that. First of all, I'm gonna show you an example on, and I will explain to you how the resource qualifier works. So here for example, I do rock climbing, boxing, yoga and all these other stuff. Okay, so what happens when I go to their right climbing team? Okay, let's see. Let's say, R C rock climbing gym. So here in the rock climbing Jame, I wear right climbing shoes. OK on when I go to the boxing gym, the G in the boxing Jame my, where are boxing gloves? Or when I do yoga exercises, I use my yoga mat, Right? So in all of these are situations, there are different contexts. So, for example, I cannot wear boxing gloves in the rock climbing gym. Okay, or I cannot bring my yoga mat to the boxing gym. That's not allowed. So I am smart enough to know the differences between these situations, so I would not bring my rock climbing shoes to the boxing gym. So this is exactly how Andres to the your works. When the application is in their portrait mode, the application uses the default layout, but what happens when the application goes into the landscape mode? So when the application goes into the landscape mode, if we have a custom layout specifically designed for the landscape mode, then it's gonna choose the landscape mode automatically, so just open the project. So here we have an icon that says Orientation for Preview. Let's click on it and see what we have here. So we have the option to see the application in landscape mode. OK, let's see what we have here. We have the, um, mode. We have the Kardak, their stock television so you can test these if you want. We have the night mode on. We have the create landscape variation. So this option is the is the bond that we're looking for. So if you click on it, let's see what happens. So just open your projects. Pain. AP raise layout So this is it activity underline Minute XML. Inside the practices we have this fourth Land stands for landscape mode, so this means that we have to layouts here. But these two layouts have the same name. The second layout is for this layout when it goes into the landscape mode. So when the application goes into the landscape mode, we can just design this layout and have a completely differently out. When the APP goes into the landscape mode, we also have another option that is actually the creative tablets variation. So if you want, are these on your application for the tablets? Also, you can create the tablet variation. So how cool it is. You can see that the Android studio provide you with all of the's functionalities on all of these advantages that you can use for your applications. So just go ahead on open your project pain, right? Click on this rest fall there and then go ahead and click on reveal and find there. So if you're using Windows, there might be another option that is a showing Explorer, actually. So just click on, reveal in Finder or showing exploder. I'm gonna go inside. The rest fall there. So that is what we have here. We have different versions off the enjoyable folder, right? For example, Dr Aled Ashby, 24. Dr. Bell, we've got the meat map HDP I ndp I. So these are all resource qualifiers. So, for example, for a very high quality screen, it's gonna use the meat math dash x x x HDP I. So it has the lighter the longer I can for our application. OK, so this is called a resource qualifier. We've got different resource qualifiers, too. So if you right click on this rest fall there, go to new Android restores file here, for example. I want to design a layout for a very, very high quality screen for a very large screen. So it does tap on these layout and then a Here. We've got something called the size. The size is our qualifier. It says Available qualifiers. So I just happen it. And then I tap on the spot in here to see their chosen qualifiers. So here we've got the screen size. If you want to design your application for a X large screen size, you can just click on it and then provide a name for your layout, for example, my large layout and then you can just click on OK, but here it says that the layout names should not contain capitalized letters, so I should only use lower case letters. So, for example, my large layout and then click on OK. When you do that, this large layout is designed for your application for, for example, for this activity on their alignment and XML, I can create another version for X large screens, so I can right click on this layout here and then go to new layout resource file and then click on size tap on the spot in choose X large on. Then the name should be the same as the name of our activity. So it is activity underline main. So I just couldn't find Okay, so now this folder activity on the line Main has free files. The 1st 1 is the default one. The landscape mode on the X layer X large layout. So this is it. This is how you design your applications for different screens on different qualifiers. We've got other qualifiers to that you learn later in the scores. 5. AndroidUi5: Hey there. This video is about translating applications on internationalization. But first, let's take a look at the tip off the day. Warm your hands before you shake hands, rob them together. So this is again about making a great first impression. So make sure that when you go to interviewing sessions that you have a dry and warm handshake. And also make sure that your handshake is, ah, fair and one because, ah, soft handshake is seen as a sign of weakness. Okay, dry, warm and a firm handshake is very important. So open your android studio project and then let's go inside a layout. Fall there. So inside the activity underlying main, let's go ahead and just open to default one. So here you can see that we've got this image of Michael Jackson on. We have the Spartan Vita text left right on the spot in that about him. So this selective left button and let's change that hex off this button toe left button. Okay, but this is not a good program in practice. If you heart called the value off a text off the spot in because it's against the internationalization rules. So let's sewage to the text time here on. I'm just gonna open the preview on tap on this left buttons so that the code, the examine code of the spotting, is highlighted. So here notice that if I hover over this text, distribute off this button. It says hard coded string left button should use at sign string resource. So if you want to translate your application to different languages off the world, you should use the stream. Resource is fine. Well, the string resources file allows you to create defense string values for different languages by heart coding. This string off the spotting here we do not give ourselves a Chand's to translate our application to different languages. I remember back in the time when I was learning about on readapt development, a client contacted me and she wanted the application to be translated to another land greed on. I had no idea what to do in order to translate the application on all of the components of the application had the hard coded text. So this this was a very bad programming practice and a touch a lot of my time and efforts to solve this problem. But if I instead used the stream. Resource is file. I could have saved myself and a client a lot of time and effort. So let's just go ahead and open the project. Main open the artful they're raise on here. We've got this values for their Open it. And here we have the strings. That exam If I So now I want to change the text off this left bottom two previous song. So just go ahead and open their streams that examined file, and then here we need to create a new string resource. So I'm just gonna open attack stream. So the name is going to be left. Bought. 10 text. Okay. On later. When we want to set the takes off that left button really fair to this name. So just put the closing tack here, and the android studio puts thes separate closing tack for us inside the tags. I just need to enter my value. So the value is going to be previous song. Okay, so now if you go to activity on their alignment and xml so here for the text off the spot in left button, I'm just gonna delete this value, and I'm going to refer to the stream resources while at sign string slash left button text . So if you go to the design tap, you can see that the text off this button is changed to previous song. So here I have a challenge for you. Go ahead and change the text off this right button on this spot in here at the bottom. You can set the text off this button to place on if you want, so just go ahead, give this challenge your best shot on. Then continue watching this tutorial and see how I am going to solve this problem. So hopefully you could have set the text of the spot hands using their strings that examine file. But now I'm just gonna go to the strings. That exam If I I'm just gonna copy and paste this resource here. So let's change the name off this resource to write. But in text on the value is going to be next song. So just goto activity on their line Manager XML, select the right button for the text attribute here. Just refer to the at sign String slash right button text. Okay, Now we have the bottle at the bottom. So again, I'm just gonna copy and paste this string here. So the name is going to be changed too. Play button Text on the value is going to be play or place on. So I just switched to the activity on their lamented XML select a part in the text is going to be our play but in text. So hopefully that makes sense on now let's learn about internationalization. So in saddest things that examined find here we have something called a did translations for all locales in the translation editor. So if you click on this open editor here at the top, you will see that we have this open editor here and we have thesis icon that says add locale on. We can add our translations here, for example. I want to translate my application to another language are just little click on this ad locale on. I just need to select one of these languages. For example, I can select the Spain or any other languages that I want. So I'm just gonna use thes Spain and then here for the airplane. The value android you are is already said for these language Spain. So I'm just gonna select its handler and make it a little bit wider so you can see this column that it's added here. But for the left button text, you can see that there is no value for this Spanish language. So for the English language, the default value is previous song. So, for example, for this pain, you can enter a value here. OK, you can just double click inside an inside this tent area on just enter a value here, okay? Or for their place on again, I can enter another value or the next song. So this means that when the user's device language is said to Spain, then when the user opens our application, these values for this pain language will be set for the user. For example, the user will see the value off the left button text in Spain of it. This value the user we see despite you, or when the user opens the application on instead off their place on. Then they will see the Spanish equivalent off this default value. Because if the user sets the language off the device toe, for example, Spain, then the application will show these values. If you want to, you can add as much your cans as you want. So, for example, here I'm just gonna choose Chinese Right again. I can select this handler, make it wider, and I can enter values for the left. What intakes play but in all right bottom. So this is how you translate your applications to another language is on. If you open the project pain here, If you go to the rest, fall their values, you will see that the strings that example file is now full there containing free more strings. That example file the 1st 1 Is there default one that you already used. The 2nd 1 is the strings. That example file you stash R E s. So this is for the Spanish language on this is for the Chinese language. So I can you can just tap on these strings, are examined files and use these fogs in order to add the translations. Instead, you don't have to use their translations editor, but this translations military is more easier to use. Hopefully, that makes sense.