Android Kotlin: ListView Custom XML Views for Rows (Ep 2)

hey what's going on guys welcome back to the channel hope you guys are enjoying your day so far and hope you're ready to learn a little bit more about Android Kotlin development using the Kotlin programming language now today's video I want to continue on with the introduction of the lists new component inside of our Android app and in today's video I want to show you guys how to use the XML editor to provide our ListView with a custom row and it'll make it easier for us to design our application later on so what exactly am I talking about well let me show you where we left off in the last video right here and then we'll dive into the code right afterwards alright so inside of Android studio I have opened my main activity right here and the application if you run it it'll look like this where it says here is my row for my ListView right and how is this list even rendering that out well down here inside of this custom adapter class that we created the get view method gives us this textview back that says here is my row for my list view and then because get capped right here it returns five we have five of those rows inside of our ListView alright so remember my custom adapter is used to kind of plug into the ListView and provide it with things like how many rows and what kind of views each row will render it out all right so that's where we left off last time and right now I want to show you guys how to make it really easy for us to render out custom views for each one of our rows and what I really mean is I want to be able to draw out this view right here for one of my rows so what I mean is we have a bolded text view on the top and then we have a another text view right under it that is not bold so instead of constructing it through code which some of you guys are used to doing I'm going to use the layout of some kind of new resource file right here and this layout file will be responsible for my row inside of this list so let's just call it a row right here or perhaps main row I think maybe that's the correct naming convention or perhaps a row me and then for the linear layout right here actually what my route element to be constraint layout instead so let's hit OK and now I get this view inside of my android studio ide so let me close out this guy and what do I get right here well this editor really is showing my constraint layout element right here and every time I have a constraint layout I get this nice-looking editor that allows me to drag and drop in components into my view so to get my list view to look like this we need to text view components one on top of each other so I'm going to drag in a text view somewhere in here and then I'm going to apply some constraints for this text view by dragging left click and dragging this to the top like that left clicking the left dot and drag it to the left and here we have a text view that says let's say name like that and an intern and we have the name like so alright so what do I want to do this name well why don't we change the font so that we can get it to bold somewhere in here let's just go back like that and somewhere here I believe I can make my text appearance bold by doing that and now you can also change the text color to be black by double clicking that and for the text size I want to use a 16 SP instead of just 14 SP alright so that's pretty good and that's what my name text view looks like and I want this row number text view I want that right below that text view so let's drag that in somewhere inside of my screen and I'll constraint it to the bottom of the name by using the left click and then perhaps I can constrain it to the left text view of the name right there and I should be okay so you see how the text view is kind to the right of the name well that's because this right here is eight and we change that's a zero that'll bring it to the left like that all right now that I have this row main that XML file what do I want to do with it and how do I want to show it inside of my list so that I don't just see here's my row for my list view so the way we approach this type of problem inside of Android development is inside of this get view instead of returning this textview thing we want to return this row main view instead so how do we go about doing that well instead of Android there's this thing called a layout inflator which allows us to inflate one of these XML files and it gives us the entire view so that we can use it as our return value so how does that work well let's just say valve and we'll create a new variable called layout inflator and this equals something call it layout inflator like that hit the enter and guess a dot and from so you see it's expecting us to pass in some kind of context with this from right and luckily for us we have access to M context which if you remember from the last video this context pretty much represents which activity we are and basically my custom adapter is passed in a context parameter and that this is this main activity and context right here is being initialized as the contacts that we're passing it so a little bit of detail right there but don't worry too much about it if you don't understand it as long as you have this bit of syntax it will work and then you'll also understand what it does later on so layout inflator what can we do with this little variable so let's say it layout and later and inflate like this and I'll use one of these calls so let's say inflate see what can I do so inflate will take in a resource layout ID so r dot layout and I'll use main row or Romain let's hit that and then right here I'll use a second parameter of view group and then finally I'll just pass in a false like so okay so what does this do well this gives me the view that belongs to this romain found so let's just say let row on that let but Val row main equals that or we can use a camel casing like so and return the row main okay so let's run our project by hitting the play button and let's see exactly what our rows look like now that we're using Romain instead of the text view alright so our app just launched and unloaded each one of these rows with name and text view and you see it's much more similar to what this application already looks like so what's really going on here is the layout inflator inflates the romain based on whatever a resource we pass it right here and then at the very end we simply return that row that was given back to us by the layout inflator hopefully that's pretty straightforward and now that you have these two text views what do we want to do with it well the bottom text view right here I want to show the row number colon and the actual row number like this so how do I go about doing that for the second textview well romain this textview right here has an idea of textview too if you want to see this more clearly you should open up the XML file and you see that at the second text view which is this guy right here has a text view of two so I actually want to change this ID to be position position text view like that and I believe the convention is to always have lowercase characters for the ID so position textview is this bottom one and I might as well call this name textview while I'm here okay so how do I make use of position textview well I think I need to edit this guy because every time I modify the ID it likes to kind of go back to the top left so let me bring that to that and perhaps I need to modify some of this stuff here so let me move that away and that looks okay and I believe I can click on this drag this up here again and I should be okay click on this and drag this back to the left this is zero and now we are okay so sometimes when you mess with the IDS the constraint layout editor actually redraws out everything so make sure you fix that before you move on so this textview has the idea position textview and let's go back to main activity now so that we can render out row number and : the actual row so instead of get view we can add we can actually access that position text you inside a romain if we call row main and so you find a view by ID so that ID is going to be our ID and let's see text view we have position text view which is the bottom one and inside of this little bracket bracket you just specify what that component is so in our case it is a textview sometimes a valve position text view equals all of that and then position text view you can just set the text now equal to something so let's say a row number and try to run this via the instant run look at that and hopefully my code is okay and nothing goes wrong and our app runs and now it's as a row number instead of the previous text view text so instead of here I'm going to hit a colon at for Colin you can use a string interpolation for your text with a dollar sign and the dollar sign will say in dollar sign position from this parameter right here so let's hit the instant change application and you see right here is this row number zero one two three and four alright so that's pretty much how you allocate what your views need to look like based on position number so finally the name right here really needs to be dependent on some kind of other type of list variable in our case I'm going to use an array to kind of represent the names inside of my list all right so I'm going to create an array inside of this custom adapter and put it up here I'll say private and let's see Val names and this is going to equal an array list of all right so this probably is going to be new syntax for some of you guys that are learning Colin so let me just show you how this works this array list of type string and inside of here I can just type in whatever I want so let's say Donald Trump here let's use Steve Jobs as my second row and let's use Tim Cook as my third row okay so this is my names array and I can do a couple of different things with this names array first I want to change how many rows I see inside of my list here in other words instead of the five rows this really needs to depend on the names array so let's say get count returns names that size or the number of elements inside of this array and then finally the name text view it needs to actually use a name instead of this name text so let me apply the changes right now and see what we get inside of the emulator so we get three rows now so a lot of the changes are taking into effect and let's see what I want to do with a name right here well the romain has this top textview as named textview so let's go back to main activity and what can we do well well do the exact as the position textview of allocating a variable for the name textview like that equals Rho main dot find you by ID this is going to be of type text view the ID will be our ID name textview like that and the family name textview that text has to equal something right and we have our names array or from the table and you can say dot get for the index that we want to get and let's just use position for the actual row position so that's pretty good let me apply these changes and you'll see this row changes quite quickly to Donald Trump Steve Jobs and Tim Cook so because my names array right here only contains three names I only have three rows so if you wanted to add additional names to this list such as this right here with Mark Zuckerberg so let's say mark let's see you make it a string Mark Zuckerberg and then who do we have last we have rock Obama the last President of the United States and here we can say instant and run and we will get our application up and running again and now we have five rows so that's pretty good and one last thing I want to show before I and today's video is to make this spacing on the left on the top just a little bit larger so that it matches this design and we get some more breathing room so let's go back to row main I'm going to go back to design mode and for the name right here to the left I want to push it 12 DP from the left and perhaps let's follow from the top and you see it changes immediately inside of the editor and this right here I believe if I apply these changes right now I'll see what my applications row looks like so that's what you get and if I wanted to apply a bit of spacing on the bottom of the rownumber text view i can modify the padding of the entire constraint layout so let's just see what this does with padding say bottom and let's give it a 12 DP like so and apply these changes instantly again and hopefully that will give me something that looks a lot cleaner so what I really wanted to point out with this little exercise is that sometimes you have to go into the XML file and make your edits through the text right here instead of using the design and I personally rather develop using the XML editor entirely but I do understand that this design editor makes it so that it's easy to just drag and drop things into the screen and if you're really new to Android development this might make it seem a little easier in the beginning but another day all of the changes that you need to apply turn up inside of this XML file so that if you want to edit it later on you can just easily do so by looking at the XML file this file is much more human readable compared to a storyboard in Xcode and it's actually reusable in many parts of your applications so this is why I recommend using this XML editor and not doing things by code kind of like what we did right here in the very first lesson all right so that's pretty much how a ListView works in conjunction with the layout inflator so that we can kind of use our custom views that we build out using the XML editor we also learned how to use some syntax to render out an array of names and also how to access those names using the position variable it's our very good view function hopefully you guys enjoyed today's video if you want to download all the source code for this project you can find the link down in the description below now in the next lesson I want to discuss all of the inefficiencies that we have inside of our program right now for example we actually have to check the view property of our get view function just to make sure that we're not allocating more views than we have - and we're going to have to dive deeper into this viewholder concept as well hopefully you leave a thumbs up for today's video and also subscribe to the channel for later videos on android development keep on coding guys and i'll see you in the next video bye bye have a nice day

Channel: Lets Build That App

Views: 33,255

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: P2I8PGLZEVc

Length: 17min 52sec (1072 seconds)

Published: Sat Sep 02 2017