‫Hello my friends, and welcome to the complete Android Developer course.
‫This video we are going to learn how to create the user interface for the fashion application exactly
‫like this application and add the item.
‫Click listeners for this application and the recycler view.
‫So let's start, get your coffee and let's begin.
‫First of all, create an empty project in Android studio and remove the text here.
‫And let's start by, by the e-commerce application file.
‫I've opened it in XD and I want to design this dashboard.
‫So first of all I will drag and drop the text.
‫And.
‫See the the size of this text.
‫It's 40.
‫I remove the 14 and add the 40.
‫SP add the constraint for this text view.
‫And I will add an image view exactly like the Capone image.
‫So.
‫But first of all, I will change the text.
‫Okay and change the font family for and let's see.
‫Which is like attractive, more attractive.
‫I think it is serif.
‫Okay sensor and you can add fonts whatever you want.
‫I've learned you how to create the fonts in later in previous videos, so go back to the course and
‫learn how to create and add the custom fonts in Android.
‫So I added the button.
‫And removed it.
‫Removed the text.
‫Okay.
‫And I will go to the exit and save the selected.
‫You can export it by control and E, so I'll go to drawable and paste it after copying it from the my
‫PC and renaming it to the small letters.
‫Remember guys Android studio has would be only accepting small letters in drawables.
‫So there is a margin and my image I will go and edit it and add a new coupon to PNG which is cropped.
‫I remove this and add it like coupon number two.
‫So which is good.
‫So going to the styles and add no action bar.
‫I removed the action bar.
‫And now let's move and add the recycler view dependencies.
‫And maybe if we want, you can add the recycler, the card views.
‫I will add it for for Sperry, for for the purpose of adding and card views in later later on on next
‫videos.
‫So I will add it but till now you can add only recycler view.
‫I have adding here, I'm adding here the constraint for the recycler view.
‫In the main activity.
‫Okay.
‫And.
‫We are good.
‫Adding the idea of the recycler view for recycler view.
‫Okay.
‫Remember guys, if you want these files XD files you can download in the them from resources in the
‫Udemy course below and also the source code is available in our Udemy course, so you are welcome guys.
‫Now.
‫Uh, let's go to the main activity.
‫And add the widgets and the variables for for our layout.
‫Private recycler view.
‫And I will name it as staggered RV.
‫And the private recycler view adapter.
‫I called it adapter and I will create it later on next couple of minutes.
‫And private layout manager I will call manager.
‫I think I need to change it to a grid layout manager but staggered the grid layout manager.
‫I will change it later on, but till now I need to create a new class called Recycler View Adapter.
‫In this, this class will act as an adapter.
‫So if you want to learn about adapters more deeply, please go back to the section of advanced views
‫and you will get more lecture about it.
‫I will extend the recycler view adapter or recycler view View adapter dot Image holder.
‫I will create an image view holder class inside this class.
‫So later in next two minutes now.
‫Let's create a new context.
‫Well.
‫And the list of you and list sorry of row now and I will create a new class called Ro.
‫This row will act as a modal class.
‫Also, guys, if you want to learn about modal classes, please go back to the Advanced Views section
‫and you will learn deeply about modal class and why we use them.
‫Till now.
‫I maybe need to create three variables image the title and the description.
‫But I'm creating the constructor now and creating an empty constructor.
‫And I will add gutters.
‫Without setters, because setters, we don't need them.
‫We are only getting the images and the data from it.
‫So we have three variables.
‫Title, image and description.
‫We can remove them.
‫I think we are going to remove one of them of the description because the XD file did not contain XD
‫contain description, but in the same way we can add descriptions now I will create an image viewholder
‫class.
‫Oops, I remove this.
‫Okay.
‫I removed all all what I have typed here and I will create a new class called.
‫Let's create an image.
‫Viewholder.
‫Class.
‫Public.
‫Class Image Viewholder.
‫And extending recycler view dot image view a view holder implements view onClick listener.
‫So I will add also a click listener for the cards or the recycler view that we are going to implement
‫now.
‫Also implementing the on click and public image.
‫Viewholder.
‫A method that is sorry.
‫It's a constructor that we need to initialize our views inside it.
‫First of all, I will create an image view called image, a text view called title and a card view called
‫Card.
‫But I will remove them, remove the card view later on in this video because we don't need a card view.
‫We are working with recycler view in this tutorial.
‫Now I will create a new layout recycler view item.
‫It will work as a template for our recycler view item.
‫These are the sizes.
‫And I will put an image.
‫And a text.
‫Inside this constraint layout.
‫So we usually use and we prefer and recommend using XD.
‫Adobe XD.
‫It's very professional and will help us in designing our applications.
‫So if you want these files, as I told you, these are available for in the resources and you can download
‫them from the Udemy course.
‫Our Udemy course.
‫The totally free and also the source code of Android studio are available on the Udemy course.
‫As I told you, image, view and a text view are added in our constraint layout and seeing I'm seeing
‫the the size of the text view.
‫It's 16.
‫Okay.
‫And changing the font.
‫Look.
‫There are many fonts.
‫I will select one of medium sensor.
‫Okay.
‫Now let's initialize the views.
‫Inside our image view holder.
‫Okay image equal item view dot find view by ID or id dot image view.
‫And the same way the title.
‫Okay.
‫I have removed.
‫The description.
‫And now I will add the click listener item view dot set on click listener this and here on the on click
‫add the handling the click events for the items of recycler view or the cards.
‫Uh, let's make like a test.
‫If the get layout position equal equal to one, which is the first position, a toast message will be
‫formed saying, Hey, you clicked the first item, and this way I add the functionality and test the
‫functionality of our recycler view item.
‫Click listeners now.
‫After finishing the image Viewholder class, I implement the methods of our class.
‫Sorry, our implementing the class, the methods of our interface and I will add the inside the image
‫viewholder.
‫I create a view view layout inflator from context and inflate the recyclerview item that we have created
‫before.
‫Okay.
‫Passing parent and attach to route making it to false and returning a new image for Holder.
‫Passing a view instance now.
‫Combined view holder using the glide library, I will implement the glide library and the gradle.
‫I add them.
‫Implementation.
‫And these are the implementation of Glide Library.
‫You can go back to our course and see a glide library library in detailed lessons glide with my context
‫and load and data dot get I and dot get image and into holder dot image.
‫I will change the I.
‫Or I change the position to I.
‫I will add also the binding text to view in the same way.
‫Holder the title.
‫Set text and data dot get I.
‫And get title.
‫Okay.
‫One thing and data size returning for get image.
‫Till now.
‫I have finished the adapter and the row.
‫And let's add the last thing.
‫Last codes inside our main activity.
‫I'll close them.
‫And I will add images for cards.
‫This is an int array called covers.
‫I will create a new int array and I will pass the drawables here.
‫Now.
‫I will add some drawables from XD.
‫As I told you.
‫Sorry, guys, I'm sick.
‫But.
‫But nothing will stop me producing videos for you because you deserve it.
‫Thank you, guys.
‫Thank you for your honest thank you for people supporting us.
‫Thanking us for five stars on Udemy will push us forward making new videos and the subscribing to our
‫YouTube channel Master Coding will also pushing us and liking will be very motivating for for making
‫new videos.
‫All Drawables and XD files are available in the description below, so also the source code of the Android
‫studio now.
‫Are adorable fish, one fish, two fish, three and four and five, six.
‫These are the chords images that I have exported from the XD.
‫Adobe XD.
‫Okay.
‫Now let's go to the Oncreate method.
‫Here I am initializing the staggered recycler view.
‫Find a view by ID recycler view.
‫Step number two is getting the data.
‫At least equal new array list.
‫And step number three will be creating adapter.
‫Adapter Equal New.
‫Adapter.
‫Recycler View.
‫I called it recycler view adapter.
‫Okay.
‫I will create a recycler view adapter and I will pass here.
‫There and context are this and app list manager equal new and I will change the layout manager from
‫layout manager to stagger the grid layout manager.
‫Now and.
‫Now.
‫Changing staggered grid layout.
‫Manager.
‫And adding the list.
‫Years and a staggered grid layout manager span count will be two and staggered grid layout manager dot
‫vertical.
‫Okay, said the layout manager to staggered reset, layout manager to manager.
‫And step number five will be the setting and adapter adapter.
‫Or staggered reset adapter to adapter.
‫Step number six will be.
‫Inserting data initialized data into recycler view.
‫This will mean this is a new method.
‫I will create it and this method will add.
‫It will contain a row, will make a new instance of a row called a and equal to new row and passing
‫the covers and the covers, which is an drawable or an image and the title.
‫So this row will have to the image and the title because in the file I have the only image and title
‫I need to remove the description because there is no description.
‫If you want, you can add description.
‫But till now I will like stick to the adult XD file also in the same way.
‫Row row sorry, a equal new row covers.
‫Neroca passing the cover, number one.
‫And the boyfriend t title at dot A and this way we add items into recycler view.
‫I also need to create six six items.
‫You can add more whatever you want, but till this moment I am sticking to the XD file.
‫Cupping also at.
‫And pasting changing number three, four and five.
‫Okay.
‫And changing the text to shirt sleeve and shirt sleeve sleeve.
‫W e.
‫Okay.
‫Till now.
‫I need to add adapter.
‫Notify data set changed.
‫Don't miss.
‫It's very important.
‫And let's see if we.
‫If you are using fragments, you need to inflate the inflate the layout for this fragment and return
‫the view.
‫But because we are not using the fragments, I'm adding this and you can run the the application and
‫see if there is an error.
‫Okay.
‫And here we go.
‫Very good, guys.
‫Now, now, let's add the.
‫Our last touches.
‫Final touches.
‫I will add and change the constraint and the width and the the margins to make it like equally and making
‫it very looking very good.
‫So guys, I hope you to you rate us five stars on Udemy pushing us forward you will gain free coupons
‫free coupons for our next videos and on YouTube subscribe to our YouTube channel.
‫Your subscription will give us a motivation and for making new and new videos and new courses and new
‫tutorials.
‫So guys, I hope you support us.
‫Motivate us by liking subscribing Rating US five stars.
‫Don't miss the download our master coding application, which is a free application on a play store.
‫We we have helped more than 1 million people learning Android and coding.
‫So don't miss and you you get a free copy of it freely.
‫Now this is our application we have finishing adding the black color and here we go.
‫Thank you guys.
‫I hope.
‫See you in next videos.