‫We are going to create this amazing application furniture Application.
‫Hello guys and welcome to Master Coding Channel on the complete Android Developer course.
‫In this video we are going to walk through material design and cardviews and inserting some special
‫things into our application.
‫So feel free to download all XD files and the source codes are available on our Udemy course.
‫The free coupons are in the link below and the files are on the description in Udemy courses.
‫So let's begin.
‫Take your coffee, subscribe and like hit five stars on Udemy and let's begin.
‫First of all, create an empty project and these are the files used so you can download XD Adobe XD
‫from Google and purchase it and you can open these type of folders.
‫It's very amazing and we personally use it for our application designs and prototyping.
‫I will now export the PNGs here, the bar and the and the backgrounds and the icons, some images.
‫So I will export it to to our desktop.
‫And later on I will add them to the drawable folder.
‫Here.
‫Here we go.
‫I have created this.
‫And remember, guys, just one trick.
‫That Android studio does not support the the naming of images.
‫And there is a spaces between them.
‫So I will refactor them, renaming them to anything.
‫Just ensuring that there is no space in the name of the file.
‫So.
‫Till now.
‫We are going to design the layout for our application and inserting the needed drawables inside our
‫application.
‫So I remove this text view.
‫I added an image view and ensure the constraints are.
‫And their places.
‫So I ensured that the constraints are working fine.
‫Okay.
‫And adding another PNG.
‫I later on I will change it to a button.
‫So.
‫I will add the constraint here.
‫Sometimes Android studio did not take the correct action or did not understand what you need about constraints.
‫So there is some lag.
‫Maybe in this video I will re using and making the step more than one time to ensure that it it understand
‫and work fine so.
‫This is our bar.
‫I will take the fill.
‫Copy.
‫And.
‫I will take the the background x.
‫Number.
‫And here we go.
‫It is implemented correctly.
‫Now.
‫Back to Android studio.
‫I will create.
‫I will create another image view and I will make it like this.
‫Okay.
‫Here there is some margin inside the image as it as I saved it, so I will edit it later on in this
‫video using Photoshop.
‫I will remove the margins, I will crop it correctly and then I will put it again.
‫So.
‫Remember guys, you can download the PSD files from the Udemy course in the description below.
‫So and if you are on YouTube.
‫So the, the files are on the description and they are these links are available only on the Udemy course.
‫So you download the source code and the PSD files.
‫So make sure you enroll inside, enroll in our Udemy course.
‫So I will implement and add the recycler view and card view libraries as we have shown below in previous
‫seconds, and I will add a constraint layout for later use.
‫Okay, maybe we will remove it now because this is a complex UI, so make sure you make it a professional
‫way.
‫So guys, remember, as I told you in the previous videos, UI is very important.
‫So if you are making a professional app without a UI, a good UI or friendly UI, so you are wasting
‫your time, UI and the user interface, it's very important for the user to be attracted to your application.
‫Okay.
‫I'll drag and drop in a button.
‫I removed the text and make its background like this and I will remove this image view and will make
‫it and you will for later use.
‫We can use it for nav draw or for setting page or activity.
‫So intentionally use this back this button to ensure that you have a functionality and adding the click
‫events and the click handling click events for this application.
‫And.
‫This is our application now.
‫Till now.
‫We are doing fine.
‫Let's add the card views for our application.
‫I will separate.
‫Add the cards into two two parts.
‫The primary cards or the main cards are the above at the bottom.
‫At the top.
‫And the secondary buttons are on the bottom of this file.
‫Okay, guys.
‫So.
‫Here we are adding.
‫These files.
‫I will rename it as primary.
‫And.
‫Add them into the main activity.
‫Step number one is designing the layout that we have done, partially like about 70%, because there
‫are many layouts later on in this video we are going to create and the step two card view design primary
‫key primary cards.
‫Okay, so the widgets of widgets and variables for this file on the main activity is pasted here.
‫So we have recycler view, recycler adapter and recycler view manager and the array list.
‫Now I will create a new class called Data Model.
‫This class will create or store the variable that we are using.
‫We have two strings, name and version and end, which is ID and image.
‫Now.
‫I will create a constructor using the this for these four variables and a getters and setters.
‫Okay.
‫And here we have done them.
‫And Oncreate method.
‫I will create the main cards.
‫I will create a method called initiate main cards.
‫This this method will contain the code that will declare and instantiate and add the data needed for
‫these cards.
‫So.
‫Uh, this message for Cardview primary card.
‫Primary chords and here I have pasted recycler has a fixed size and the linear layout manager and recyclerview
‫is set for this.
‫So as I told you, I have instantiated it.
‫I have created layout manager and make it horizontal and recyclerview set at layout and set item animator
‫as we see in this code.
‫Now getting data from my data class.
‫Data equals new ArrayList that we have created before and now I will create a new class called May My
‫Data.
‫My data will contain four arrays named array version, array, ID and string.
‫Now and static string called a drawable array.
‫So first of all, we have created a static string named array.
‫This arrays are responsible for the text view, the title, the price, the image and the ID of the
‫card.
‫So later on in this video, we will see how it's important to make this step because it's a it will
‫like facilitate and make it easy to edit the text, the prices, the images, images later on on.
‫Oh, for making complex application, not for simple application.
‫It is likely good, but for complex application it will be very useful to make a standalone class that
‫responsible for your data and passing the data inside the cardviews and in a professional way that I
‫will show you in this way.
‫So.
‫And last one drawable array or dot drawable dot.
‫And I will put here the images that I will go to download them from the XD file.
‫Let's add some drawables images.
‫I will go to the XD file.
‫Remember guys for later videos and all videos, all PSD files and all source codes are available on
‫Udemy a course on Udemy description.
‫And for our courses.
‫So enroll in our course and get all these stuff free without paying anything.
‫Thank you guys.
‫And let's move again to the static and drawables and add the drawables in like three Drawables because
‫we have created three members.
‫Remember, guys, just check the description on our course.
‫So just check the description on our course.
‫The complete Android app developer course on Udemy.
‫The description in the the the comments or the offer in the description below on on YouTube.
‫And if you are on Udemy just download them on the description below on four zip file and extract it.
‫So you get all these source codes and the XD files.
‫Remember guys that Drawables are returning as an int type.
‫So adapter equal new custom adapter data and this passing it for the constructor of custom adapter and
‫Recyclerview dot set adapter.
‫Now let's create a or add the adapter custom adapter that will be created.
‫Now click on it.
‫Create a class called Custom Adapter.
‫Remove this constructor.
‫I remove it now.
‫I will extend the custom adapter Recyclerview adapter and I will pass it as it's a generalized.
‫Variables custom adapter dot my viewholder will later on create my my viewholder.
‫Now the variables are array lists and context.
‫I will create a constructor passing these parameters.
‫So remember God and I will implement these methods.
‫The on bind Viewholder on create Viewholder and get item count.
‫If you want to learn about these methods and how to use the adapters, go back to our courses and our
‫playlist and you count can see that they are making that they are lectured in a very professional way
‫and detailed way.
‫I will create this class called my Viewholder and the implement the methods on click I have till now.
‫I will I will comment the item click listener later on, save it for later use and I will not add the
‫functionality for item click and add till now.
‫Let's concentrate on making the card view working fine.
‫So, guys, if you want, as I told you, go back to the course.
‫If you want to learn more about the card views, more about view holders, adapters or anything, not
‫not clear.
‫For you.
‫Okay.
‫I am ensuring that they extend these.
‫Things.
‫Removing this error.
‫And my class, my viewholder is done.
‫I'm copying and pasting some codes to ensure that you save some time.
‫You can pause the video any time and you can copy it or you can download the source code from the course
‫description.
‫So I will create a view called called the view and passing the item underscore card view that a layout
‫that we will create it now and viewholder equals new my new folder, new holder and passing the view
‫and I will return the my view holder.
‫I will remove the return null.
‫And.
‫Add it for this, I will create an item card view.
‫And here we go.
‫The card item.
‫Card, view.
‫Is a.
‫Like having the linear layout and we will copy and paste.
‫We will add here the cart view.
‫And the image views.
‫I will close the comments and making a new linear layout, having horizontal and weighed some 100 constraints.
‫Parent parent at the end and the start of the parent.
‫And I will add here.
‫Cut to The view.
‫In this way we have done adding the cart view.
‫Android x Cardview.
‫Widget Cardview.
‫And inside the cardview I will create the image view.
‫And the text views.
‫Okay.
‫Adding here.
‫The layout.
‫For text views.
‫Okay.
‫Android x constraintlayout.
‫Widget Constraintlayout.
‫And I will copy and paste the.
‫The text view like this.
‫You can pause the video and copy them.
‫Or you can get the source code from the item description below and a new arrival like a like for a differentiating
‫it.
‫And I will paste another text view.
‫And I will close the tags for the linear layout and the constraint layout here till now is the card
‫view.
‫The item card view layout is done.
‫And the.
‫Here we go.
‫I will change some.
‫Some characteristics for the item card view.
‫I will rename it Image View.
‫Don't miss guys to rate us five stars on Demi.
‫So you push us making new tutorials.
‫And subscribe to our YouTube channel to get the source codes for free tutorials, free coupons, free
‫lessons and we are expanding our coding lessons and making new lessons for for many languages and many
‫courses.
‫So make sure you get them all by subscribing and liking our videos.
‫Now I will add the data for Image View, adding the glide library.
‫You can see a standalone and like a video about glide library.
‫So go back to the course and the complete Android developer course and you will get them a video tutorial
‫about Glide and how to use it.
‫In this way I will use the glide with load apply and into.
‫These are the four steps.
‫Four steps that I remember.
‫This is the card of use.
‫They need some.
‫Some, like, the like adjustment of the layout.
‫I will create a new layout.
‫Sorry.
‫I will edit the layout.
‫A height and width.
‫The P.
‫And 202.
‫Deep.
‫And it has changed.
‫The constraint laid out the inner constraint layout.
‫I need the parent, the master or the the.
‫The boss.
‫Yes, you can say it as a boss because there is a nested.
‫It's apparently out that we have created.
‫And here we go.
‫Three, four, six for the width and 2 or 2 for the height.
‫And here we go.
‫But there is one problem that the image view is set as a background for the card view, I will adjust
‫it and make it some.
‫Some fixed sizes.
‫And here we go.
‫I will change it for 80, maybe 80 times.
‫80 is good.
‫Okay.
‫I've changed it.
‫120, 120.
‫Let's.
‫Let's try 120.
‫And here we go, adding the constraints and make it a matchparent match constraints.
‫And here I will put two.
‫Let's run.
‫See the app.
‫Okay, good.
‫Good.
‫But there is a maybe.
‫I drag it here.
‫Maybe the error from the image.
‫I would put here.
‫In the drawable and replace it.
‫I called it for a few hours for.
‫Change it.
‫Run.
‫And see.
‫Okay, good.
‫Maybe it will look better.
‫Okay.
‫It is good.
‫And wrapping that, the text, changing the background sorry the color for them and make it.
‫I will copy the blue line.
‫Okay.
‫It's changing.
‫The blue color is good, but it is changing.
‫Okay.
‫005D.
‫F.
‫F f.
‫I will.
‫I will write it because it's changing here.
‫00FD5D.
‫F f.
‫It's changing.
‫Okay, I'll add the hash.
‫Symbol and I will make it as sans serif black.
‫Condensed.
‫Okay.
‫You can add the fonts.
‫Remember, guys, if you want to add the fonts for your project, you can see the tutorials about the
‫typography, so you can check them in the course.
‫And going back.
‫Let's see how to change the text.
‫Okay.
‫For black, it's good.
‫The black and the blue is giving us a good contrast and good look.
‫Okay.
‫Amazing guys.
‫I will.
‫I will let you watching the same way the the the same process for making the secondary cards so I will
‫be silent.
‫I will put some music and you will listen for it making and repeating the step for making the secondary
‫secondary cards.
‫And I will add some codes also the same as we have seen in the previous step for adding the main codes
‫for I will add also the bottom and the bar at the the bar at the bottom and adding some buttons for
‫it.
‫For that I will let you listen for some music and.
‫See you.
‫And at the last of the video.
‫See.
‫Do.
‫See.
‫We?
‫See.
‫She.
‫And welcome again, guys.
‫We have making a professional application and a very good application.
‫It is a friendly use and a friendly user interface and I hope you subscribe to our YouTube channel to
‫push us forward and comment below if you have any questions and if you want to say thanks for us and
‫like and subscribe, you push us forward.
‫Making new tutorials on Udemy.
‫Please rate us five stars so you get a free coupons for our next tutorials and other courses.
‫And remember guys, we are.
‫We love you.
‫We love making content for you.
‫So love us, push us and make us motivated for making new tutorials just by liking, subscribing and
‫commenting below.
‫Thank you guys.
‫See you in next videos.