Kotlin YouTube: Intro to RecyclerView (Ep 1)

hey what's going on everyone and welcome back to the channel I really hope you guys are doing well today and welcome to the first lesson in a brand new series for this channel where we're gonna be working on how to build out the YouTube application for the android platform using the collin programming language and so inside of this series we're gonna be focusing on how to build out some the core components to a fully functional android application now here's what the application kind of looks like and right off the bat you can kind of tell that there's quite a bit going on here so in order for us to fully understand how to build out these Android apps piece-by-piece let's first focus our attention on working on the most common component inside of a mobile app which is how to build out a vertical ListView and so the traditional approach to building out a list for Android it's actually use something called a list view but this component has been kind of deprecated and it's kind of outdated so for today's lesson we're going to learn how to use the new and improved component called a recycler view to build out our list okay so I hope you're ready to start out today's lesson let's go ahead and begin by opening up Android studio and creating our project right now alright so let's get started today by creating a brand new project inside of Android studio and I'm going to use file new and then new project up at the very top on the left corner which then takes me into this create new project wizard and for the application name why don't we just call it something sensible like Kotlin YouTube LBT a give it a company domain and store it into somewhere on your computer obviously and they hit the next and make sure to keep this checkbox checks a phone and tablet I'm going to use API 15 which is Android 4:03 and just hit the next again and now you can kind of select the activity that you want your project to start off with so there's a lot of different options to choose from and I'm just going to use empty activity because it's the easiest activity to work with if you're not familiar with Android so double click on that and just leave the defaults here for a main activity generate layout file I mean and also backwards-compatibility checked like so and now you can hit the finish and then Android studio is going to help you create this nice little project which kind of looks like this inside of the Android studio editor so really good stuff and now what we really want to do is to kind of check out what this project does by hitting the Run button on the very top right and as you can kind of see I have a couple of devices or virtual devices that I can pick from and this guy on the right side is actually this nexus 5 API 26 and if you don't have any options available here you can create a new virtual device with this little wizard guy and go through all those steps and if you do all of that you should have something selectable inside of this little menu so I'm going to launch my application by double clicking on the Nexus emulator and that's going to load my entire app inside of this little screen on the right side and right out the bat you'll be able to see this very very basic template hello world project which is very very simple and now what I want to do is to show you exactly where these files are inside of your project so your template project comes with main activity ket which is a common class file I believe and also this activity main layout file which has this hello world component centered in the middle and so on the left side is your project Explorer now I used to use the project mode but I'm getting more and more familiar with the Android mode which I am liking more and more so let's use Android view mode to browse our files and main activity is inside this project package which is what it's called and down below inside of res you have a layout and you also have activity main.xml so these are the locations for where your files exist so make sure you are familiar with that I did make a video a long time ago on getting started with Android studio so I'm gonna link that down below so if you want to get more familiar with Android make sure to check that out and let's go ahead and move on to you what we want to do for today's video and basically you can click on these components over here and you can just hit delete or backspace and run your application again with this instant run lightning button so click on that and the emulator is actually pretty quick to reload minor changes so this actually saves you a lot of time all right now the first thing or the first task for today's video is to learn how to create a list using a recycler review component and it's kind of complicated but we're going to get through it today and that list is going to eventually be transformed into this component that you're seeing and as you can kind of tell right off the bat here it's a little bit complicated there's a lot going on so instead of building out something as complicated as that let's start off by constructing a list which is much simpler it just has a couple of items inside of this and vertical axes and all of these cells here just have a couple of image views as well as text views or labels you can think of them so we're gonna do that first and the way you start off with a recycler review or a ListView is actually just drag it into your view somehow so this is our main view which is a constraint in layout and so to get to a recycler view inside of the list of components here you can hit the little magnifying glass and just search for our ease seat and you'll come across the recycler view they're pretty simple you can also search for things like image views like that or even the list view component which is over there so let's use our ec4 recycler view and i'm going to drag this inside of my constraint layout and you will see that we are actually doing quite a bit here and you see down here we have a great old process running and the moment that you actually drag a recycler view inside of your project it actually helps you do a little bit of matte so instead of those great old scripts drop down you have this module app build a cradle file and it actually helped you import the Android recyclerview support library so just wanted to make sure you are aware of that and now let's go back to our activity main layout file so here is our recycler view yeah this little error right here which says that the view isn't constrained to anything so if you drag this guy down here you can move it so if you want to constrain it to the parent you just do that you do that as well hopefully that works so let me just drag this to the right and then drag this to the left and hopefully that works hopefully that is there so when these little blue dots are filled in that means that you have some constraints apply it to your view so that's pretty good if you click on this now you should have a couple of you constraints showing up as eight eight eight and eight for the padding okay the last thing I want to do here is actually give this recycler view an ID up at the very top right and let's follow a common convention of calling it recycler view and just say underscore main and now what I want to do is to access this recycler view somehow and so if you hit the instant Run button again you should be able to launch your application with this recycler view instead of the hello world text in the middle so good stuff the text is gone and now we can go into your main activity and I can try to access this recycler view say let's say re C and you see a recycler view and his score main is available for me to kind of play around with and what is the exact thing I want to do here is this a set background color just to see what I can do and I think I can say colored dot blue and that's what I want to do for now did the instant run it's going to change our ListView to have this blueish background down so something is wrong with the constraints I believe and let's see if I can get this over there and I believe the layout width and height is incorrect so let me just change this to match constraint and also match constraint like that and everything should be okay let me hit the instant run again and the padding you can kind of see it's better than what it was so let's go back to main activity and you can kind of see a recycler view is easily accessible by just using the ID that we set up and this is actually something that's new to Kotlin and if you're coming from the Android world you'll realize how difficult it used to be and now all you need is this one single line of code alright so that's how you access your views from within your activities and that's really really easy and now it's time to kind of use our recycler review to render out a list that kind of looks like this over here so I'm going to admit right off the bat here that recycler view is a little bit complicated so let's go through this one step at a time and the first thing you need for your recycler view is a linear layout manager is what it's called and this comes with a couple of constructors I'm going to use this for the context and now you can run your code again and you'll see that the blue color is gone and nothing else has really changed so the next thing you really need to do for your recycler review is to set up something called an adapter so what the heck is an adapter well you can kind of think of it as a data source or a UI tableview delegate for your list and those are the iOS terms and basically it helps you render out your items inside of your lists so there's a dapper guy you can either create it down here or let's create a new file so new Kotlin class and let's call this the main adapter hopefully that makes sense so inside of here let's create this class called main adapter subclass it as something so you need to subclass it as a recycler review adapter and so as you can kind of see through the autocomplete yeah this thing called the VH inside of these bracket things so this class actually requires a special view holder class as the kind of generic in here so already it's getting pretty complicated right so the first question here is what exactly do we use main adapter for and inside of this little subclass you can say get item count and just return something like 1 or 2 so let's just use 3 and you can kind of remember how UI tableview works right your number of items for your table view is kind of returned from a method called a number of items and this is exactly the same thing so get item count and so let me just put a comment up there's let's see number items and the other method for your UI tableview datasource delegate is self or item at and we'll fix that in just a little bit and let's kind of look at this little error on the right side and what you really need to get all this to work is to provide a custom view holder class which i know is pretty confusing so let me just fix it first with a custom view holder class and we need to subclass it with the : of recycler view dot view holder like that alright so this view holder we're going to use it inside of this generic brace brace and what we're now missing are these other parameters or other methods that we need to implement so over here let me just fix this error as well I think we need this and this CV and then I'll just type in the V over here so view hopefully that's your work let me import that with I think it's option answer it and we get the view so I will probably explain to you what that means a little bit later on and this right here requires us to import these two methods called on create view holder so let's just use that on create view holder hit enter you get this method and the next one is called on buying a view holder so let's type that in as well on buying a view holder and now this guy should actually go away so this is that this type has a constructor and this must be initialized here it is a little confusing what that actually means but you just once you say parentheses parentheses to invoke the constructor so again confusing Collins syntax but just make sure to put that in your code and everything should be okay all right and so what exactly can I do with this main adapter now is to just copy that go back to your main activity and for the adapter you wanted to set it to main adapter like that construct it with just the empty constructor and go back to main adapter you can run your project now and it's not going to exactly you work just yet because we don't have these methods implemented so you see how it says that it kind of stopped and to figure out what's going on you wanted to say messages or a logcat down at the very bottom and it actually tells you what is going wrong in the red here and it says that an operation is not implemented so these two methods actually need to be implemented so you can go to on bind a view holder and this guy you don't really need to do anything just yet and we're going to fix the on create view holder method right now alright so hopefully everyone out there is still with me I know if you're coming from a swift or even a Java background learning a new language such as Collin can be a little confusing you know with all the news and text and whatnot but if you stick with it if it should slowly start to make more and more sense okay so let's move on here by finishing up the implementation for this method called oncreateview holder so the first question is what exactly does it want me to return well basically for our list we need to render it out each one of these cells for example this here here and here and we need to create our cell and then return it inside of this method so let me show you how to do that right now by first removing this line and so the question is how do we even create a view so this is very easily done inside of Android by creating a new layout resource so let's say new all the way down here we have XML create this layout XML and what do we want to actually give this file name well let's say video Rome hit the finish over there and this is going to represent each one of my videos inside of the finished application so for example this row right here okay so if you go inside of here you can actually change the linear layout to a constraint layout so constraint layout hit the intern wait for it to finished and there we go so let's hit enter here and we go back to the design you see that you have this constraint layout UI designer thing for you to play around with so what exactly do we want to do here well I'm going to build out this a very very simple cell for each one of these rows and let's just do it very quickly by going into images image view drag this sucker in here somewhere let's just put it in there and right off the bat you can click on one of these resources for the image so I'll double click on that we get this little Android icon and I'm going to constrain it to the top of the view like that and also to the left and also to the right okay so now it's kind of bound to the parent in this layout and I'm going to change the width layout with it right there if you stretch it out you get matched constraint it kind of expands fully through the left and right kind of like this video cell on the emulator okay so really good stuff and now let's move on to maybe creating one of these title labels so this channel name or this here we go label and how do we do that well let's go into the text component list and drag this in here somewhere so put that down there I'm going to constrain it to the bottom of the image view and then also to the left of the entire parent I suppose doesn't really matter what you do as long as you understand what's going on so we have the left right and the atop and I can change this to match constrain again to fully expand it from the left and right like that all right so really good stuff and one thing that you do want to change is the image view and you probably want to give it a ID that makes sense but we don't really need to do that right now so we can go back to our main adapter and finish off this method by somehow grabbing ahold of this view for our list view so go back to the adapter and how do I actually get one of these views that I need to return well we use something called a layout inflator so Val layout inflator and we'll say layout inflator and we'll say dot use from and this comes with a context constructor so you can grab the context from the parent which is this a view group parameter right above and because this is an optional you should use a question mark here and a little red error and it's gonna go away okay so now let's say cell C cell for her row so that particular cell you grabbed it from the layout inflator and you just call this method called inflate like and so instead of here we can use a couple of different method calls and I'm going to use the third one right here which requires a resource so the resource you grab from your video row this XML file by saying our dot layouts they see a layout the layout dot what do we have here video a row is now available and for the next couple of parameters you just want to say parent so I wanted to use the route of view group and attach the route boolean so as a parent and also false and you should be okay so finally you have to return this cell for your row but you can't just really do this because it expects you to use this custom view holder class over there so let's just do that and construct a custom view holder so I'm going to run this right now with the instant change but then it's going to compile my project and immediately inside of the emulator you should start to see this row for my recycler review so really good stuff and if I drag the recycler view up and down you'll see three of these items inside of my list so that's kind of how that works if you modify this to just one make this change over there and the application won't load can't really drag it up and down you just have a one item and so the reason why this entire cell is that large is because the video row if you click on constraint layout you want to change the height it's actually wrap content and that's going to modify the entire cell so that it only has enough height to capture all the items in it so hit the instant run again and so now that I've changed my main adapter to return to four items you see that all of these cells are kind of being rendered out very very short instead of the entire screen okay so the final thing that you want to do for your list is to modify the text you to say something else instead of just the word of textview so let me do that by going back into the video row and this text view thing if you double click on it you'll get to this text and this needs to be video title like that enter you can run it again you'll see that and it modifies to video title so this video title text view let me give it an ID of text view video underscore title hit enter go back to my adapter okay so for the method of on buying a view holder you can actually modify the video title text by using some code and I'll show you how to do that right now and the first thing I actually want to modify is this a little constructor which I'll call this view instead of just the word @v and let's just modify that as well and now you can access that view with holder which is this parameter up above and you can save you as well and now down below you can access this video at idle thing so text view video title which is that over there you can say dot txt equals to see one two three you should be okay so this requires a question mark and another question mark because this is an optional and let's just see I think another question mark is required over there at the instant run and you should be able to get yourself to render out each one of your items with one two three so the next question is how exactly do I make my list a little bit more dynamic instead of just having four items with one two three for the text well it's actually very easy if you create this array of strings or a list of strings so Val video titles I guess equals a list and this guy you can specify a string in here if you want to and let's say first title and then second then third-order like that and now you have a list of three strings you don't really need to specify this if these are all just strings so you just remove that and everything should be okay so video titles we will use get item account of video titles dot size or account not sure which ones better but that's gonna give you three inside of the four so if you run this you'll get three items and now for the text you actually have to modify this over here very easily using this position variable so what exactly do we want to do there well let's get some extra space we actually just want to get the video title from this array so let's say Val video titles equals video titles and you just say get with the index of the position so this is 0 1 2 and this down below is just going to say video title that's probably a better name for this variable up there video title and now you can run an application one more time and instead of one two three first title second and third and as you modify your list so more more titles you will get that to show up inside of this vertical recycler review all right so that's gonna wrap it up for today's video on how to use this recyclerview component to construct a vertical list using the common programming language and again if this is one of your very first times creating a Kotlin application using a recycler view you're probably not going to be super familiar with the common syntax and all these new concepts so make sure to just sit down take some time to look up a code and you'll get pretty familiar with it after a while okay so if you're interested in downloading the source code for today's video make sure to check it out using the link in the description below any questions or comments you can leave them down below as well make sure to leave a thumbs up and also subscribe to the channel for more videos like this that's gonna be it for me today hope I'll see you in the next video bye guys

Channel: Lets Build That App

Views: 79,447

Rating: 4.9334154 out of 5

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code, android, recycler, view, studio

Id: jS0buQyfJfs

Length: 26min 2sec (1562 seconds)

Published: Tue Dec 19 2017