Adobe XD to Android Studio XML - Design, Implement & Animate | Stevdza - San | Skillshare

Adobe XD to Android Studio XML - Design, Implement & Animate

Stevdza - San, Android Developer & UX/UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
16 Lessons (2h 42m)
    • 1. Introduction

    • 2. Design Screen One - Adobe XD | Part 1

    • 3. Design Screen One - Adobe XD | Part 2

    • 4. Design Screen Two - Adobe XD

    • 5. Design Screen Three - Adobe XD

    • 6. Design Screen One - Android Studio | Part 1

    • 7. Design Screen One - Android Studio | Part 2

    • 8. Design Screen One - Android Studio | Part 3

    • 9. Animation For Screen One - Android Studio

    • 10. Design Screen Two - Android Studio | Part 1

    • 11. Design Screen Two - Android Studio | Part 2

    • 12. Animation For Screen Two - Android Studio

    • 13. Design Screen Three - Android Studio | Part 1

    • 14. Design Screen Three - Android Studio | Part 2

    • 15. Animation For Screen Three - Android Studio

    • 16. Final Touch


About This Class

We are going to design and create application named 'Las Vegas Views' , which allow users to find, get more information, and locate the most popular and beautiful views to visit in Las Vegas. The application will have 3 screens.

We are going to start this course by creating application design in Adobe XD, then I'm going to show you step by step how to implement that design in Android Studio XML, and we are going to create amazing animations on each and every screen.

For this course you only need Adobe XD and Android Studio installed on your PC, both of those softwares are FREE to download, you don't have to worry about that. Also in this course you'll find all the necessary files for you to start working on a real world project. I'm going to include not just the project files but the colors which I used in this course, as well as the list of most common shortcuts I used both in Adobe XD and Android Studio.

Basically no prior knowledge is required, because I'm going to walk you through this course step by step, however the basic knowledge of Adobe XD and Android Studio environment is better.


