Android Studio For Beginners Part 3

welcome to part three of my getting started with Android studio video tutorials in this video we're going to demonstrate how to create a list of items like the one that you see here in front of you create custom layouts so that the list contains more than just an item for instance in this example you can see I have a peach but I also have a description under it and they have a price to the right hand side so that's going to be discussed when we discuss custom layouts and the third thing that we're going to cover in this video is displaying images so for instance if I were to click on peach or tap on peach in this app I will see an image of that item appear and I can do the same thing for tomato and for squash so this is the app that we're going to build in this video let's go ahead and get started so to clarify the goals of this video first we want to demonstrate how do you use the ListView component to display a list secondly we want to create a custom layout so that each item in our list has some interesting information in it more than just the item itself and then third we want to demonstrate how to incorporate images within our app using the image view control now some things prior to this video we're already discussed in parts one in parts two so in part one we just created a project developed the app and then test ran that app so the elements of creating a project were covered in part one in part two we talked about switching the tool screens which are called activities in part three we're going to be doing all of that we're going to be creating an app we're going to be switching between screens but we're adding list views and image views within this app so you can see how carts 1 through 3 are cumulative alright so let's go over to Android studio and make our project I already covered setting up projects in my part one video so I'm going to move relatively quick through this part just to save a little bit of time so we're going to start by clicking start a new Android studio project we're going to name it list app you can go ahead and click Next you can leave the API level as 4.0 or higher whatever you want to be comfortable with you can go higher than that but 4.0 is what I started with so on the next screen you can click empty activity click Next just leave everything as is this should be called main activity that they layout file activity underscore main and just click finish so now you want to locate your activity underscore main layout file if this did not open automatically which it should it's located under your resources folder and then expand out layout and click activity underscore main so that's the same thing now you will probably be in design with it to start so let me do that as well and I'm going to shrink down the project Explorer to give myself some more space right here okay we're going to delete the component that says hello world right here so we can click on it in here or you can click on it in your component tree right there and then you can just push your delete key and it will delete it what we're going to want next is a container we want to have a ListView control in here so we're going to simply select a ListView in the container category and drag it in and we're going to give it a name here so I'm going to call it my ListView so as soon as I push enter it will populate that with some example information it doesn't mean that the list contains anything at this point it just means that this is what it would look like if we were to generate a list now the layout width we want to have match parent now if it does not stick like that you can simply go over to the text version of this layout file and we can just manually do it so I'm going to copy match parent from the layout width of the container to the layout with a list control so just layout with where it's going to make it's a match pair and then I'm going to save it and I'm going to close it that's all we need to do with that activity okay so next up in our project Explorer we're going to return back to main activity actually let's add the list items first let's go to the values category under resources so here's your resources once again find values and find strings so it's convenient to have all of your strings for instance the items in your list all in one place so that's why the strings file is right here you can change the name of your app this is what is appearing in the action bar right there but to create a array of strings we can simply do this I'm going to put a left angle bracket and type the word string now you can see if two options here so I'm going to arrow down to string array and push tab to autocomplete and we have to give a name to this array now usually array names a plural so I'm going to call it items so these are my list items and then I'm going to create a closing bracket for this and we're going to put some items in it put an item within this array you can type the word item and we're going to call the first one of peach and then the next item is going to be a tomato you can actually make these items anything you want the whole reason I picked peach tomato and squash is because they were readily available in my kitchen so I took pictures of those three items for this demonstration so the last item is a squash okay so those are going to be the items and the next thing is going to be another string array of the prices so the first item in prices will correlate with the first item in the items array and the second item will be the same as the second item so they will be parallel lists so I'm going to call this prices and the first item will be $0.99 so I'm going to go ahead and click that amounts and the second item will be a dollar 49 and the third item will be 89 cents okay now we're going to also include some descriptive information so make another string array and I'm going to call it my descriptions and the first item in the list will say fresh peaches from Georgia since Georgia is the peach state and the second item will say fresh salad tomatoes from Ohio and the third item will say fresh yellow squash from California okay all right so we have three arrays that we can populate into our list view so let's go back over to main activity and let's just test our list to begin with to begin I'm going to create a reference to our resources that I'm going to call res just to save some typing the next thing that we're going to create is a reference to the ListView that is in our layout file so let's create a field variable for that since we're in the main activity class probably going to want to use it again so our name for the ListView was my ListView it's a good idea to keep the names the same so that you can keep it straight in your mind what you're pointing to here so we're in the mainactivity.java file here but we're pointing to a component that's in the layout file in activity underscore main and we're eventually going to want to link that together with our list of storing items all right so right here we've declared it but we haven't initialized it yet so what is my list even hold what it's going to hold a reference to that list view that we're going to be searching for so we're going to use the fine view by ID method to go look for it and we gave it an idea of my list view so the names are the same and when that method finds it it's going to return a value we're going to cast that value as a ListView object and remember it within this class as my ListView to keep the namelessly all right we're going to basically want to do the same thing with the strings that we created over here in strings.xml right so let's just start off with this first list right here and just make sure that our list is getting generated we have a string rate and we called items and down here we're going to initialize it when this activity is created so where I use that Reds variable that we just created and we're going to use the get string array method which is the top one in the list here it's expecting this music and we're look for our resources through our resources for an array that we called items now with just that information right there we can preview our list with one more thing we have to create a layout file that will merge these two things together so we have this list of strings and we have a list of view the list view we'll need some way to present this information so that's where the layout file is going to come in so I'm going to right click on layout right here within your res folder so if this is shrunk down expand out Reds right click on the layout and click new layout resource file well we have to give it a name so I'm going to call it my list view detail alright so that's all lowercase using underscores to separate the words now the root element of this is going to be a text field right because we're basically going to repeat in our list a bunch of text views that's why I'm choosing that and then I'm going to click OK and here is a quick preview of what it's going to look like and the only thing I'm going to change in this I'm going to just click in this space right here and I'm going to just make the text size larger make the text size 24 SP just so that you'll be able to see it a little bit better the only change I'm going to make click Save and I'm going to go ahead and close this alright so as I referred to earlier we're going to merge together this this items which is a string list with this list view to do that we have to use an adapter to merge those two together so I'm going to say my list view that set adapter to be a new arrayadapter now before i type the rest of this I'm actually going to autocomplete it so I want to point out here enlist the new array adapter is of type T well what is type T going to be silly push enter and you can see the cursor is blinking right there well this was a list of strings that we were giving it so we're going to say everything in this adapter is going to be of a string type these tab autocomplete and now with between these parentheses right here we have to give three parameters the first thing is the context of this array adapter which we can use with this keyword for it it's basically saying this list so in this list we're adapting this array for and then what layout file that we're going to use well the one that we just created so I'm going to like our dot layout oops layout and we called it my listing detail and then we're going to give it an array to manage and so every item in that list will become a textview item and then it's going to put that within our mindless view so we called that items so our radius called atticus alright now that didn't quite all fit on one line so I'm going to shrink down my project Explorer so you can see it now and then you're going to want to push play to preview if this works and I'm going to go ahead and use my nexus 5 to preview that in in a moment it just popped up trying to get that out of the way for you so you'll see a little bit better so if you don't have time for it on the screen again in a second alright so we have a page tomato or squash so our ListView is working alright for this next part let's delete line 23 otherwise it's going to tell you that it's use and you won't be able to modify our new and improved layout file all right so go over to project and we're going to just delete my list view detail and remake it so I'm going to go ahead and click right click my list view detail and select delete click OK and let's make one that's that's going to include all of that extra information the price is in the description so I'm going to right click layout again select new layout resource file and you can keep the same name let's call it my list view detail but this time it's going to be a relative layout it's not going to be a text view layout and go ahead and click OK all right I'm going to go ahead and shrink down my project Explorer to make this a little bit bigger and we're going to drag in a text view and I want it to be want to pay attention to the arrows that it's giving me here the arrows is telling me where this will be relatively aligned so basically I'm anchoring it to the top and then the left and that looks okay to me you just don't want it to be too big because then the spacing between each items could be way off all right so if you need to delete and do it over you want to get it somewhere in this upper left hand area the only thing I'm going to really change here the text size so what the property is open you're going to put in a text size of 24 SP that's going to make the name this is going to be the name part of the text view larger than the description so I'm going to change the ID of this to name text view and push enter now you could just leave the text the way it is but I like to see what each control is going to contain so I'm just going to change the text party to property name even though we're going to overwrite it at runtime next up I'm going to drag the text view in and I want it to align with the bottom of the name field alright so this is going to description so I'm going to go ahead and change the ID team description text view I'm going to change the text to description and I'm going to leave the rest the same okay and then lastly I'm going to put price over here and I want price to be aligned to the top of the name text view but I also want it to be aligned to the right side so I'm going to change the ID to price text view and I'm going to make the text size 24 to match name 24 SV this one's I can change the text property to price it looks like description is a little bit off too names let me reorient that that's better alright I'm going to go ahead and click Save and now let's go back to our main activity so in main activity we're just going to create a reference to our other arrays so we had another string array called prices and with another string array called descriptions and we need to load those up so when this activity is created they need to be initialized or something so prices is going to go clear resources for a string array total prices again another good example of why you keep the names consistent and third we have descriptions so following the same pattern now load in the descriptions and get those initialized as well alright at this point we're going to make another class then we're going to call items adapter so that we can merge these three items into that layout file and the computer will know how to do that because we want told it how to do that within that class so now what we're going to do is we're going to create a new Java class it's going to be a supporting class for this main activity file so right click on your top package under your Java folder here and you're going to select new Java class and we're going to give this a name of item adapter and the reason why we're calling it that is because we have this items array so we're going to call it item and we're going to call it an adapter because it's going to adapt the items in that list to fit into that ListView that we have built and it's going to be inheriting with super class is based adapter all right so I'm going to go ahead and select base adapter and I think that's all we're going to do there all right so we're going to go ahead and click OK and right off the bat it's going to tell us that we need to implement its abstract methods so abstract methods are unimplemented methods that are required for you to fill out so we're going to go ahead and do that now if you hover over the beginning of the line here or you push option enter it's going to give you your options here to implement those methods so we don't actually have to type them all out all the method headers and everything we can say implement those methods for me and it'll say ok you need to get count you need to get item you need to get item ID and you need to get view for this to qualify to be inheriting from base adapter I'm going to go ahead and click OK and it goes ahead and fills in these things for us so our item adapter is going to be using those arrays that we put over in mainactivity so let's just go ahead and copy these so I'm going to copy these items prices and descriptions copy that go back over to item adapter and then paste those and that's going to save us a little bit of typing all right so it has this get count method another one in other words how many items are in this list so our get count methods just look at items and return the length of the items the next thing is if we want to get a particular item in the list then what we have to say is okay well give them an item I alright because this is taking in I which is the index of something we have to test all right so items at index I get that item an item ID well right now that's just the index so we're just going to make that I so if they passing on I going to get I right back all right so those are the methods that it's requiring us to fill out except for one and that's the get view so this get view is going to show basically if they explain to the to Android here how to present this information so to do that we're going to need what's called a layout inflator so we made this layout over here called my list view detail and we want to essentially take that template and put stuff in it and then put it into that ListView component in our main activity so that's what that's going to do all right so we're going to create a field variable called layout inflator and it's really common in Android to start off these names at em because they're members of the class so I'm a whole EM [Music] inflator actually we are isn't it yeah all right so layout inflator m inflator alright so now that we have this it it's only declared it's not initialized with anything so let's go ahead and make a constructor for this class so if we're going to use this class this is how you're going to use it you're going to call it item adapter and we're going to give it a context of to know where this is going to get used and we're going to need to initialize those three arrays the items the prices and the descriptions otherwise we won't have anything to fill it with so I'm going to call it string array I you could give them the same name and use that this keyword but I'm just keep this short and sweet so another stream ray called P in a string array called be okay and let's go ahead and initialize those so items is going to hold the value of a targets passed in as I prices it's going to hold the value of anything that gets passed in is P and descriptions is going to hold the value of D and lastly M inflator needs to get initialized and this is how you do it you're going to say give me a layout inflator scrape the wrong one there we want to layout inflator but in this context so our context is called C and we're going to get the system service and then we can tell it that you know we're just going to use one of its of constants that it provides so it provides a cont of context layout inflator or service right so that's already provided with any Android I'm going to shrink this down so that all fits and you can see it better okay so this is the constructor that we just created this means that if we're going to create an item adapter we have to provide this information so that we can do our part of putting that information into our layout so down here at the bottom is the last part of this and that is how we're going to inflate that view and put stuff in it now this takes in three parameters a integer called I which is basically the index of the item and the list that got clicked or whatever I'm sorry the item in the list that it's currently working with the current view that it's operating with and any view group that it belongs to we're actually not going to use these within this method we're only going to be using this but we have to supply those anyway because it's an abstract method that we have to define all right so I'm going to create a variable called V and it's of the type view and it's going to take our layout and flavor them called em inflator from member inflator and we're going to inflate it with that layout that we called my list view detail oh and the second parameter is out we don't need so this inflate method takes two things a layout and in a view but we can just say no well for that all right now there are three text views within that layout so again with the import text view and let's keep the names the same we call one name text view and just like before we're going to use that good old signed view by ID V there to look within this current view for the or something so find view by ID so this is actually making this a little bit different than what we've already done here we're looking within this particular view that that we've inflated here for a control called we call it name text via our dot ID name textview right now we're basically doing this same line again but we're just changing the things here that we're calling it so the second one was called description text view and then the third one was price text view all right so now we can dig into that text view and find those stuff and since we can find it we can change stuff about it like what it says which is exactly what we want to do so next up let's make a string called name and the name of it is going to be what do we call that item scan all right so items at index I so this parameter I is the current item that it's creating in this list so if it's going through peaches tomatoes and squash that index is 0 1 & 2 so items item 0 as the peach item 1 is the tomato item 3 2 is the squash and next we have the description so we can call it des SC for short this is going to be descriptions its descriptions I think next time and we have one more called price let's call that cost just to avoid naming conflicts and this is when you in the prices prices array at index I now that now that we've retrieved that information let's put it in the text view so when I say name text view set text to name and we're going to take description text view set its text to the sea and price text view set its text property to cost okay and the only thing we have left to do is return this view so we fulfill its methods promise of returning the view all right so this is saying okay within that view which happens to be the layout file there's going to be three text views I want to put in three strings the name the description and the cost and let's put that in those controls and return the view alright so now that that's done let's go back to main activity and see how it looks alright so to put this together to use our new adapter to called it an item adapter so that's going to be we're going to basically have to create a reference to it so we'll just call it item adapter and it's a new item adapter and notice how it pops up and says I need to give it a context and three string arrays the items the prices in the descriptions so we can just put this context here's the items array here's the prices array here's the descriptions now that's only referencing the item adapter we actually have to use it so where are we going to use if we're going to use it in my list review so set the adapter to item adapter and we're going to save it and go ahead and push play and we'll see if this works now this should present three text views within each item so we have the peach which is the name the fresh peaches from Georgia is the description and then cents is the price so we're reiterating that down the list view from each item okay so that works fine but this is still not interactive so I can click on it it's not going anywhere so next let's create another screening that's going to show an image of each one of those items so let's open up our project Explorer and we're going to create a new activity right here under our package called list app so we're going to right-click the very first package select new which is at the top of your list and then you're going to slide down to activity you can choose from the gallery and select empty activity and click Next now we're going to give this activity a name the purpose of this activity is really display the details of an item that you've clicked on but the only detail that we're going to really show is a picture so I'm going to call it detail view or detail activity you can call it anything that you want and click finish alright so that's generating the Java class and the layout resource file the layout resource file is called activity underscore detail it should pop up right next to it if it did not then you can drill down into your resources under the layouts and it should be right here I'm going to shrink down the project Explorer to give myself more room again and we really only want one control in here you can add more to extend this app but it's under the images category and select image view and we're going to just drag one somewhere into the layout now this is a constraint layout over here and we just need a picture for the time being so I'm just going to pick this I see launcher which is the default and click OK and that's just basically a placeholder right now now you can use these constraints to align this Center and vertically or vertically and horizontally or you could select from here and click the vertical alignment and the horizontal alignment that's another way to do it either way I'm just going to put it in the middle of the screen right here okay this is all we're doing with this activity layout file so just save it and close it for the time being so now let's go ahead and make it so that this activity can go from this screen to the other screen or in other words this activity to the other activity do that when I say my ListView that set on capital o on click listener on item click listener actually so this is what we want right here on item click listener and I'm going to push tab to autocomplete and when I start typing on it should be the very first item in the list is on item click listener and I'm going to hit enter and it should set up the whole method for me so I didn't have to type the rest of this now what do we want to have happen when we go to or when an item is clicked well just like in the previous video in the part two video we talked about intense so I'm going to skim through this a little bit because it was explained in the previous video but I'm not creating intense and I have to import that so option enter and I'm gonna call it show picture or actually show detail activity and whenever you start a intense you need to have the application context and then you need to tell it where to go so so we're going to call it detail activity and retake that class we're also going to send that activity the index of the item that got clicked so the first item is zero the second item is one the third item is two and that way on the other activity we know which picture to show so we're going to say show detail activity put extra and it's always a good idea in Android to use your package name up here right before the name of the thing that you want to pass and that way it's not going to get conflicted with any other variables that might be floating around in your Android ecosystem so we have to give a name to this so let's call it item index where you can just we'll just call it index now I'll call it item index and what are we going to pass we're going to pass I loops lowercase I because in the on item click I is going to be the index of the thing in the list that got clicked so we're going to passing that to the next screen and then we can start it so I'm going to say start activity and what's the intent the intent is called show detail activity so that should switch the screen when you click an item let's test what we have done so right now it's going to switch screens but all we're going to see is that little Android guy so let's go ahead and click OK and we'll watch this boot up all right so we have three items in our list if I click one of them it has taken me to the other screen alright great so we can travel from one screen to the next now let's have that other screen determine which picture to show based upon the index that's being passed okay I can see that this line right here got cut off a little bit so I'm going to push that down so you can see the end of it a little bit better and and I said we're going to add pictures to the project now so what we need to do next is get three pictures now you can use any three pictures that you want it's just the point that we have a peach a squash and a tomato you could take your own pictures like I did or you could just Google some so to put these in it's actually going to be pretty easy we're just going to drag and drop these into the drawable folder but then we also have a problem that these images are going to be way too big for our device and could actually cause our program to crash because the image size is too big so if I click on this and I look at the information this is good to understand that the image itself that I have here is three thousand two hundred sixty four by two thousand four hundred forty eight pixels and the phone that I took it on I think it's 480 pixels wide so this would never fit on my screen I'm going to need to scale it and there's no need to create multiple copies we can actually do this in code we can scale the image and make it fit on whatever device is being displayed on it's also good to note that this is three point three Meg's that's a particularly large image so you just need three images and just know that if they're way too big for the device it will crash unless you scale it down to fit all right so I'm going to go ahead and show you where to put this this is going to go into the drawable folder alright so in the resources we're going to be putting our images here there are multiple ways to do this if you right-click you could say reveal in finder and that will take you right to the folder there is a similar process on the PC all we got to do is just drag and drop our items right in here so I'm going to open up my downloads again and I'm going to copy these three items and I'm going to put them in that drawable folder so I'm going to paste three items and there they are so I'm going to go ahead and close those now that I don't need that and then this will take a minute and it'll detect it and you'll see another arrow out to here or you can refresh like this and that often will do the trick and now you can see the three items listed right here okay so now we can go over to our second activity which is called detail Acton you Java and since this is not a launcher activity we can ignore a couple of things meaning that we're not going to skip that first screen the main activity and go right to this but we could if we wanted to so to launch this activity there was an intent to launch it and I'm going to nickname that intent i-n or in and I'm gonna say get into okay the next thing that we're going to do is we're going to get the extra information that we sent in this activity to indicate which index to display so we can call it index it'll be an integer and the index is going to have to get that in that extra information so there is a method in the intent class called get int extra so it happens to be an integer that's being passed we gave it a name so the name that we gave it was this big long package name followed by and this is magnaphone screen so I'm going to strip that down matter-of-fact what did we call it we call it item index okay so it's going to copy that put that right there and the other thing it's expecting in between the parentheses are the default value now I'm going to put negative one because it's common to say if it's something is not in an array then return negative one because Ray's don't have negative index values okay next up there's a lot of code here next for shrinking down the image so I'm going to package this up into two smaller methods just to make the code a little bit more manageable and easier to read so the first one is going to set the image that we want so oops still cat blocks so I'm going to make a private method it's going to return an integer which represents the index of the resource the image so we're going to call it set image exercise called get image let me call it get image you can take a particular index and we're just going to put a switch inside of this off of that particular index so our index in our array was is going to be different from the way that Android is indexing our resources so two different indexes I know that's a little confusing but index zero is going to correspond with whatever resource has four drawables and whatever it numbered each oops I meant to say return alright so we'll turn that drawable which is really just in the index value all right so number two is going to follow that same pattern except for it's not going to be the peach it's going to be me tomato in case two is going to be the squash now just for safety PMSA the default case is going to be return negative one all right so that's going to get our image now the bigger method is actually going to be the scaling of the image so this one might seem a little overwhelming but it's not that bad so this method oops it's supposed to be a void method I mean that returns nothing so image view all right so it's going to get an image view that we're going to be scaling an image for so this is the image view that we're passing down into it and then the image that we want to scale inside of that image view will call pic and we're using an integer because it's an index value from the resources again alright so we'll need two lines of code right off of that one is called it's a it's from the display class because we need to know what size screen we're dealing with so this line of code is going to get the window manager and get the default display so that we can determine its size the second line of code is just going to get an instance of the bitmap factory class which is what we are going to use to scale the image so again the first line of code here is going to give us access to the screen and the second line of code is going to give us access to some Java library class that scales images for us the note factory options we'll just call it options alright so those two lines of code basically set up the rest of this so next up we needn't say this these options in our bitmap factory we need to know what the boundaries are that we're talking about so we're going to turn on boundaries think of that as it's allowing us to kind of feel around the edges and determine the width and height of stuff so the next line of code is going to allow us to take a look at a resource without actually having to draw it which is going to save us a lot of memory resources and hopefully keep our app from crashing because it's overloaded with visual data so we're going to get our resources and we're going to take a look at whatever pick is so if it's the peach and tomato or squash it can take a look at it look at its dimensions without actually drawing you and remember that with our options instance all right the next two lines of code is going to get the width and height of that image and come in then we're going to compare it against the screen so we'll say image width is our bitmap factory that we're calling options outer width or outlet so that's going to basically like trace the boundaries determine the size of pick the next one is the screen itself so we have the screen width now get with is a deprecated method which means that it's out of date but we're still going to use it anyway that's why there's a line through so if image width is greater than screen width we know there's going to be a problem so we need to scale the image so that it fits so we need to find its find out what the ratio here is of our image to our screen so we can do that as simply as saying F dot round and we're get the floating point value of image width and divide that by the floating point version on screen width here's one way to do that is because the round method takes two floats but this is all going to get turned into an injure alright so now we can take our bitmap factory which we're calling options and it's in sample size is going to be ratio so that's going to set the scale factor for our new bitmap that we're about to draw so the next thing that we have to do is wet turn off our ingest decode bounds so we had that turned on previously so we got to turn it off now and we're going to make a new bitmap and you can call it scaled image or scaled IMG and it's going to be a bitmap factory we could a resource get our resources when I use pick whatever it is that could be the tomato to squash the peach and passing in our options that we just went through and we can finally take image and set image bitmap to our scaled image so that with a lot of code just to get to that point but that's it that's going to scale our whole image now we're not calling this method yet so our last little thing is to call these two methods so just for some safe config let's say if index is greater than negative one so that means that it got past some information to launch this activity we didn't use the default value of negative one or something else so hopefully it's zero one and two and not nothing of anything above that you know we could build in some more safeguards against that but we're going to pretend that this is a sunny day scenario where everything is going right okay so the first thing is we want to get that image so the first method that we made is called get image so I'm going to call a variable called pic and set it equal or have it hold the value of get image at whatever index is passed it next up we're going to scale this image in our new image view which we haven't made yet so I guess we need to make our image here let's do that first so we have an image view that we're going to call IMG and it's going to hold the value of a search for find view by ID looking resources for an ID called image view now we can use it we're going to take that image and we're going to scale pick with it so very light image ship so put pick in image you after it's been scaled so if we need make any mistakes let's go ahead and push save and run and all them in the emulator see how this goes all right so let's click on peach oh and there's our peach and tomato is the tomato and squash yep there's our squash okay so we've gone through and we've created the app we've created a list and we've given it a custom layout for each and we've been incorporated a second activity that contains images

Channel: Bill Butterfield

Views: 286,374

Keywords: Android Studio, Java, Android, List, Layout

Id: rdGpT1pIJlw

Length: 56min 15sec (3375 seconds)

Published: Wed Aug 09 2017