Android Kotlin: Essentials to Creating a ListView (Ep 1)

hey what's going on guys welcome back to the channel hope you guys are all having a good day and I hope you're ready to learn a little bit more about Android development using the Collin programming language now in today's video I would like to introduce to you guys the idea of a ListView inside of our Android apps now basically the ListView is kind of self-explanatory it allows our users to scroll through a vertical list with their fingers and it kind of shows more views as you scroll up and down the list making it very very user friendly so without talking about it too much I would like to start today's video with a demo as to what kind of application we can build and also what we're going to be working on for the rest of today's video so let's start off with my screen here and I have this Facebook feed kind of a mimic application which allows me to scroll up and down this list right here and let's kind of count how many rows we have for this application right here and the first row is up here from Barack Obama second row is Marcus Zuckerberg third row is Steve Jobs and then we have this final row right here that kinda allows us to scroll horizontally within a horizontal list so this component right here is just a ListView with a couple of different rows so it's pretty basic and in order to kind of build this out which is what I want to show you guys how to do in a future set of videos we need to start off with something that's a little bit more basic and foundational and that kind of looks like this right here so this app is called ListView demo and we have a simple list of five rows for a couple of different names or a couple of different people inside of our list and because there's only has five rows I cannot scroll up and down so this is what I want to show you guys how to do today and why don't we get started with creating a new project and now kind of describe to you guys how a ListView works using something called a adapter for our ListView alright so let's go ahead and start out with a brand new project in Android studio I'm using version 3.0 beta 3 you might want to use beta 2 because it's more stable but let's create a new Android studio project I'm going to call it list view perhaps LBT a4 let's build that app company domain and project location you can specify whatever you want and then I'm going to target the phone and tablet using API 15 so that I can run on approximately a hundred percent of all devices so that's nice to have and we're going to hit next and in here I'm going to create an empty activity because it's always nice to have pretty much nothing inside of your files in the beginning and then for this right here let's call it main activity and generate layout file with activity main and these boxes checked so with all those options clicked we can create our project and you see it kind of ran a couple of different Gradle processes to get my project up and running and once it is done downloading all of the necessary files we can start running our application pretty much right away so how do we run our app well let's hit this little play button guy and I have this pixel API 25 as my emulator if you guys need to create your own virtual devices make sure to hit this and then follow the wizard right here so I'm going to click or double click on that or hit OK it's going to try to run this application right now it's building with a Gradle process and installing the apk onto the emulator and we have hello world just like this and I would like to change all this so that I can see the project inside of this project mode instead of the Android moon I do this because all these files right here the structure of this project Explorer reflects exactly what I see in the finder so the things that I kind of want to open up here is app source main Java and have this main activity which is this collin file right here you see Katie for Colin and we're going to be typing in Kotlin for today's video and it's out of res we have raz layout activity main which has this text view here that says hello world and it's kind of placed inside of this constraint layout thing so I kind of went over all of the kind of introduction of Android studio in a previous video I'm going to link that video down in the description below and make sure to take a look at that video before you kind of be a starter for it's a day if you are unfamiliar with how Android studio works so now that we have our hello world inside of this textview and we can see it inside of this preview pane on the kind of the right side here I would like to introduce some kind of way to draw a list inside of my application so in other words I would like to have a list right here that has just a couple of names and strings and numbers inside of a textview components so how do I go about doing that well it's pretty easy in Android if you just use this XML editor so let me just move this out of the way remove the text view and the textview is gone I can use something called a ListView so just type in this little bracket guy hit list view and for the width I'm going to use match parent and for the height I'm going to use match parent as well all right so let's see main activity and let's see if this will go away I think it's just going to stay there move that out of the way and let's see what I wants to do with my design here so the ListView is already in my entire application preview if I hit this instant run it's going to take in that ListView and render that inside of my application right now so you see how it's a blank screen so the way I can fix that is to kind of show a background color instead of this empty transparent color which I'm going to use f00 for the color of red so this is just standard hex XML color and if I or hex decimal color I believe that's called so if I change FF 0 I get the color of yellow so having done that I can use instant run again and that's going to show this yellow color inside of my app right yeah so that's really good and that's pretty much how the XML editor works and it's really fast to launch your changes using the instant run you can also hit the Run button and it'll pretty much execute the entire activity again which takes a couple of more seconds but uh you know both ways work and you can use whichever way you feel comfortable with all right so how do I now get this list to actually even render out these rows right here well first we need a handle on our list somehow so what I mean is I would like to somehow and set up my main activity which is this screen right here I need some way to modify this list and set up something called an adapter on it so how do I modify that list in the first place well if I say let's say new variable with a bow of list view this is kind of the let syntax in Swift for iOS so now let's view this is my constant variable I need to say find view by ID and right here I can just say a list view for the actual view that I'm going to find and for this guy I think I need to use autocompletes so let's just do that and let me try to import that so I'm hitting option enter and it just gives me that autocomplete so that imports it up here and for this little parenthesis I need to pass in the ID of this list view so what is this ID well if you go back into your activity main file this yellow list view you can give an idea by typing an ID and you have to type in apps plus ID and this right here I'm going to call it main list view and there's a bit of a naming convention for your IDs where you have to specify where it is followed by an underscore and what exactly the component is so that's a convention that I'm following for today's video and now that I have this ID for my yellow listview you can kind of see it has some sort of a template prototype rose inside of the preview if you run it it doesn't really change very much so you run it you can try to run it but you don't have the ID here so let's fix this by specifying the actual idea of our ID and you can say main ListView which if you click in here brings you back to your ListView okay so let's try to apply these changes right now and you'll see that it's going to run it and we have the exact same application as we did before and because we haven't really done much that the changes actually are the exact same thing so let's see if we can change the background color of the ListView by saying background color and this takes in some kind of color and how do we get a nice color for this thing to instead of being yellow let's make it be a red background color so let's say Val red color equals color I think that's what I need so color and I can parse some kind of color string so that's color string is going to be pound ff0000 and let's see if I can apply the red color inside at my list view by hitting the instant run and this yellow should turn into a red color so I think I have too many zeros right here so you want to make sure all of your hexadecimal color strings are six characters and now upon applying those changes our application now has a red background for our ListView so that's how that works and that's pretty simple right now what I want to do in order to render out some rows inside of my ListView so that I can make it look like this is to set up my ListView with some kind of data and this data needs to tell my ListView how many rows there are in this case there are five rows it also needs to tell it what kind of views I need to render for each one of my rows so the way to set up this data or this thing called an adapter for my list is to actually create some kind of adapter so eventually what I want to do is to set some kind of adapter on my list view equals something so this needs to be my custom adapter telling my list what to render all right so good stuff now exactly what is it that I want my custom adapter to be well you have to create some kind of custom adapter inside of your project somewhere and the ways that I've seen it done mostly for Android applications is to just create some kind of private class within your main activity class and this means that it's an inner class of your main activity just ignore it if you don't exactly understand it right now and the thing that we want to do is just render something inside of our list so this private class we will use something like my custom adapter and let's subclass something called a base adapter for this custom class and so once you use some class base adapter you have to actually fix a couple of these errors that show up right here so the first thing it says is that the class my custom adapter must be declared abstract or implement abstract base class member public abstract function get view with all of these parameters so it might be a little confusing and I'll show you how to fix these errors and you just have to implement all these methods that is telling you to actually use so in other words if I type in get view hit enter I get that first method that it's kind of complaining about and this getting view guy is responsible responsible for rendering out each row and then the next thing it needs to kind of get is this get item so let's see get item and let's just do this you can ignore this for now and what else does it need well it needs this get item ID method as well so get item ID and well you can also ignore this and finally we need something called get count so let's say get counts and having these four methods implemented inside of my project I can finally get rid of these the first red squiggly the line under my custom adapter okay so get count let me just put a comment here responsible for how many rows in my list and that's kind of how we have five rows right here and this last guy not exactly sure why or what the literal error is telling me but the fix for this is to just use parenthesis parenthesis which means I guess this is the constructor for my class I know this is the fix for the end and now my custom adapter can be used as the adapter for my ListView and the way to do that is to simply type in my custom adapter and you construct it with the empty constructor like so alright so pretty glad all of this index looks somewhat similar to Swift there are a couple of different or different changes and differences between the two languages but they're pretty close in my personal opinion so let's see how to fix these two ears right here and right here and to make this easier to follow I'm just going to say p 0.2 along and this p 0 is just this parameter right here and it's usually called position but and resti studio is not giving me these parameters for some reason so i'm going to type it in manually get item right here and I'm just going to say return test string like so and these two methods you can pretty much ignore you have to implement it just to make the errors go away and then lastly we need to return these rows here for my list view so what exactly do I need to implement here okay so this right here is actually the position and this p1 is sometimes called a view or convert view which I'll explain in a later video perhaps and p2 is just the view group all right so how do I even kind of a make sense of what I need to return for a get view for one of my rows well this is pretty simple if you construct some kind of view yourself so how do i construct a view for a get view well I can say Val text view equals perhaps text view like so and this guy has a couple of constructors for example it has the contexts and all these attribute constructors and I need to pass it in some kind of context and for some of you guys that aren't familiar with the context what it means is I need to pass in like some kind of activity for where I'm at inside of my application and the way to do that is to pass in some kind of context for your custom adapter so in other words I would like to pass it in this for my current main activity and because my custom adapter needs to have this context constructor I need to just give it a constructor like that and everything should be ok except for the fact that I need to use this context later on so the syntax for colin is a little strange you have to type in it like that and you actually have access to this context variable from the constructor and it's all a little bit magical but that's how the cotman language works and it does a good job at reducing the amount of things that you have to type so this context I want to keep a reference to it via some kind of private variable which I was a private Val this is kind of similar to private let's and I'll call it M context with the context class like so and I need to actually initialize this M context I'm going to say either this M context like that or you can omit the ooh this doesn't really matter and now my context is being initialized finally I can pass this context in as the context of my textview and then finally I can say return textview for my individual rope all right so a lot of typing and the last thing I want to do is just set some kind of text on here I think I need to say text and here is my row for my ListView let's see if this works by hitting the run or the instant change and let's see open up again I believe my app is crashing so let's see let's hit the run and I believe I need to implement some kind of count for the number of rows inside of my list so let's return to five for now and let's hit the play again selecting the pixel API emulator of 25 and that will get me this ret list with all of these text views as my rows for this vertical scroll view so that's kind of how that works and I would like to remove the red color now by commenting out this red color and setting the background color and I believe if I run this now you'll see a yellow ListView so let's see the yellow is right there I'm going to remove the background color of yellow from the activity main hit the incident run again you'll see the white list view like so alright so that's kind of how a ListView works and this is all of the work that you need to use in order to set up a vertical scroll view with a bunch of rows inside of it alright so that's pretty much how a ListView sort of looks like and in order to get your ListView to work properly you need to provide it with a couple of things such as an adapter and the adapter needs to tell your ListView how many rows to actually draw out in a vertical direction as well as what your road looks like and what the view needs to be in order to render out that row alright so a lot of boilerplate that we kind of handled in today's video in the next lesson we're going to take a look at how to use the XML editor to provide the custom view for each one of our rows and also to apply some logic to determine what goes inside of those rows such as the name of the people inside of our list alright hopefully you enjoyed today's video if you want to download the source code for today's project you can find the link in the description below and also don't forget to like the video as well as subscribe to the channel for more videos like this you can also follow me on twitter and build that app that's my handle if you're interested in joining the Facebook group for the let's build a tap channel you can find a link down below as well until next time keep on coding guys and I'll see you later bye bye

Channel: Lets Build That App

Views: 86,896

Keywords: development, tutorial, learn, programming, code, android, kotlin, listview, basics, adapter

Id: EwwdQt3_fFU

Length: 20min 19sec (1219 seconds)

Published: Fri Sep 01 2017