1. Introduction: Hello there. Would you like to learn how to design and implement the exact same design from Adobe Exito ? Enjoy Studio XML with beautiful and smooth animations. Well, then, this is the perfect course for you. We're going to design and create application named the Last Vegas views which allow users to find get more information and located the most popular and beautiful views to visit in Las Vegas. The application will have three screens. We're going to start the scores by creating application design in Adobe X'd. Then I'm going to show you step by step, help to properly implement that design in enjoys Studio XML, and we're going to create an amazing animations on each and every stream. For this course, you only need the Adobe X'd and the Android studio installed on your PC both off. Those Softwares are free to download, so you don't have to worry about that. Also, in this course, you will find all the necessary files for you to start working on the real World Project. I'm going toe include not just the project files, but the colors which I used in the scores as well as the least off most common shortcuts. I was in the boat Adobe X'd and enjoyed studio as well. Basically, no prior knowledge is required because I'm going to walk you through this course step by step. However, the basic knowledge off Android studio and the other because the environment is better. This course is for android developers, application designers, you white designers for anyone who wants to learn how to implement the same exact design from Adobe exito, enjoy studio for anyone who wants to learn how to design amazing and modern applications in Adobe's Day. For anyone who wants to learn how to create beautiful and smooth animations in Android Studio because I am going to teach you all that stuff. So what are you waiting for, enrolling my course today and let's start designing and creating beautiful applications. 2. Design Screen One - Adobe XD | Part 1: Hello, guys. And welcome to the first video off the second chapter. So basically, in this chapter, we're going to design three screens for our application. In this current video, we're going to start by designing the first string, of course. So I have already chose my color for called for color palette. So we fear white, yellow and black color. I have already added those colors in my car pellet, and those colors will be Those color codes will be in south file. You'll get that, of course. So let's create one rectangle in the size off our screen and its dragon. Drop that on the right side. Just hold old and dragged it. I have also created the status bar just toe feel the look off our released complication, but they don't mind about that. Our application will be a full screen. Okay, so we're going to start by creating one text, one of you worth 1000 words. Uh, so the size and the color color will be black form twill be open. Sense size will be 22 and the front will be life and both. You'll see now what we're going to do, So I left margin for our text should be 20. And the top margin should be around 40 for the two. Maybe we'll see now. Okay, Just a little bit down. And it's perfect for for now. Okay, Now, let's change for the light and the working to truth. Choose three words here and willing to change those words. Fund too bold. So view and the 1000 words will be fun both. Next, we're going to create the icon for settings. So this is just a simple line with the height off 21. All right, we're going to set it black color. And now we're going to create the circle. Fighting with will be three. And let's feel the color The black again. Now we're going toe. Copy those two evidence on the right side so we can get so we can get the better. Okay, I'm going toe drag. Drag this line from the center of the circle. I think it will line up better. Okay. And now we have our line on the center of the circle, which looks better than before. Okay, Now we're going to drag this on the right side and one more time. Um, the space between those two elements need to be the same. Oh, okay. And now we're going to just the drop. There was three circles on different levels on this on this line. All right. Ah, it should look something like that. Okay. Okay. Now we can select all those elements here, group them by control dream, and let's rename this settings. Okay, Uh, this I can show the hair top margin around 42 the same as our text. And the right margin should be 20 or 25. I think 25 would be better. So after that, we're going to create the surge of our So, uh okay, um, with that will be 320 in the fight will be off 48 or something like that. 46 will see. We will add shadow as well. Capacity for the shadow Will said that toe 10%. Okay. And maybe we can increase the fight off our search bar. But that that's on you. Eso the top margin from the search bar to the text will be 30 and the life left and right margin for the search bar will be 20 as well. Okay, so now We're going to create the box one box with the radios off. 10. I want to remove the border. We're going to add a shadow a little bit. Okay. Shadow passed it to 10. And, uh, now, let's see the top margin from our box. Should be around 40 and left and right. Of course. 20 as well. Next margin from one box to the other. Should be 20 and the Okay, it's already five minutes. Don't worry. So now we're going to start by creating search icon here on our search bar. So it will be black color of force sequel Circle with Okay. And now, just with the panto, create simple shape like that and we're going to group those two elements by marketing control agree. Okay. Opacity should be around 40 Let's say, and women 12 next year, which will say search here. Okay, phone will be around 16. Cora would be black, but a pastor will be set toe 40 as well. Okay, we're going to decrease the front a little bit, maybe. And after that, okay, we're going toe drag and drop or copy our boxes. White boxes down below, and we're going to put the three images in those boxes. You'll see how well how we will do that. Now, just a second. So hold Ault and drag those white boxes. And there you go. We filled our three images already. So, uh, we're going to recite those images to a size of this box and we're going to create the shape out of fit. Okay, We'll set the best to be a little bit lower so we can see our image here. And, uh, let's increase the capacity again. Let's select or those two elements in click mask with shape. So we're going to get the new shape with this image here. And we're going to repeat this step with the last two images, Of course. So, OK, let's select those two images. Decrease the size of this image, toe fit the box. Okay, let's increase the best before our rectangle and Maskell trip again. We got the second image, and we're going to repeat this step for the third image as well. Okay, degrees, the size and train capacity to see how it will look like. Okay, it should look fine like this. Yeah. So increased the capacity off our white box and select toe those two elements and click my scored shape again. So, uh, we're going to continue working on our first screen in the second. The video? Because I wanted toe. Ah, I wanted to split those ah, into two parts because I don't want the one video to contain more than 15 minutes, which is, I think, um, pretty a long time for U. S. So I want you to Constant to concentrate as much as you can with the A lower minutes video . And that was it for this video seeing the next part. 3. Design Screen One - Adobe XD | Part 2: Hello, guys. And welcome to the second video off the second chapter. So in this video, we're going to continue from the first part. So this is the second part video, and we're going to continue designing the first screen. Um, okay, basically, we're going to continue by dragging and dropping those three rectangles here on the left side and those images in our application. So the first image stop margin should be around 40. And second image stop margin should be around 20. And the third image top margin should be around 20 as well. And of course, left and right margins should be around the around 20 as well. So those three white rectangles will serve is an overlay. So let's change the color off those three off those three rectangles toe black, and we're going to set capacity toe, maybe 60. And we're going to set those on top off our images like that. Um, maybe toe 50 year capacity to 50. So next we're going toe group this overlay and this image toe one group by shifting control of G, and we're going to ring in that toe image One, we're going to do the same for the second image in the second over Late group by control G and rename it toe image to. And of course, we're going to do that. The same for 1/3 image. We're going to rename that toe Image street. Okay, so it will be easier for us to export later. Um, let's increase the height off our screen so it kind of looks better for now. Okay, we're going to proceed by creating a text view which will represent the title off this view . Just sick. Um, I will show you also the names off those vehicles in Las Vegas on those are the real places that just so you know, it's not an imaginary so changed that toe white collar font size 24. Open sense, extra bold. So this 1st 1 is the straight hotel casino in sky pod. Fun should be around 24. Of course. We're going to set it on the central of this screen. No. Okay. Just like that. And the next woman to continue by creating rating bar. Um, but first, let's implement this star SVG. So we're going to decrease the size of this star and change its color toe yellow. Okay, so we're going to create five for those stars, which will represent the rating bar in Android studio. And we're going to you The way went to give user opportunity toe array this view. Okay, so maybe the margins between those stars should be around five or six. Okay, so let's select those stars and drag them on the right side, because we need to create the half of the star. And we're going to do that by lowering the capacity of this one. And for the second, we're going to create the new shape bisecting those two. Okay, let's change the direction here, and it looks fine. Yeah. So now we should have ah rating star rating for 4.5. This looks like 4.5 and and, uh, more. So Okay, this will fit the down below this title and on the right side off your father rating bar should be should be two numbers. One, which will represent the the rating in the second were will represent how many users have aerated this Las Vegas view. So let's say the first rating should be around. Yeah, 4.91 font size should be around 15 regular front, open sense. And the 2nd 1 should be, Let's saying those brackets Ah, 500. Then we're going to lower its capacity a little bit. And there we go. So next we're going to drag and drop those title in ratings down below on the second view and the with 1/3 view as well. And we're going tojust the change, the title and the ratings rating numbers. So Okay, just a little bit lower and it it's perfect now. Okay, Um, so the second Las Vegas view is Ah, skybar it weather a story and we're going to change the rating toe, Let's say 4.75 and the second number 2 784 So the third title will be a boulevard pool. If the cosmopolitan okay, and the rating numbers, let's say 4.80 and 230. Okay, so there you go, uh, which have created our first screen for our last Vegas views application. It looks so pretty clean, I think. Um, so in the next video, we're going to continue by creating the second screen or by design the second screen. Of course. So see, in the next video 4. Design Screen Two - Adobe XD: uh, hello, guys. And working to the third video off the second chapter. So basically, we're going to continue from the last time in the last video we have. Ah, in the last two videos, we designed the first screen, which looks pretty simple but beautiful. Now we want to create or design the second screen. So first, let's great one rectangle in the size off our application screen. Let's drag that on the right side of our first wing eso We're going to remove those borders . Okay, we're going to increase the height off our screen just a little bit, and we're going to copy this white rectangle so we can create the new shape for our background image for our second screen. So let's train capacity toe lower, and it's center this on this image a little bit so we can see how our background should look like. So when you when we decided how it should look like we're going to settle Dusty 100 and we're going to select those two elements and click mascot shape. Okay, so this is our background, and we're going to put his background on top off our on top off our white background. Okay. And the this white background, the should serve as overlay is a black or lady what you'll see now? So, um, this time, we're not going to use a field color, but instead, we're witches. Ingredient, and the the brilliant will be black, but with a different opacity numbers. So the lower the lower dark, the lower will be the darker. And you can play with this by creating new spots circles think this and dragging like left and right and switching the a pesty by yourself. I'm just going to do this by my feeling how it should look like, um So, um okay, down should be a little bit darker, I think, because there will be a text. So it should be clear for the user to read that. And that's light and the okay. Lets stay that for now, but willing to change that just a little bit when we add text, so you'll see. Okay, um, so next what we're going to do, we're going toe copy this first Las Vegas veal title like that. And, um, we're going toe said it on the center of the screen. Okay. Um, it should be on the center or maybe a little bit on the left. Okay. And we're going to copy again. Ah, the rating bar from ah, from second from the first screen and the women toe create the A little bit off text, which will represent the details about this one last biggest view. So I'm just going toe right. The some stuff I found on the Internet about this place, this threat hotel and casino. So top of the world is known as one of the most romantic restaurants in the city. Um, it offers, um, and intimate dealing dining settings bid with with an extravagant view off the entire city . Uh, all encompassed with the in a 360 degree and the three dots. So that means if you want to read the full text, you'll hear toe switch to ah, detailed view or the terror screen. But we're going to do that later. Okay, so, uh, we're going to change the phone toe open Sense font size should be around the I don't know , maybe 12 for 15. We'll see. Capacity of this text should be 50%. And the top margin should be, um, should be 16. Okay, so we're going to grease the this dark color from the bottom so we can see this text a little career clearer. Okay. I think now it looks much better than before with increased the size. Okay. Okay. I think it looks away better than before. So now that we keep our title in the subtitle we're going toe copy this. This rating bar and its numbers. So let's put those elements on top off our layer so we can see them on our screen. And, uh, okay, the top margin should be a little lowered in 20. Okay, Maybe it's something like that. Yeah. And the the last thing we need to create here is ah, one arrow and the text, which will say more details. So basically. OK, so this will be, of course, white collar. And basically, when the user clicks this little arrow, it will show that to the user a more detailed information about this, the street hotel casino and Skype or the Las Vegas view. So there was a real care of opportunity to read more text in the informed, okay. And of course Ah, that will lead him toe toe. Third screen, which will be designed in the next video. So the top margin should be okay. Something like that. We'll see later. And the text will say more details. Font should be open. Sense, maybe light. And the front 12 or 13. Okay, talk margin around the nine or 10. And there you go. Uh, this is our second screen with the looks. It looks really amazing. We might modify this design in the later videos. But don't worry, though. Those will be minor changes. And for now, let's stay like that. So, um, I think for watching in the seeing the next video. 5. Design Screen Three - Adobe XD: Ah, hello, guys, and working to the fourth video off the second trip. So we're going to continue from the last video where we have designed the second screen. As you can see, we have already completed the two screens, and now let's proceed to 1/3 1 or the final one. So we're going toe, create simple rectangle with the size off our screen. We're going to drag that on the right side without Borders, okay? And the now would quit. We're going to create the header image. So this other image should be our image like this, which will, which will be the same in an image is ah on the second screen. So it's, uh, decrease the size and that's strange. A plastic a little bit. So we need to avoid this this watermark here. Okay, I think it looks better now, so let's increase the capacity and let's like those two elements, click mass would shape and we have created our shelter image. So, uh, this other image will stay on the top of the screen, of course. And we're going to great when the overlay with the same size off our together, Of course, which will be black color or ah, ingredient like we did in the last video as well. So the top should be darker and the bottom should be Ah, a little bit lighter like that so you can play with this. Ah, as you wish changed the dark wall, Aries. As you would like to, um, in mind should look something like that. Not too dark, but not too light as well. So now that we have created our shudder, we're going toe copy this arrow from the previous screen, and we're going to drag this arrow on the top left corner off our third screen. So let's put this on the top of the layer, and we're going to change its direction. So so, uh, to the bottom. Okay, Be sure Toe check the same to put the same margins Asai did. So OK. Direction should look to the bottom, and the size will be too size of our era. So next we're going to copy this title, and we're just going to change the color from white to black so you can see it on our screen because we have a ah white background here and the ah, our left margin should be around 20 in the top margin. Ah, I don't know. Something, something like that. We will see that a more detailed in our android studio later. Eso Now we're going to create the one subtext which will say about, um, sighs off around 15 and the front open sense bold. So just below are about text. We will create the details more details about our last Vegas view here, which is this threat hotel. So I have prepared the full texts for Ah, this the streams so we don't get the type by ourselves s okay front of this Second, the text will be 15 opacity and the phone should be not bold but regular. So we're going to copy this text which I have already prepared. And let's just base that here Okay, on the left margin should align with about text above top margins should be them left modern. Ah, maybe it the same or a little bit more Next below that button billowed. This text should be on another text, but this time top margin should be not 10 but 20 and it will save annual type. So let's increase this screen a little bit and the for venue type, we will say restaurant and we would copy the third the next. Okay, but Mr Text will be down. Oh, okay. And the venue type should say restaurant. Let's drag this on the top. Okay? And the top modern should be around 10 like that. And the third, the will say type off you. And this is the text for a type of few. Okay, the top margin from the type of you toe the this restaurant Extra 20. Okay. And now that we have created all of that, we can win it toe implement rating bar and one button eso. You'll see now how it would look like this. You will be background, Let's say or ah, bottle navigation for our button. No. Okay, Something like that. So now we're going to create the hero. One more button button will say check road map. So we're going to give us the opportunity toe check where this last Vegas view is located on the map. And, uh, okay, this I've ever created this bottom navigation for now, but I might deleted in the future. Will want to see how it would look like in the android studio Eso Now it's great. One more rectangle, which will represent a button. Of course. Let's create it on the central this strange vertically, horizontally. Let's remove the the borders and the field color should be. I think it should be blue. Let's just find the right the right shade of blue. It will be a light blue, I think. Okay, something like that. And the maybe darker little bit We'll see. Okay, let's say this car tow our color palette as well. And the radios should be thin or 55 looks better. It looks more professional. Yeah, and the Now we're going to create the text, which will say, Ah, check road map and the just on the right side off our test, we will import one Ah, icon for a steps you'll see now. So the color should be of course, right, because it looks much better on our blue button. Ah, fun should be made bold. Open sands front, of course. Eso the space between characters. Ah, well, say toe 200. And now let's import one svg file which I have prepared for you. It's those footsteps and we're going to set those on the right side off our text. Which white? Which will be white collar, of course. So in the to select those two elements now in the Put it on the center of this button. Oh, okay. On the center like that and I think it looks very beautiful. So this is our third screen. It's filled with a bunch off information about our ah, our Las Vegas view. Which is this Threat hotel on the user? Of course you have the opportunity toe. Try this on the map on Google Maps. Of course. So OK, let's put this bit down below because we're going toe import. One more thing, which is ah rating bar. Let's put this written about on top of the layer so we can see it here and the Okay, let's line up with the left margin of those elements before and, uh, we should put this everything by a little bit on the top. Okay. It was created this capacity off our writing bar and with this rating bar, our screen, our thirst win is finally completed. We just need toe. Ah, and some finance finance toe. This, like talk margin should be the right the right size so it can all be lined up perfectly. Okay. And I think that we should created the beautiful screen. Just decreased this screen size. Imagine the bottom of the button. And did you go? Um, this is the final video off the second chapter. And in the third chapter, we're going to start designing those screens in injury studio. And, of course, we're going toe Add beautiful animations, toe those screens as well. So stay tuned. Um, because ah, more great stuff is waiting for you in the next chapter. And, ah, I'm hoping you will learn. Ah, many, many things that you ah didn't know so far. 6. Design Screen One - Android Studio | Part 1: shallow guys. And welcome to the first video off the third chapter. So in this chapter, we're going toe implement design from Adobe is the toe android studio with animations as well. So, uh, this current video we're going to implement the the first screen I was playing this Ah, into two parts Because it's gonna be a long video. Okay, so you need to create a simple project. We are going to name it less regular Las Vegas views. So after you created the your project, just wait until greater finishes. It's a job here, and, uh, next we're going toe the colors in our product before we start implementing our design. So open up color XML and style XML. But first core primary and color primary dark set toe black color, which is six zeros. And the color ascent will be ah, yellow color. So let's copy the yellow color code from our Adobe X'd product, and we're going to place that year, okay? And we're going to add one more colon, which is the white colored coat is ah six efs like this. All right, so next head over Total styles XML file and we're going toe at the two lines of code. First in orderto remove action bar. So of, ah, window action bar set foot falls and with the no title set to true. Okay, so with this, we're going to remove the actual bar, and we're going to have more space toe design our application. Next, we're going to set the window content transitions. This will be useful in the later off this chapter because this line of code will allow us to use animations, transitions, innovation, transition animation. See our product? Eso Next. I'm going toe. Add the two more optional lines. Um, this will be a video, uh, turn slowed translucent status. Uh, and the big toes. Translucent navigation. This means that our navigation centers bar status bar will be transparent 50%. This is just an optional. So those two last line off coat are optional. You don't have to use them because we're going to use the full street activity. But I just want to show you how you can set your navigation bar status bar to 50% transparent. Okay, so, uh, on excrement to close this. And, uh, we're going to open our main activity layout. Ah, So first we're going toe. Add the two verticals vertical guidelines. So basically, these guidelines will help you with the design. It's just like those guidelines you're having. Adobe Illustrator, for example. So left margin for this political strain Sorry for this vertical guideline will be 20 and we're create one more vertical guideline. But this time we're going to put that on the right side and we're going to set the right constraint toe 20 eso We can ah easier implement our design from Adobe X'd. You'll see. Okay. And after that, we're going to use Ah, Okay, let's just check it out. Eso basically next we're going toe implement the title, which is one of you worth 1000 words. Okay, So as you can see, all elements have ah, left and right margins toe 20 size 20 dp. So it's compatible with our activity. May layout. So first, let's create new directory Android Resource directory and from this rope down, many select the front. So we're going to implement or ah, we're goingto copy all those phones which we used in our database, the product. So just copy them and paste them here in our front folder or directory. Remember your phone file names should be all lower case letters. Okay? And now that we should implemented phones, we can start with the project. So first, remove this text, you and then we're going to place that here below those guidelines. And now we're going to set this small, this text you toe top left corner. But, uh, we're going to remove this constraint, and we're going toe constraint. Our text you to our guideline, and the hour left constraint will be zero. So, uh, basically, our text view will merge with with our guidelines like this. And the top margin should be around 40 as it is in our other big city design. Next text. You were going to read the okay, three text use, and we're going to need to more text use because we're going toe set the different funds for each of the world. And that's why we need the few text use eso we toe adhere the i d for first text. You, uh it's a common a common thing. Toe name your elements like test like text use and others to some recognizable name. But for the first string, I am not going toe at the recognizable names for the ID's in order to show you how hard it will be Design. And in the last two strings, I'm going toe use recognizable names for my you are elements. Okay, so now I'm a training the text and font and color. So let's copy those three attributes and pays that here. So our second text will have Ah, bold phone instead of the light and a Zaken. See those three text you should look like like that. So the terror attacks. You will connect toe the second and the second will connect with the first and third. The top constraint will be connected to the top constraint of the second next to you and the second text, Theo top constraint will be connected to the top. Frustrated, the first text. And when we move one text, all the other texts are moving with with it like vagrants on the train. So that's a pretty good way to design. Just remember the steps, okay? And I were in tow at the tomb or texts. Excuse. So just let me check. Okay, That said no more. We're not gonna going to need the Turk Okay. And now let's do the same for those two text use. So we're going to copy the attributes so we don't need to write them again. We're going toe. Our time is valuable. So now, uh, check. Okay. So I'm going to place those three attributes And for our last text view, where went to it was bold forms. Okay, bowl. And now it's strictly out. Okay, it's It looks like the same in our adobe is the design. So we're going to connect this for the text Butto The guideline in the fifth text year toe Ah, fourth, that's you And the we're going to connect the fourth text Your top constraint toe the first text you in the top constraint for the fifth text butto atop constraint on the fourth next year. Okay? And when we move this, uh, a the 1000 words text you is moving along, so Okay, the left constraints should be zero and top constrained should be zero as well. So now we have implemented basically the same as in our head, a big city design. So let's open the app and check it out. Okay, So our status bar and the navigation bar, uh, are visible. So we need toe eso going toe open up our main activity driver Class Joe file. And in our own create method, I'm going to write fast two lines of code which will allow us toe hide our status bar in the navigation bar. So I get windows set flex and inside the briquettes type window manager dot layout, parents dot flag layout, Nolan's. And now, just below that, women was this. Get window, Get the core view. Um, sets system, you high visibility and the Here we're We're going to where? The couple off lines, So view dot Now it's a system. Why? Ah, flag, uh, flag layout stable, and we're going to have a couple of those. Just remember, we're going toe the thesis this block of code in each off our activity in orderto make, although screens full screen. So just, uh, I copied it. This goto each of the activities which will be created, of course, later in this discourse. And, uh, now when we finish Okay, I think one Mauritz left. All right, You don't system your eye flag. Okay, Marcie, stick it. And now we need toe at this invitation for? Ah kitkat version. So target AP I We need to target our, uh, android version. Get in above, and I will come in this so you can understand what this line of lines of code are for. So high status bar and navigation bar as well. Okay. And now let's open the app. As you can see, we kill full screen application. Now, we don't see any status bar or bottom navigation bar. So it's ah is great. We can proceed. Ah, with our, uh, design. So first thesis settings icon. We're goingto export this as svg so exported on a desktop or or wherever you want. So right, click on the drop ball directory. I click new and the vector acid. So now click this local file in the select or browse Theis SVG icon. We just exported from the Adebisi. So mine is located on the desktop, so just click off case like that and click OK, So instead of creating the injury files, it's better to use SVG files. They have a better Ah, a resolution. We don't see any pixels when we open it. So basically, this is the file. You see a bad data and everything else. So let's add imagery. You here and inside a symmetry we're going Toe said this seconds svg file. Okay, now we're toe drag this SVG on the right top corner, just like in our design. So let's connect the top constrained to a parent and the right constraint toe guideline. So the right constraint that should should be five because our guideline is 20. And this 5 25 as you can see in our design, it says 25. So it's pretty precise. Okay, five and 2025. Okay, on top margin should be 45. I think it's better that way. And, ah, now it's changed the within height. Ah, so 30 dp so we could have our setting cycle a little bit bigger. I think it's good for now. Let's around the application to see ah, how our application looks like for now. All right. As you can see, it's pretty clean. Let's let's see our designing looking out of a city and it's pretty much the same. So I will stop this video for now, and, uh, I'll split this Ah, for a screen implementation Andres studio into three parts because I want to explain everything details so you can understand how this implementation actually works. So that's what that was it for This video, uh, seeing the second part? 7. Design Screen One - Android Studio | Part 2: Hello, guys. And welcome to a second video off the third chapter in this video. We're going to continue from the last time. So in the previous tutorial, we should have ah, started with implementation off our design in Android studio. We should created just those few text views and one I can first settings. So because we could use the SPG file or vector graphics, we got an error here. So we need toe. Add one line off code in ah, in greater build file application module. So open up this building raedle file and, uh, just below this line at the vectored Robles, don't you support library equals two. True and click. Think now. Okay. And now the error disappeared. So we can continue implementing s victory for us in our project without any issues. And now it's ah, had search for you. So just at it here and lay out the width and hate set to rep content like this. And now we're going to connect constraints, right and left toe. Vertical guideline. Okay, on both sides. And, uh, let's lay out with set toe match constraint. Okay. And top constraint. We will connect toe our fourth text view, which is a okay. And the top margin should be around 30 and left and right, there should be zero. Okay, uh, now we need toe. Add a few more things. So, Okay, As you can see, the top margin from the text from the stroll from the search bar is 30 as well as in our design here. So now, um, next what we went through, we're going to create one resource file, and we're going to name that file custom search of you. Okay, so the parent element will be shape. So there's shape and we're going to add one absolute shape we're going to set. It shaped a rectangle inside this shape. Women toe a few more lines. A few more items. Um, the first item will be, let's say, corners said the radios toe 100 dp. And the next ornately was solid. Said the color toe white white color is added. The in the previous story in the probably in the previous video and the one more item for petting petting left, we're going to set it toe. Ah, 10 db. Okay. And now let's get back to our main activity layout file and, uh, in our search view, We're going toe Add the idea first searching you and down below we're going to say background and we're going toe set the ground Tow ARD Robles Custom search view, which were made the second ago. Okay. And I think we should add a few more attributes on our search view, like big round shadow. So that shadow is named Elevation. So elevation means they're shadowing our products, So we're going to send that to 20 dp. We got the warning here telling that we need to use the A P a Level 21 in order to use that this attributes So I'm just going toe suppress with tools. A p i absolute lollipop like this. And now we can we can start our application toe, check it out. How how are such view? Looks like, And we forgot where the hint. So we're going to add the searching for ah, our search for you. And we're going to say, Just search here and three dots. All right, um, let's check it out. Now. Open the application and ah, it was fine. Yeah, we have a shadow now. I think just we need to increase the height off our search for you because in our and dry studio application, it looks a little bit small. So let's do that by by changing the height value toe, I don't know May maybe 60 60 deep Pier 60 dp will work. Fine. Let's around our application and let's see how it looks like now. Okay, now it looks away better. And now that we have implemented our search for you, we can start with the implementation off our ah Las Vegas views down below like we have on our design. Okay, uh, and now let's at the first scroll view. So inside this scroll view, we're going toe. Add those. Ah, les Vegas fuse. The first change, the width and height toe. I don't know. Maybe 100 dp. So we can drag this element of the center of the screen and the connect. Ah, right. And left constraint to ah, vertical guidelines like that top constrained toe a search for you and the bottom constrained toe parent on the bottom. Okay, just like that. And now we're going toe set the right left and bottom margins to zero. And the top margin should be around 40 maybe 45 or 40 Yeah, for the to never mind and play out with set toe zero or metric in strength and the height as well. And now inside our strove e, we have a linear layout. So inside our linear way out, we're going to implement card views and card views will represent our boxes Well, that we have on our design. So we need to add the implementation or dependency in our greater build file. So I just copy this code, okay. And the edit here, down below. Click sings now and wait until great finish that and the next. Go back to our men activity layout and we can search here for card view. So let's add cardio inside the stroll view and inside a linear layout. So, um, let's change the width and height for our car view so we can see that on the screen. Okay, just a second. Uh, now it's at the one of you in our cars. You. But before we did, we do that. Let's add constraint layout before that. So add constraint layout in our car view and inside inside constraint layout. We're going to add a simple view which will represent the background. Okay, And now let's change the width and height for our car view so we can see that on the screen . 226 DP height. And now, for our view, we can set the match constraints. But we don't You have anything in our view, So we need to export our three images here, So let's copy them on the left side and before, before we export them. I want to change the radios, the radios off those images because personally, I think it would look sharper and better in our application. So let me take miniter toe change. Those radius is. And after I am done with that, I'm going to select all those three images in Mangwon image to an image three Click Control E. And we're going to export that is PNG and check this android. So after that, just click export and ah, we will get six folder citing for each screen sizes and they're working toe. Copy those folders. As you can see, those are six folders, and I'm going to copy those folders inside our draw ball Director here or sore inside the Resource Director just like okay. And there we go. We have added the those images for, ah, different screen sizes and now inside our view here. Okay, we need toe to measure the constraints to our view, but don't worry about that. Its first, um and some, uh, attributes here like a background. So we're goingto locate our first image image one. And now let's ah connected the constraints toe apparent or constraints. And the parent is carve you, of course. So let's ah, truths within high to rep content and its move This image here. Okay, and it fits perfectly. So set the constraints to zero left, right, top and bottom toe zero. Okay. And now we can On top of this big round or our view, we can set the title the rating bar in those numbers. As you can see, it's ah little bit nested here, but you will learn it's not the that hard to implement that. So we have a scroll view inside this trophy. We have ah, linear layout and inside linear layout vertical, which you have a car views and we're going to implement the three car views here. So next we need toe. Add the text, which will represent title. So the street hotel casino in Skype. Let's base that name Sheer Okay. And we need to add the escape character for our M percent year. So just type. You're a MP and Ah Colon. Okay. And now let's change the text size to 22. Or maybe 24. We'll see. Next caller toe White fun toe bold, extra or extra bold. Okay. And now we can connect constraints to our parent, which is a car view. Just click that circle plus button. It will automatically connect the constraint to the closest parents. Okay, Sorry. Wanted toe. Connect this parent on bottom constraint again. So top stop constraint margin should be 110 left. The margin should be 12 for now. We'll see how it looks like when we open our application. And next, we need to implement the rating bar and those two numbers. Okay, so get back to Android studio and, um, search here are rating bar and Dragon. Drop that here. So we're going to change few attributes here on our writing bar. So, um, women set next stars to five. Ah, and number stars. We're going to set five step size will say 0.5 and the rating will set toe 54.5. Okay, we can add one more. Ah, execute, which is progressed. Inked, which is a color for our stars will set the yellow color, which which is cooler ascent that We got some warning here, but we're going to remove that easily. We just need to add the target ap eye level. Ah, and let's add the one more thing, which is Ah, style. So, uh, we're going to do is already created style by Andrew Studio, which is Ah, small size for our rating bar you'll see now. So android throw darts a d t r rating by small and we got our rating bar. Okay, let's connect constraints here. Left constrained toe apparent top constrained toe our text view here above. And, uh, let's say top margin should be 10. Okay, Now it's said to text views for the numbers. Okay, when we're going to need to change the text colors and some other stuff like forms in size . So the 1st 1 is 4.91 in the second is five down inside the brackets. Of course. Okay, Let's change the color white and the size will be 15. Sp phone should be maybe a regular open, open sons. Bold. Let's say Let's see how it looked like how it would look like just copy those three attributes here. And let's just just change this third toe open Sounds like okay, and we need to connect constraints for those toe text views so connected to the 1st 1 top top constrained toe top concerns of the first text like this. Okay. And, ah, the first text to operating bar. All right, so docked for top for constraint will connect toe our title and it's a top margin. Should be maybe 14 or 10. Then it's for good. And that's it for this tutorial. Um, in the third part of this video, which is the final part for implementing design from Adobe's the Into Androids Studio for the first scream we're going to continue on, we're going toe to more car boxes, and we're going to run the application to see how it looks like Stay tuned. Seeing the next week 8. Design Screen One - Android Studio | Part 3: show, guys. And welcome to the third video off the tractor. So we're going to continue from the previous video where we have created one card view. We told those elements here, inside, and this one, we're going to copy this card view. We told those elements two more times. Uh, so as you could see, uh, women to make our application. Look, the same is in our design, okay? And basically what we're going to the way we were going toe, copy the code. Here is the card view. So on carve you click minus here, and we will get just one line so we can copy just one line. Now click plus eso. We got an error here, many errors because we need to change the ideas. Azzawi copied those earlier. So, uh, thing is what I was talking about in the first video, You know, it's very important to give the ideas to some a recognizable name, so you can remember more easily, but I want toe to leave that on purpose and show you how hard can it be to name And remember those elements just by numbers like here, a text view Number 10. So long. Um, and when we copy one more time, this this card, you it's gonna be even harder. Uh, okay. Soul. It's at the top margin on our card. You here so we can split them up a little bit. So that margin will say on every 20 people. Okay, Now, if it was better, we just need to change the image and those numbers rating numbers in the title. Eso way will copy that. Okay, we changed the image, so we will copy the name. And those numbers is Well, um, in the last four screens, we're going to create the recognizable names for ideas. Eso You can see the difference between that and this screen, which is full with with the auto generated names like next. Few number 123456 And so on. Okay, next, let's change those numbers. This one is, I think 784. Ok, uh, all rights. I think we should move this just a little bit down. So drink at this title down maybe a little bit more, Okay. And we can run the application to see how it looks like before we had 1/3 car view king has been. See, It's pretty the same as in our design, but the doctor is a So we need to copy this. Carve you one more time. Let's change this rating bar to writing about Coop and here. Constraint. Really? Okay. And the no click minus fear on cardio. And select that. Copy this line of code which will copy this whole nested elements. So possibly store and change the ideas again. I'm just changing the ideas again. Rental numbers, like, 11. 12 so on. Okay. And after this video, we're going to start with animations, and I'm going to slow kowtow at the transition animations in this screen to implement that . So when we open application, we will see a moving elements entering the screen. It will be pretty small. An amazing, almost every modern application. Hey, has some kind of animation inside. Okay, so now it's changed the image, and let's see how it would look like. Okay. Looks fine. We're just name toe to change the title. And, uh, those numbers. Okay, go. Go. Ben's day. And copy this this name. So go here and changes. Okay. And the course of the number says well and Now we can open application to see how it looks like. So just scroll down and we don't see the rating baron numbers waiting to move those. So just was a mouth scroll. Mouse, squirrel, scroll wheel, toe get down, toe visible. Liverpool appointment next. Just moving a little bit up like just idea. And now it should look just fine if you want. You can also create the bottom margin to get more playing space. The bottom. So now it's up in the application and there you go. We have successfully created the first screen in Andrew Studio, so stay tuned. And the next video we're going to create the animation for this one. 9. Animation For Screen One - Android Studio: Hello, guys. And welcome back toe the fourth video off the third chapter. So in the previous videos, we have ah implemented the design from adobe eggs in Android Studio. So we have finished the building. Our first screen and a Z can see. This is our competent tree. So we have a two guidelines Bunch of text views, image you search for you and on the bottom we have stroll view inside scroll view we kill in your layout inside linear layout with your car views. And in each of the cardinals, we have, ah, writing about and the text for use as well as the background image. Okay, so that was the carpentry. So this currently we're going to start with the animation. So in orderto start animation, we need to find the ideas off all those elements we want to animate. So let's start with car views. So, on great method, we're going to find the i d off. All those cardio is here. They are named card view of you to cover your three. So just changed the names here. Carve you two on the last one. Carve you three. Okay, eso next. We're going to do in the resource that actually, we're going to create a new android Researchers directory From the drop down many you you will find the enemy, so click OK. And inside this folder, the or directory, we're going to create a new animated resource file. We're going to name that any from bottom. So this means that our that our animation will start from the bottom. We will create more files here, but this is the 1st 1 So let's start by using a translator. I think here we have a bunch off attributes. So let's first add the duration duration will be 1000 milliseconds or one second, um, next we're going to use from X delta, we will set it to 0%. And from why Delta, we will set the 100%. Okay, let's close this tag, okay? And the second item will be offer, which is basically opacity. So let's first add the duration duration for this one will be 1.4 seconds or 1400 milliseconds. So from Alfa will say, Well, set to zero and two Alfa toe one. So, basically, we have a fade in effect. Okay, Um, now Let's kill over two men eternity. And here we're going toe. It was animation class. And let's create the first any toe from bottom and him from bottom. So we're going toe import this animation where we went to also create the variables or objects for any from top from left. But we're going to create those files later on or in the next. Video eso in on Crete method currently was this animation object to load the animation from the animation you tills. So is a perimeter pass This which is minute charity class and the second parameter is our actual file we just created. Okay, so next we're going to ask our view to set the animation toe, this one animal, anything from bottom. So we're going to use the same animation for all off our car views like that. And let's open our application to see how Theo enter animation looks like. So when we open our files, as you can see, those cargoes are coming from the bottom to the top because in our animation file, we set the X Delta tau zero and why that 100%? Ah, so basically X and Y Oh, sis are You can imagine X and y all asses in the our application screens. So basically, on the top left corner, we have a value of zero, and the horizontal line is X And the vertical line is why in when you oriented, when you create the orientation like that, this court will hear sense through. So as you can see, this top left corner is zero. And this horizontal line is ex forces, and this vertical line is why Oasis. So when we said this x y to zero and uh uh, why ah, through I to 100%. That means that, uh, those elements will will start from the bottom if we, uh, she have set ah, zero white horses to zero, then they will they would come from the top. So let's hit it over to ah, this animation file. And, uh, we can also you can also experiment by herself by changing doors. Well, is, um, for example um, from why Delta? If we said that zero, nothing will happen. As you can see, just the Alfa Effect, which is opacity. And if we set the X to 100% than as you can see ex, uh, he's the horizontal line, so that means it will start from the right, because the top left corner is zero. And, uh, right side is the 100%. So it makes all sense. You just need to practice that a little bit on yourself And the now, let's create from top an initial file here, and we're basically going to use the same translate, I think here, inside our set. Okay, so let's add this translate here is, well, duration first, so the racial will be one second or 1000 milliseconds. Okay, Um, from X Delta will be zero. So, uh, 0%. And from white Delta, it will be ah minus 100%. So basically zero is on top, left corner, 100% in plus is down, and the minus 100% is up. So basically, this animation will come from top. Uh, you can play with those numbers a little bit so you can check it out. How actually works, but the the the same kind is the same. You know, you can X and y Oh, sis. And you're in the yourself by those lines. So next, let's go to main activity and the we're going to import one imagery, which is settings in the bunch of text views which will represent our main text on the top left corner off our application and we're going toe enemy all those all those elements as well. So we need to find the idea off each of those elements so is considered. Next few takes you to text 334 and ah, we need to find all of those in orderto set animation for all of those items. Okay. And one more text for okay. And now we can loads our animation, which is ah, animation from top. And now let's said those animations for image for you first and exported all of those textures, so just controlled the and when it clicked controlled the line will be copied that to the next line automatically. Okay, as you concede those those text use in settings image you are coming from the top. Now let's stretch it out again because you can see it's slowly coming from the top and now we need to animate search view as well. So the search you will start from the left, So let's create animation from left. Okay, let's use translate. Okay, first, of course. Let's send the duration for our animation. And, let's say 8/100 milliseconds from X Delta minus 100%. That means it will come from the left. And why? I doubt it could be 0%. Okay, I think it's pretty. It's not that hard to understand. How does translate animation works? Um, you you saw already for the animation from the top and bottom and now from the left and in the later radio we might create when animation from the right as well. So let's slow this animation in our main activity. Okay? And we need toe, adds Crowe View. Oh, sorry, Its search for you then the Now let's add here on the top search view, we will name addressed search view. Let's find the idea of this element as well. Okay, And now let's start animation from the left, set an emission and is a primitive past this enim from left object. So let's start the application and let's see how how it moves from the left side. Okay, it'll spread too small. You can also add opacity for this animation from left as well. You just need to add one more line of code, which is Alfa. And this concede it's more spritz small from top, from the bottom it from the left. So let's and the Alfa here when our any mission from the left. Eso it say the Russian Maybe, I don't know, maybe one second. And, uh, from 10 and two, Alfa one. So now it's open up our application again. And let's see how now it looks okay. It's not a all right. And that was it for this video. In the next video, we're going to start by implementing the second screen in our in our studio applications. So stay tuned and see the next video. 10. Design Screen Two - Android Studio | Part 1: shallow guys and welcome toe the fifth video or the third trap. So my previous videos we have designed the first string in a be in every studio and we have also animated this screen. So when we open application, we will see the animations and the next. In this video, we're going to start by implementing the second screen design in tow Android studio. But before we do that, I want to make a few minor changes to our design atop PST. So the first thing I want to do, I want toe create new icon, which is the back button back arrow icon. So basically, I just copied this herro from down below by holding old dragged it and the with the Pento, I added one more line from after the rights and we got this simple icon. So we're going to move this little down arrow icon on the right side and will place this back icon here on the left side. So we center those toe Eichel's perfectly. I'll decrease the size off this cycle. Little bits. Okay, they are the same now, and I might change the size toe three size of those lines so it was better. Now this is just temporarily. I want to see how it would look in our application in an injury studio in the later videos . I might make changes again, but you'll see okay so we can get on the left side on. Let's trick it out. They are the same on the same line, and I think they are. Yeah, so let's move this arrow on the left side and the wearing was this back arrow on the second string as well. So hold the shift and old and the drag this arrow on the left side on our second screen because we need some some narrow so we can go back from the second screen to the first screen. I forgot to add that on the whole shift and old drag this narrow. Okay, it's small like that. Left margin should be around 34 top margin should be 50 for this carol. And now we're going to export all those resource is winning for the second screen. So first the whole shift and old and the drag this background image. Let's rename this background image to a background and the control you and women toe export This a za PNG android for Android studio. So now we have generated six folders for durable directory Ah, off each screen sizes for each screen sizes thesis background image for ah, a bunch of string sizes. You'll see way already did that for the previous screen. So now we're going to export this back Arrow Control e And we're going to export as SPG this time and the this up arrow will be exported. Is spg file as well eso now? Well, first thing we did do we need toe copy our our background imaging to resource directory and let's switch the product view and it's locate our resource directory here. Okay? And there it is. So I'm going to open Ah, File managers year and, uh, Filiberto desktop. So I'll copy does or drag those six folders off our background image in our resort directory Rustic. Okay. And we got in there. Sometimes it it happens. I'm not sure why, but I never mind about that because we were going toe at those fathers manual into our product. So locate your and restore your project and get over toe resource directory and just pace that pace those folders there. So when we open that file, we can see our background images there, and that's it. Next, we can proceed to our entry studio and the we need to import the Baquero and a Pero a city files So switchback toe android view And, um, to, uh, in tow, Drop off directory. Right click New vector s it. And let's locate our toe to svg file. So first is ah, Arrow up and the district next and finish. And we shot that converted to XML file. Okay? And now select our back arrow from the desktop. And we're going to import that, Aziz. Well, uh, as in our previous Pero so just like next and finish. And we also have this file now as XML file so we can proceed Ah, and create the new activity for our second screen. So, just like right, click new activity and select empty clarity. We're going to start from zero, of course. And let's name to security, simply second, Okay. And click Finish. Uh, now that interest finished building our second charity, we can start by importing our background image to our constant play out, which is a parent layout just there was a background attribute to add our background image from the drop of directory and next, Illit said. One image view here, which will be our back arrow from the from our project. So now it's correct those strains for our even view. But first, let's change the i d toe toe second. Baquero. If you're wondering why I had the second World at the beginning, it's because this is a second security. And, uh, it's a great indicator off off. What element belongs to water to it. So let's go in the top from strength in the bag and the left and right Constraint. So left constraint is about 34 the top constraint is about 15. So let's change that. Let's said left full strength as well changed at 2 30 34 and it was very nice. Okay, so next going toe to text years, which is the title and this subtitle etc Okay, lets gonna write constraint. So we can She had this, uh, in Israel connected on both sides. And now it's important text view and, uh, another one down below. Okay, Now we're going to change the ideas off those excuse so the 1st 1 will be named second title and the second will be second subtitle. So the second the doors second represents the activity, the number of the activity. And now let's change the name off title. So escape character I percent m present with column. Okay. And let's copy this subtitle. Of course. Okay. And now that said few attributes for cooler front and text size. All right, so the first title text is Ah, 24 size extra bull open sense form. So let's admit those below these texts or front family extra bobo. Okay, that in the phone directory text size 24 sp Text schooler, Toe white. Okay. And on the second subtitle text you were at the regular phone Open sense regular. Okay. And now we can add the text size and text scholar export will be white, but this time we're going to add the Alfa, which is actually opacity. So we're going to set capacity toe 50% text size is 15 sp. Okay, so let's offer here down below, so I will set out the 0.5, which is 50% capacity, okay? And now we can connect the all those constraints for our text to use. So the top constraint for our title will be connected to a parent, okay? And the left constraint in the right should be corrected. The apparent as well. So let's click this blue plus icon so it will be granted automatically to the nearest parent. And this subtext subtext the as well. So the left, the margin should be around 18. So let's connect. This left the clustering to our first text or title. So let's crying this left constrained to a less concerned off our title. Okay, I'm just hearing the little problems. But don't worry, we will make it. Okay, so when I move the title on the right side of the subtext will move as well as you can see those left margins now align with each other. And now Dr Strength will be corrected. Toe bottom string off our title. Okay, if you're hearing troubles just zooming by holding Gersh control and using your mouse wheel . So the top constrain, surely 16. Okay. And the now let's connect right constraint toe a parent. Of course, because we're going to hear any element from the right side that don't worry, and the now, um, I will split this Ah, into two parts because it's already 12 minutes and Ah, I think you will be more concentrated if you want to this video separately. So seeing the second part 11. Design Screen Two - Android Studio | Part 2: Hello, guys. And welcome back to the sixth video of the third chapter. So in the previous video, we have, ah, started designing the second screen in, ah, injury studio. And now we're going to continue. We're going to copy the rating bar from our first activity. So we don't have to add all those attributes by ourselves. We just copy here, and we're going to change. Of course, the I d and we're going to remove those constraints because we're going to add new constraints. We have a warning here telling the 20 day PR level 21 in the Northeast work. So where we have added the target ap I lollipop. And now we're going to move this rating bar just below this subtext. And let's connect this left constraint toe Ah ah, tow this left constraint off subtext, text view and top constrained toe a bottom constraint off our subtext. Okay. And, uh, now we're going to add those two numbers and let's ah, change this toe top constraint toe 22 and the of course ah rating bar I d will be changed as well. So a second rate bar okay. And, um, went weather text views. Now, Um, I think it would be better if we remove those toe text views. And we just copy those text views from the first activity as well. So select those two text boxes and copy them and paste them Just billowed our rating back. So of course, made to remove constraints because we're into a new new ones. And let's change, of course, the I d. We're going to put the those numbers here. Ah, with our rating bar. So let's connect those constraints like we did in the first activity. So this is left constraint will be five, and this left constraint will be 10. So top constrained, connected to the stop constraint and distant constraint toe a bottom constraint off our subtext. Okay. Ah, let's put it death. And we're went to change government to mollify this, uh, height a little bit later. So let's start the application. And, um, we forgot to add the on click listener. So basically, in our first activity, we need toe add the women need to set a quick listen for our card view for the first car view. So lets you scarred view dot set on click listener method new view without on click Listener. And we're going to add the simple intent here. So past two parameter is the first parameter is main activity, of course. And the second parameter is, ah, a second activity because we're going to never get to a second opportunity. And now let's run the application. So when you click on this card of you, it will open up the second activity. So we have ah, status bar visible here in the navigation bar on the bottom. So we're going toe Change that by copying this called from the first activity on this code will, we'll show our activity in the full screen. So just adhere this simple annotation. Okay? And now we don't think that we should have a full screen activity and it looks pretty much good, except those toe numbers besides, besides rating bar. So let's change that a little bit. Um, first, let me check if we shouldn't makes few modifications for our subtext here. Um, but no, I will leave this text a zit. Waas. So, uh, I will just undo what I just did. And the top constraint is around 16 maybe or 18. Okay. And now Let's change this. Stop constraint toe 14 or 16? Yeah. 16 will work. OK, now, now it looks away better. And, uh, let's put this, uh, elements down below. Okay? And, uh, let's run the up again. Okay? Okay. Ah, the one thing that is left wed is ah, up arrow And the text. More details. So we have already imported. Our resource is we will going to locate our up arrow. And we're going to add that in our image. You so center this, uh, pero vertically just below our rating bar. And, of course, we're going to change the i d toe second the arrow up or up arrow as you want. Okay, I wrote up. And, um, now, let's connect those constraints left and right toe apparent, and the top constraint will be connected. Tow rating bar. So just click those buttons here. It will connect automatically and the top constraints to, ah, bottom constraint off our rating bar. So let's move down the low a little bit toe. 40 top margin trip. They're on 40 for now, and we have added one more text for more details. So this more little's text is ah, 20 size 12 sides and Fontes Light open sand slight. So let's type. You're more details. Let's use light front. Let's change the text, Size and color toe. White text size will be 12. Ah, 12th sp. Okay, uh, constraints on the left and the right off course. And top constraints will be granted to our arrow. Uh, okay. We can check it out on our design to see ah margins. So margin from the arrow up toe aerating bodies 40. And from more details where O is Ah, around 10. So we need toe center, our text more. Ah, vertically. We can do that manually or by typing here the values. So let's move this text a limit on the left. Okay, it's been defined. Let's change the top margin for top constraint Toe 10. I think that will. Ah, that will be Ah, good. So, uh, let's hope in the application to see how it looks like. Okay, I think we should move. Ah, all those elements down a little bit, As you can see, um, this Samaritans text is ah, almost, uh well, uh, down to the parents. Okay, Let's type here 20 and she or 10. So now it's ah, select our our title. We're going to select our title and we're going to move all those elements and something like that. Okay, I think it loose pretty much the same as in our designing and obesity. Okay, we will make few modifications in the later videos, maybe with this apparel and something else. But for now, it will stay this way. So we need to add the on click listener for our back button as well. But before that, let's change the idea off our more details text. So just type more details. And ah, and now we toe wet on click listener. So it's type interview on the second Beth Arrow. We're going to find the idea off our image, Riel, which is, I think the same. Okay. And now we're going to set on click Listener, and basically, we're going toe Just close this current activity with the method finish just type finish and ah, let's open up the application to see how how it works. OK, America to second authority. And when I click back button, it will never get back toe the first activity. Okay, um, that was it for this for this for the second screen in the next video, We're going toe. Continue by creating animation for the second screen. It will be pretty amazing, You'll see. And that was it for now, See the next video. 12. Animation For Screen Two - Android Studio: Hello, guys. And welcome back to 1/7 video off the third chapter. So in previous videos, we have designed the second screen in Android studio, and now we're going to animate this second screen. Ah, and, uh, no. Let's, uh, check out our application, so we need toe rename some off hours elements here. Ah, here in a second activity layout. XML file. We're going to rename a few of those. So first those texts test text views for ah, for rating numbers, we'll say a rating number. Uh, maybe a second rating number second in front of this. Okay. And, uh, the second, the text You okay, let's change those course trained ideas as well. And this will be second rating number two. Okay. And, uh, let's check out. So in our second activity class, we're going toe import all those elements, and we're going to find the idea off each of those. So now an image of you, like a second a second. Aargh. Um, second arrow up. So now we're going toe import The text views. So a second title second subtitle. Uh, now we're goingto say second rating number and second rating number two because we're going to animate all those elements. Okay. Second rating number two. Yeah. And more details. Um, I think I will rename this text few more details to look similar to our previous text use. So, like this. Okay. And now it's important Rating bar, which is named Operating second Rating bar. Okay. And, um, now I'm going to find the idea off all of those variables pop off. So I think the ideas are the same as those variables. So second arrow up, uh, second title. Second subtitle. Next is second rating number on the second rating. Number two after that. Okay. And, uh, more details. And now, of course, the second rating bar as well. And now that we have imported all those ah elements, I would create the animation object. So we're going to use the three different animations one animation from left, when on a mission from right and one on emission of from bottom. We don't have ah animation from right, but we're going to create now in just a second. So we're going toe place all those animations down below. So we want to say, Okay, let's first create this in our animation directory. women to create new android resource file? No, its name it from right. And now we're going toe. Just copy the fork order from the left, An emission file and willing to just change one element one attribute. So from X delta, we will say 100% instead of minus 100%. And now it's, um Now we will add the our animations here. So from left, we were told animation from our any directory. So first, the parameter is our current activity, and the 2nd 1 is our file location. Okay, we will do that The same for our right, um, animation. So I think we should change the name the name off our right from right animation file to look the same as the rest of those files. So in order to rename our fire, we're going toe head over to our animation folder and right click on our right animation and click reflector and rename and we're going toe Just add any in front of those words Flickr effect Er and did you go? Whichever renamed our file and we're going toe from bottom ammunition as well. Okay. We dread any in front of that this would so any from bottom. Okay, And now we can start by loading animation in each off in you, trough our elements here. So, um, let's see how this should look like So let's start with the back arrow first. So, uh, let's at the comments here before we start. So this comment that will say load animations. Let's at this comment in the previous security in our first activity as well and down below . Let's add comment. Set animations. It will help you distinguish those lines of codes. So now hit over toe a second authority. And of course, we're going toe adhere one comment for a sedative set animation as well, and now it's set those animations. So first, as I said, apparently, was the back arrow. So a second back arrow we're going to is the method set animation as well. And let's say our Baquero should come from the left side. Next the title. So second title set animation our title should come from, I think, from the right side, Yes, from the right side. Second subtext well come as well from the right side. So next is a rating bar, So second rating bar second rating bar should come from the left. As you can see, we can order the other three and emissions now. Second rating bar set animation from left in those two numbers. Second rating number and second rating number two will come from the right side. Both of them. All right, so they they turn now. Okay, Second ready number set animation from right. And the second reading number two from Wright as well. Okay, so we need to set two more animations for up a row and more details, text view. Those two elements will come from the bottom. So set the animation from the bottom and, uh, more details from bottom as well. Okay, now, I think we could We could start that well up application and check out how are how our animation is doing. So let's start our emulator like it's open up the second activity. And there you go. It looks pretty amazing, right? So go back and click again. Again. Looks very small. And that was it for this current video. In the next, videos were going toe implement the last screen, the third screen in our injuries to the application. And of course, we're going to animate the third screen as well. CIA in the next video 13. Design Screen Three - Android Studio | Part 1: Hello, guys. And welcome to the eight video off the third chapter. So in the previous videos, we have created the 1st 2 screens and ah, it's animations and ah, in this one, we're going to start by implementing the third screen design in tow Android studio. So before we proceed next, I want to make a few minor changes. So I want to increase this size off our up arrow image and with I want to increase the down arrow size toe to as well. So I will now export this up. Pero is svg on the desktop. So I will replace the old one And now I'm going to go to our enjoy studio and I'm going to remove this up arrow, which is the old one. So just click, delete, click OK, do it anyway. And now we're going to import the same the same name are Pero it's a different version. It's ah apparel with size off to but with the same name. So we will not have trouble with the project. It will import itself usually on and the next thing we're going to create new activity, which is empty activity, of course, and we're going to name that activity at third activity. Okay, on, just click finish and wait until enjoy Studio finger shirt building this activity. Okay. And, uh, now, let's see. Um, I think Ah, we should add the on click listener for our second up arrow, so ah, well, create this conflict, listeners. So we can go to the third activity we just created. So is the perimeter type second activity that this in the third activity class, and now we're going to try. If that works, it should work. Fine. So Ah, when we click up arrow, it should lead us toe turn activity. So we're to start. Ah, our enjoyed emulator here. Okay, just a second. And now select our first last week s view, which is the street hotel, and click this apparel down below. And there you go. Well, we have a negative toe alternative it. Okay, so now we're going toe start by implementing the design. So next what we're going to do, we're going to export this heather background image. So let's group those two elements, this image and the overlay, and we're going to name that header background. So now it's hold autumn shift and dragged this on the right side. And export is S p and G And try this android click export. And we're going to get the six different folders for each screen size. And now we're toe Copy those folders into our project into our resource directory. So I'm going to do this manually again by going toe our enjoy studio project in Ah, my drive. So I'll just located easily because I am familiar with that with the that file tree. OK, and now we're going toe Add the imagery. You here. We're going to select that healer background we just imported to our project. Click OK, okay. Let it be like that. And now it's center this image connect the right left and top constraint. So let's, um, increased the size off our our image here a little bit. Okay, It's Ah, put that on the top. Ah, constraint. Ah, left right in top should be zero. It will emerge with the parent on top like that. Okay, now we can change the idea off our killer image. Toe shudder, background. Okay. And next what we can do? We are going toe import one more image view for Ah, back arrow and for down arrow as well. Okay, so now import Baquero. Okay, we're going to connect up and left constraints. And we're going to do that. The same is it is on our second screen. A top restaurant is 50 and left is 34. So we're going to do the same now Connect them Top left. All right, that's good. Just change the values here on the right side. 15. 34. Okay, we got that. And now we can export the down arrow image from Android studio from Ah, Adobe's disorder. Okay, Just let control E and women to export. This is SVG file as well, and we're going to report this SVG is a vector asset in our global director here. So click new vector assets and just select this down over here from the desktop name is ah , like death. Just like next and finish. And now we can import down arrow as well. So important New image. You select our down every we just imported okay and women to connect top and right constrained. This time the values should be the same. Top constraints should be around 50 and the right concern should be 34 as well. So let's, um, change those values here again. Okay, that's fine. And, um, now, the next thing we need to do, we're going to have the scroll of you and inside scroll view There are There will be all those elements, all those elements we will add next. So first, let's change the width and height for our scroll view so we can see that on the screen more easily. And we can drag that school view on the center now, and we're going to connect all those constraints. Otaku strength will be connected toe our shatter background, bottom left and right toe apparent. And when you connect all those constraints, you can, ah change the width and height to match constraint so size will spread to manage the parent . There's conceived. And now, inside a school of you, we have a linear layout, vertical orientation. So inside that leaner layout, willing to add the one next to you which will represent the title and the now we're going toe, continue implementing the, uh, our third screen. So, as you can see week ever or title here and down below, we feel rating bar in those numbers. As you can see, I have removed this bottom shadow because I think we don't need them that at the moment it looks cleaner like this. So that's another modification off our third screen design. Um, And just so you know, just below our text, which is titled, we will need to add Ah, okay, let's add the here. Talk man. Margin toe 24 dp and left. The margin toe 15 dp sewing toe margin Start as well, so we don't have any warnings. Okay? And now let's check it out. So it's pretty, It's pretty. The same is in our design, okay? And now we can ah, copy this title to our injuries studio. So let's ah changed the idea first toe 1/3 title and let's change the text as well. So we need to add escape character for our a percent just a MP and calling. And now we need to change text size and text collar in front as well. So text size will be 24 sp quality will be black, which is the color primary in our resource file in front will be extra bold. All right, now it looks fine. And now going toe implement rating bar in those two numbers. In order to implement those three items here in horizontal, we would need toe add the linear layout with the horizontal orientation this time. So we're going to do that by adding a horizontal linger way out. Just build this title like that. And now we're going to copy rating bar from our second activity because we don't need to write down by ourselves again. Just copy that coach here, and we're going to delete those constraints because we don't need them and women to change the i d to third rating bar. All right. And, um, next thing we're do, we're goingto change this. Stop margin toe, 16 dp lower than before. Okay, Now let's check out how it looks and those are fine. Okay? I think it would be better to weather this stop margin not from the rating bar, but instead from the linear way out horizontal orientation. So cut this line of code and pays that here on our linear way out. And now it looks way better. So let's copy those two numbers for rating bar as well. So just paste them bellow aerating bar inside a linear layer with the horizontal orientation. Remove those constraints because we don't need them. We have a linear way out this time and it's changed the idea of those two text as well. Toe turd rating number and 2nd 1 is Ah, tell Iterating number two. Okay. All right. So next we're going to, um see how it looks on the screen. We just need to remove this this one line of code and, uh okay, we don't see them on the screen because we can White background willing to change the color toe or core primary, which is a black war. OK, now, now it looks fine, but when we zoom in on those rating, borrowing numbers don't align with in the horizontal layout. So we need to add one more line of code in our A rating bar. So we went to where the layout gravity do our ah aerating bars here. So they are gravity will set toe vertical. Ah, for resentful center horizontal. Okay. Now let's ah, run our application to see how it looks like. Okay, let's never get to our third activity here. And it looks very nice. We just need to remove this navigation and status bar because they are visible. We just do that by copying this block of code from the previous activities and pays that inside on create method and let's run the up to see how it looks again. We're goingto this require Apia annotation here on top of the on Crete method. And let's ah, run the up again to check how it looks and I will split this. OK, now it looks way better. I will stop this with them now. And I was played this the implementation of the terrorist screening to two parts. So, uh, that would be it for this video. See in the next one. 14. Design Screen Three - Android Studio | Part 2: Hello, guys. And welcome to the 93 Deal or the third chapter. So in the previous video, we have started implementing design the third, the screen designing 200 studio. So now we're going to continue from the last time. And as you can see, we have implemented the together, uh, background image in title in the rating bar. So the next thing we need to do, we're going to continue. Okay. So as you can see, this is our competent tree. So does build this horizontal in your way out. We're going to have a text, and the text will be for ah, about So, uh, let's just first ad off margin maybe. And the looks strangely idee off this toe about and the text should be about as well. And now talk margin should be around 30 to repeat like it was in our design. Adobe is the okay, we're going to add a few more things. So when you click our about next we got 15 sighs board. So it's changed that as well. Let's change the text size 15. Uh, the 15 sp and text color to color, Primary and front will be Ah bold Okay. No, it now it looks fine. Eso uh, just the bill o r about text. We're going to add one more text view which will represent this text. So the talk margin from the our second text, you will be 10. But now let's copy this thing's text. And this time this text is a regular Fontes using regular front. So it's strange the idea toe about text and this text will be based pace of here. Okay, Now it said few more attributes like text schooler bowl, black text, size 15 s b and the front will be a regular this time. Open sense regular. Okay, on. And I'm going to add the top margin toe 10 dp. It's the same value is in our designs. So we need to set this second text your toe capacity 50%. So at the bottom, we're going to add the Alfa to 0.5. Okay. And now we're to check, and it looks pretty amazing. There is one more thing you need to do. Um, winning toe. Add the on our scroll view, willing to add the right margin, but we're going to do that in just a minute. Okay, so it's first copy this text down below and let's change the I d and the top margin toe 20 p. Did you consume the venue type text? Here's a 20 BP top margin. So let's change the idea in the text first. And, uh okay, when type It's ok. An hour in tow. Copy this second text, we're going to change the i d. In the text, Of course. So we're to say here a restaurant and here venue type when it's fixed. Okay. Now it looks fine. So we could start our application and check it out. How? It looks like Okay, let's get to screen. And his conceived the right. The right side is not that the same is in our design. So we need to have the right margin to our straw view. As you can see, right margin should align with the left margin, which is 15 the p, as I recall. So let's check out our scroll view here. Okay? There it is. So, uh, let's add the margin and in margin, right? So it can be compatible with both older and newer. Learns so fishing dp and yeah, Now it looks the way better. Okay, so, um, we need to add two more text views here where there's going to copy the last two and changed the some values here. Okay, We need to change text and ideas as well. So the 3rd 1 is type off you and to copy this text, so type off you as I ve and text here as well. Okay, now, the second text to you type of few text. And she were going to pay that. That sentence is okay. Let's open our application to check out now. It looks like in our emulator, I think it to look fine, just fine. So let's stroll down a little bit, and it's pretty much the same Is that we have designed in doping is the We just need toe one more button at the bottom. So, uh, we're going to do that now. Um, just let me check, Okay? We need to add first this blue color in our caller XML file. And, uh, because we haven't imported this scholar yet, we can't use that color so far. So let's first add a button here on the bottom in our linear layout or to kill orientation So let's change the i d in the text so I d will be road map button and, uh, text will be check road map. But the spaces between those two words will be three spaces and spaces between those characters will be one space like that. Okay, And now it's Let's open up our callers XML file. And let's copy this blue color from our project here. And let's create new item color here. So just like color name, name will be just simple is blue. Okay, we hear that. Let's close this file. We don't need it anymore. And in the global director, we're going to create new rubble resource while were to name that file custom button. So we're going to create custom button for our road map check roadmap button. So change this to shape, shape rectangle and women. 22 items here, the first item will be corners. We're going to set the corners radios to five dp like it is on our design and that we had solid color toe blow. Okay, connect this to blow color and that's it. We can now import this custom back into our button here. So, in order to import that. You just type of background and connect our custom maximal button file, I bet. And, um Okay, so the text size for our button is 16 Bold. So let's check it out. How that would look like I think we would need to increase the text size a little later. But let's tried out how how this works. So the text color will be white. Of course, front will be, um, bold mud. But we will change that to extra ball, maybe. Okay, um, let's stick it out. How it looks in our I enjoyed emulator. Okay, this will be just a rough version. Willing toe work a little bit more on that. And as you can see, our button height is a little lower. Sony to increase that and we need to add the top and bottom margins a swell. So in our design, we're going to move our button a little bit on the top. So the top margin should be around 30 and the left right and bottom Arjun should be around the 15 or 16 dp size. Okay, so 16. And that's perfect. So the next thing we do, we need also toe export this step size icon. But before that, that said the top margin to a 30 the GDP and way might need to wear the bottom margin as well. So we can have a blank space below button so it doesnt merge with the parent. So 16 BP as well. Oh, okay. And, um, now we're going toe. Go and check. Okay. Now let's change the height to 70 dp In our design, the button height is ah, 62. But never mind about that. The 70 will be just fine. You will see now. So open up our emulator again. It's ah, never get to a second toe 1/3 screen. And now let's check it out. And now it looks much better than before. And we still need to increase the size and off this button text and the increased the front . As you can see, it's not the same is in our designs. So we need to fix that. But don't worry. And now it's like this steps icon and changed the name toe steps. So click control e. And we're going to export this little icon toe svg file. And after that, we're going to import into our Androids studio. But now it's strange. The text size toe 18 the P and the Bold Extra Board fund. And now it's import. So new, wrecked, arrested on our global directory. And let's like this steps I can click next and finish. And now we're going to import it icon in our buttons. So just type your draw herbal. Right, OK, And select this steps icon. Okay, well, we can't warning you. Don't worry about it. We're going to fix it now. Let's Ah, check it out. How? How? Now our application looks like Okay, scroll down. And as you can see, our steps icon is ah, on the right side. Basically. So we need to move that on the left a little bit. So it's, um remove this warning by adding roble and as well so it could be compatible with both order and newer. Weren't so for android. Okay, And now we went with the petting betting left and right. We will set this betting toe 50 p. So petting rights now, 50 dp. And I think now it should look like in our design. So, uh, let's open our third activity and it's scroll down Okay, now, Now we got something. Now it looks pretty much the same as design. Serene were went to compare those two now. Okay, just so you know, there are a few minor changes in this design which needs to be fixed or changed. We're going to do that in the last video of this tractor which will be named the final touch official. To check that and watch until the end. And I will stop this video for now. And the next video were in tow. Enemy, the third screen. And that's it for now. Stay tuned and see the next video. 15. Animation For Screen Three - Android Studio: Hello, guys. And welcome back. This is a 10 3 d over the third chapter. So in this video, we're going to create animation for the third screen. In the previous videos, we have a design, their screen, and now I'm going to make minor modification to it. So I'm going to remove this back button because we don't actually need that for our for our application. So I forgot toe at the I d for our down arrow. So I'm going to do that and the okay. Now it's run the up just to see how it looks like with without let the big button. Okay, it was just fine. So we need to add the on click listener for our down arrow. So in our turn activity class, women toe, find the I d off our down arrow I can share. Okay. So in our own create method, we're going to find the idea so down arrow and we're going to add the on click listener, Of course. But first, let me at the your, uh when our scroll of you in our third activity layout going toe the i d. We forgot to do that. So its name is the third squirrel view. And let's copy this name toe or to relativity because we're going to animate the list down arrow in the whole school view. Okay, let's find the idea off the school view as well. So third scroll view. Okay. And the, uh it's trick out now, So, uh, we're going to let animations Let's add on click Listener for our down era, Which will I leave this back toe? Second activity O J Just second down below type started activity. And we're going to add the two parameters in our intent the first parameter Easter relativity from which we are coming and the the second perimeter will be a second activity class. Okay, so it's open our application and, uh, to see if this conflict listener works. It should work. So okay, when I click this down arrow, it should lead us back to the second activity. Okay, Perfect. So this tutorial we're going to add the new kind of animation here it will be shared element animation. But before we do that, we're going to have the the regular animation we did. We did for the last four screens. So we're going to add the just from the bottom animation. And let's load this animation from our from our resource directory. Okay? And we can add set an emission for for down arrow And for 1/3 school You okay? I think we have misspelled the third school view here. So let's change. Let's change that. Que the scope and pace that here our case on our set animation toe from bottom. And now let's check it out How it looks like O. K so a lot of second activity and then relativity. So you see how our scroll view with its elements inside is coming from the bottom slowly and fading in. Let's try again on Okay, we will remove this scroll view bar you see on the right side. When the third activities showing we went to do that in the final touch radio. Don't worry. Uh, okay, so I think we should create start creating shared element the transition animation. So goto a second activity layout and in the root layout element, which is constraint, layout toe a second activity. We're going to let the one more line of coal, which is transition name. This transition name will be the same for Ah, this background image, which is in the constantly out And, uh, this name should should be the same as well as in the third activity shattering much. So we're going to copy these two lines of code inside the third activity layout file and inside the shudder background image of you. So those toe background image and sheltered background should the contained this same exactly the same transition name. So inside the our second activity, we've been to adhere activity options. So TVT options don't make scene transitions animation, And the first parameter is this activity current, which is second activity, and the second parameter is pairs. So first, let's add annotation here and let's create a pair. So let's at this 1st 1 So bear pairs equals two new pair, and in the brackets will type one because we just need one pair and down below. We're going to say pairs zero, because the index number is starting from zero. We're going to select the first Titan. So pair number one or zero, which is the first item, equals two new player. And here this type of you and string. So in the records now we're going to use the second Sorry. Second, the up arrow arrow up and the okay, lets copy the transition name. It needs to be the same. So it said this is the second parameter this transition name. Okay. And now that we have added that inside the start activity method, we're going to add one more parameter, which is options to bundle method. And let's copy this four code into our third activity class into our down arrow on click listener. So just we just went to train this toe down arrow and the second activity toe productivity . Of course, it's a remove. The several, by adding a notation, require appear annotation and here in start activity method, willing to say options to battle as well. So now we're going to open this activity and you'll see when we press this apparel, you'll see an animation. And when you press down arrow, you see that animation so basically wouldn't press up. Arrow. This beggar. This heather background image is slowly coming from the bottom. Okay? And when you press down arrow, this header background image is slowly transforming toe background on the second activity. So let's try again. So you can see it better. Okay, this is pretty, pretty useful animation. It's called the shared element Transition Animation. Okay, and as you can see this, a screw about bar is viewable. But we're going to change that so we don't click the back button it strangely levers back to third activity, which is very strange. So let's we need to fix that on Goto Third Activity And here, just below this start activity was finished. Method to close this activity. Current activity, which is the third activity. So let's try again. It's open up. Second tier easy. Let's open up the third. So let's get back toe second. And, uh, when we click big button, it will lead us back to the second activity. As you can see, it's it's strange. So let's remove this Finnish metal from the relativity, and there were goingto use that finish method in the second activity. But inside the inside the second back arrow. So let's remove that as well, and we want to create the simple intent we want. He was a Finnish method here, so that's great intent. So from the second Activity toe, the first, which is main activity and let's start the security. So now when we press the back button, we're going to start the first, the first stream with its animations. So let's check it out. Let's first go to the second screen. Now let's go to the third now from the third to the second, and with my click bank button, we're going to come back to the first screen. A swell with those animations, so that's pretty much it. For this video. I will make one more video, which will be named Final Touch, and in that video I'm going to make a few minor changes like That's Crowbar, uh, on the right side, off our scroll view and some other changes that will be all for this, according video and in the next one. 16. Final Touch: Hello, guys. And welcome back to the final video off this course, this video we're going to make to minor changes to our application. So first, let's start our application. As you can see, we can see that scroll bar on the right side. So we want that scroll bar to be removed and the that same scroll bar we kept already in the tourist screen as well. As you can see, it's visible and it's kind of overlapping with our button here. So we want to remove that and we want toe increase our from bottom animation here. So open up this file and instead off 100%. Why don't we will set 500 Delta. So let's run our application. See how our bottom on image looks like. So it's Ah, it's a little better if you can see if you can spot the difference. And now it's ah, a little bit better, I think. Okay. And now we're going toe Remove a scroll bars, so go here toe third activity layout and inside strove you were going toe had the one attribute. Scroll bars will set the tone on and in first or main activity layout we're going to do that. The same. So in the school of you, we're going to add the scroll bars attribute to non and now it's run our application again . Toe, check it out. Okay. As you can see, that scroll bar from the right side disappeared. We don't see that anymore. And now it looks away better now it's ah, the exact design from our adobe X'd product. So that would be for the scores. I hope you enjoyed my course. And I hope you learned a lot off things. So with implementing this project from Adobe's it Toe Android studio, please, if you like my course pleaser, leave a positive feedback and write my course. If you have any suggestions, please a send me a message and I will I will look into that because I worked a lot. I have invested the much of my time into this course toe design plan, uh, record all of those videos. So it means a lot to me if you leave a positive feedback on this. Good luck. And congratulations for passing this and watching the scores completely