Android custom listview with image and text

hello and welcome to coding demos in this tutorial are going to learn how to create a custom list view previously and when you create a video that shows you how to work with a list view so you can fight you can search for it in the channel or and I will provide actually the link to that we do any description below in this tutorial go to learn how to customize the list view so let me show you an example of the app that we will build in this video you can see here i have a list view and with a custom images which represent leave the country flags so I have for example Australia and have it's cool habits which can prove like position next to it so you can scroll through the list add like a small small number of items inside the list but you can see that each it has the flag and has the country name so when you click on it it will direct you to another screen that shows you the country name and toolbar and the the the country flag in the image view so that's basically it let's open our intro studio and start coding so I'm going to name the the app custom list I'm going to click on next I'm going to leave everything as it is we're going to click on next I'm going to select the empty activity I'm going to click on next and I'm going to click on finish and wait for it to build up okay so Bill is complete so the first thing we need to do is we need to choose way to add a toolbar so we need to go to resource values and open up this table for XML file and I'm going to let's call this I'm going to change the referencing from the action bar to no action bar okay that's the first thing now would where that would change the parenting next is we need to open up activity underscore main and then let's remove this default text hello world when we remove this and October design and then we're going to add a toolbar first thing add a toolbar so this is the one from Baghdad and intricate your screen and I'm going to remove the extra padding here defy the button left right off I don't need that so remove this and then the next thing we do is I need to add a lip seal so let's look for it lift you okay that's the lip seal so select that and they he added to the screen drag it back now open the text and then next remove this photo me back okay we remove this and then I have the next add an ID for the list so it's Android and ID and we're going to call this list view okay then so the list view is the list view is located at the bottom of the of the toolbar now online stylist and I'm gonna start I like to remove this you don't need that what's design okay so we have toolbar we have a list view and let's still be app pop-up screen okay let's add a link px first spaceship so for boxing and then we choose the theme overlay now we're doing this to do this because we won't be one the app name as you can see the only like this to be like what the text will be oh I need this I need a text for the app name to be white because if we don't add this if we don't add the app over theme and the other thing is the app and then changes as well so dark theme overlay got a compiler dot if we don't do this and then the the text color would be black the text color will be black so that's why we are adding this so we're done we have a toolbar ID that's great we have the the ID for the list field okay so we're done with the main activity so we go now we'll go back to the main activity or Java and then we initialize these views so we have toolbar okay and we call it m toolbar and toolbar and then we have the list view so unless you let me call it and let's feel okay so we have the toolbar M 2 bar equal to toolbar finally by the order ID so it should be toolbar and then my skill set also lets you find your ID or the ID dot rescue so we have the toolbar we have the toolbar and we have the list view next thing is way to do is we need to set the values for the icons because we have a country names and like going to create two string values for two away values one consists of every string another one is array integer so I'm string will hold the name of the countries while every integer will hold the name of sort with all the travel all the flags of the countries so let's do that here so it's string and then we call it country names then second step that's one and then in future and this would be country flags equal to open parentheses it's in college so what I do is I'm going to take the renamed here and I'm going to add them in for the country name and I'm going to look for the the country flags why do a Google search I'm going to add them inside my project right here so the atoms is latest at them so I should add them inside the resource folder and the drawable folders the Drobo folders one that holds the the images and icons so I'll do that and I'll show you an allegation later on all right so we have the country name as you can see here and I have the same okay now if we should like the toolbar and bless you the next thing we do is way to create an adapter so the adapter is basically the one that all seats and the items and later on we will set that up to the to the with you so to do that we're going to right-click on the project from this side here I'm going to click on the main package right click Choose Neel Java class I'm going to call this Y adapter okay let's close this so here I'm going to extend this to array adapter of touch strings so we add string here so let us press the hardest that is a string type they can see they have an energy I say that there is no default constructor available so you can see if you can see being a wet bulb on the left side here so just click on the arrow and create a constructor matching the super so for this I'm going to choose the first one which Excel which has the value of context and resource ID so let's add that okay for the context we have it and the resource ID we don't have a sodium source ID it which clearly custom layout that will hold the image and the title so let's create that open up project go to layout and then right-click new layout resource file and then we call this list will underscore item and has a root element of linear layout so it's like okay and then I'm going to add okay before we add anything to it let's a chemical process well okay let's just follow the code now I need to change the orientation from vertical to horizontal so might be asking me why we're doing this what's because only if we look back at the app again you can see that the item is let's first start with the image and then the title or the country name so the image view and effectual so these are actually there they are like position horizontally that's why we're starting the undoing orientation horizontal so what we did that now we offer the design and then we go to first and an image view so the image screen is right here we add back and now to ask us which image that we need to use or what effect with a drawable way to set for which no other way to use always effect for the image view so for that is we'll choose I seem unsure and then click OK now you can see that the image whiskey takes the the width of the entire screen and we don't need that we don't want that to happen so we open up the text again now you can see that and so it's also mostly provide us with this line which is actually a tweet and we don't need that again so if you go back to design so we have the image and then I'm going to look for a text view and add it next to the image view so that's X you drag is 2d image view right there and so from the text again and see if n total actually added something and yes he did and we added this line layer wait we don't need that okay so open up design and then we have the we have the image and and the text okay next is you can see that the icon you can see the icon is the is kind of close to the text view so we'll give it exciting so to do that go back to text and go back to the image right here format the code and then we're go to add Android bagging and also with five PP y QP if you go back to design alright so with the various place because that is a space between the image and the edge of the screen and pull the top on the left between the textview and oh and for home with surrounding area so it should be fine so high BP is that is okay for the padding next season will change based on for the textbook now if we open up the app again you can see the text size a bit different that the default one so let's do that so from text and then you look for the text you you have over here and we'll go to give it Android text appearance and then we do OK appearance is so directly peel yep and look for okay we choose this text appearance but add compile types of that's what we needed so by the code go back to design alright so we have this X public a soil fully changed that's quit so now we're done with the miss view part with you layout now we'll go back to the me adapter my adapter right here so for this super the the super mathematical structure will change the resource instead of this resource we're gonna give it the actual layout that we'll just created so it's all the layouts and just with your item so we have the resource file set right here next is we need to create a new way to define so we need to find the things so we define the country name a value that will hold the country name and the flags so that we can easily pass them to the constructor and we can sell it immediately in the in the list view here so let's do that okay we'll start with string string array and we call it name then integer array and they will call it flag right now I'm going to take this now I'm going to take this I'm gonna initialize them inside the constructor here so for example to create strings away let me just gonna call this a fake and three names don't worry the one comes as I won't have any conflicts between this and the other one and the other one is everybody is in future away and there will be taken three flags right all right so the fact if I be constructed multiple structure here I'm going to something like yes so this dot name equals to country name and this dot slash I'm setting the values equals to country flags and then I forgot to add the context all to that context and I'll call it n contacts so here I'm going to do this dot M contacts equal to contacts all right so we have the adapter here we've cut the layout file and we initialize this values to the country names here all right so we have the adapter the next thing we need to do is we need to override a method called on i get on just put on fitness okay let's get cows okay let's count what are the two is basically it returns the quicker we the size of the item inside the list so this has only name dot min okay next thing is we need to avoid another method and that is for get view so get you is the method that we'll be working with in order to set the values so it's appropriate use okay so it has the position in actual position so it is provide us with solutions convert view and the via group so the position is the position that sees the reference that we can use to access the value inside the to set the value for the view and let it do the do convert view if this view is the one that represents the each row is a list all the specific roles has missed the review group is a display that we have right here so the first thing I'm going to do is we to inflate the layout the layout of just created which is list you underscore item so to do that we go to do we know to say and layout inflator layoffs inflator I'm going to call it in and inflator and this is equal to we're going to cast this to make up inflator and then with the M contacts dot get system service and then this would be layoffs in slightest as yes that's the one it's adding a new life but I will be easier just to see it so we have inflator okay next thing we do is we need to take this convert view convert skill equal skill and inflator don't inflate now way to inflate the layers but you can see when we try to inflate the layout when I provided with so many methods or options that we can choose for so the one guy choose is it has three values one is resource what your wife doesn't show this fullscreen here okay and I sounds like it here alright so you can see this option with the resource file and the view group and there is the one who is very so far the people and the bullying access to so now to select the second option to do this to do that the first thing that we need to pass into the source file resource file if we with you and that's give are that represent each show inside the list which has the image view and the textual such are the layout that lists your item next thing is if you go so these will go megundal from where should I get the bugles well it has already been provided which is the path so just fast apparent here and then asking us whether we need to attach anything to the roots now when attaching it is also passing value or for second it might wonder why and joy so what I do is zoom in highlighting this point boss so when we involve a hallmark of it and we get this small explanation here is the unconditional inflation from the adapter should use real Holger Bech right so I will be talking few guys about it whether you hold the bathroom later well so let's continue right now and I'll explain to you guys but it is really important so I'll cover that in this video ok so we have the convert view we are splitting the layout next is we need to access the bills inside the layout so this layout has image view and it has fat stacks whew so open up we might open up the mind after the Java and I'm going to create a initialize the image view that it reflects so I'll call this M flag equals to cast it to an image view because it is an issue of all and then we do convert 0.5 view by ID I don't ID that image view we're doing we convert view where a particular view because this field is actually located inside the layout that will just inflated that's why to access anything inside this layout we need to first we first if Kentucky Oh which would stage right here next we need to do text you textview m/m name equal so click feel bad you don't find you by ID are not ID does text you okay so I have I have the image view and I have a text view that's good next thing we need to do is we have the image view we have the name we set now we start to set the value for the image view edit actual so we do that like this and flag the set image resource that would be country flag code so beside where we park in position it gives the exact value and we do the same thing for the country names for EM name dot set tags and then with the names and then we put we pass the position oops what did I do here position that's right and then in the return statement or with an equals work you okay but now think that we have seems that we've done completed the initialization for the image view the text view and we set these values so should be fine but wait a minute you can see that we haven't covered the thing why we're having this you can see our kind of thing right so took em explain why we're having this now when we try to let's say of them emulator now let's put on the side wait by if you scroll in the field it seems that it's called purposely right okay that's good but it is if there are certain things that you need to do to make a mess few go smoothly one of the things is and that's what is recommending at least to do for us to do it which is the real holder so we put a comma view holder first I need to do is we need to check for something now since we're fighting the layout and we're setting the flag the app the app might work but if let's say you have a huge list of items he has a items so you have a list that is that has a huge number of items you know you will actually notice nagging will scroll from top to bottom why because there are few things we need to consider what working with you and that's the first thing is we need to check first database you need to check if see convert you equals to no right if we convert you is equal to null then I'm gonna do this okay let me explain so we have to convert you so the first thing we need to do is the first stage usually the view is not so you can see when we did this check the error gone so let me explain so first we'll check whether the convert view is not so the convert view as I've mentioned is the one that holds the layout is like a so in all the layouts that we try to inflate so check if it's numb then inflate the layout and then look for the image view and look for them excuse to the convert you hear the voice through the IP and they set the value and things that everything is working fine but another thing is missing is we need to do some things called view holder so let me explain now when we inflate layout will check convert is the Calabria course now there's any way out should so that means we're recycling layout right if let's say what I mean is when we scroll to the list view the items are actually recycled who should that was nice that's exactly what we're doing right here but then rotate a way to consider which is the view holder so let me let me show you let me show you something now let's open up these let us up here is the view holder so based on the documentation what is when exactly the way to use the view holder see it says right here your code microfiber bodies which is the best exactly law here five u by D right here yes five u by D that's great so you call Micro 5 u by D frequently you ring this cooling of the fuel that's right which can slow down performance uh-huh that we you need to put like double lines under this statement which can show boost or which can slow down performance even when the adapter which is inside hit zero for recycling we are right now inflatable layer which will just run right here but that is still not enough so you still need to look at the elements and update them and that's what we did we are looking at the elements which is defined abiding and then we are setting the values which will be right here now a way around repeated use of five u by D FC use as you hold the design factor and that's exactly what we do right now so if you hold up a trend it aesthetic close view holder you can never-ending one but it's actually a good practice to just name with your hold on so the view although we'll have the mules that you just reviews that you want to inflate inside that custom layout so in our case we have two views and it's open of the ListView item we have two views we have the image view and it's axial so we'll inflate that solidify these are the views that we need to inflate so to do that to do that let's go okay this is the project is fulfilled in the get view so I'll type that will create static class and we like fast and we call it view August holger's Auto positives so inside this class you holder will go to call MH view that is we flag M slide and XQ that is M Singh wait now let's initialize the view holder so you hold the end of new folder and you hold it with fish meal you holder now this article but you the inside this air-conditioned photograph changes you think take an inside here the image will go to delete that I'll go to call and you hold us like that why do the same thing here mu hobo MA let me just copy this over here over here okay so empty hole it'll set that m / telephone is dot a name all right so has a view holder okay another thing we need to do is so at the end right here after will initialize these views before we set the values actually after we make things like this views we go to build convert new dot set tag equals selectors and you hold us all right now what we're going to do is take this parenthesis just pasted right here so if we convert more equals to now we don't you insulate the layout and we're going to set in convert view to this tab which is the view holder so let's see once we set this that means we don't have to call the find view by ID every time we need to inflate and your layout which at the end it will you see the memory consumption and you will have a faster scrolling when you are interacting with the ListView so now we're working only with this condition if they contribute a small now otherwise we're going to do like this l view holder sorry SMC over equal to go to cactus new holder and convert view dot yeah okay so if we convert view is mall I'm going to inflate the layout and we're going to set these values and we go to set by we going to call the MP will go to Costco abused or said type to this view holder now if we convert view is equal to know then we'll call this line which will do this widget whoo which the reason why we do this so that we don't have to call the we have to do so many five you bicycles which will reduce the more consumption and that exactly what with what they're saying right here so if you hold objects for each of the component views inside this tag fields of the layout so you can immediately access them without the need to move them off repeatedly okay so first you need to create a class to hold it the extraction of new social values on that so that's basically the reason why was needed to holder let's go back to those to avoid it here so we have right here now we're done with this or don't worry doctor next is we need to go to the main activity and willing to set the adapter to the ListView so before we start we do MLS by adapter and recall it M Y adapter equal to new my adapter so you can see that it is asking us to provide these three values the contacts which is in our case main activity the country name which is one we have right now and the country's life for the student so first is main activity of this the country names and then country flags so this continues and contacts are the ones on top here that the names are in countries like next is I'm going to set the adapter to the list so y5m with you set adapter and that is my adapter okay alright so let's give it a run okay so the app is running all right so we have the flags and we have this X Q so we scroll okay so you might you might notice the fast scrolling or no lagging you're actually because why because we have like a small list but I want to see you work with the useless then you will see you will not be sorry the difference now we have me the country's up slabs I've seen I forgot to set the equator for the title of the app so it's over so we'll do that later on next thing we do is I want to send along our to click listener for the missiles that will allow the user to let's gonna click I go to the second activity so let's go down so here's a toolbar go to set the name M and so on so butter set cycle turns on CBS oh yes trillions of those things are happening well now set the happening inside toolboxes place next thing is I'm going to set alone item click functional for the missile that will allow the user to click on the items inside the base to move to another clip for my co dot set on item code business you know on item click listener that's right now here inside on item click method I'm going to start a new event and before I do that let's create a new activity so click on Java and then I lay up your package and right click choose new and look for the activity that's one and some like empty activity so I'm going to call this second on estate detail activity these are activity and click on finish so I have a detail activity right here next thing is if we open up the simply layout go back attacks I need to add the toolbar so let me just copy it from here copy there okay let me just get rid of seen things we don't need that I'm going to fast-paced it was here let me add a namespace that's added and I'll change the toolbar ID to - bot - for simplicity and then I'm going to add an image view so for the image view and that's straight from the inside here so this is the image view and I'm gonna collapse pulling in the sensor and the top then I'm going to choose ICMS as you default icon and let's check the text and what don't need anything - bar bar should stop okay in the field okay that should be fine alright so let's go to a minute Timothy like here and okay let me just close this so if I don I do click over to start anew at that place again and again equal to you again and main activity of this and the next package will be detail activity log class so doing this is enter the session I'm going to pass two values the first thing is the country name and the countryside I'm going to call this country name and that will be country name and gonna pass in the position so now okay is I so how do I know the position that the solution was here where his position of the item is start doing this so what I'm going to use the click on item in for the list so then I get the position I'm going direct that users to this detail activity I'm going to the same thing for for the other for the country flag for this country country flag and this will be country ranks the parking position I max and will start at 15 so stocks activity and we're passing a tenth that's great I have to go back to the detail activity for slash here I'm going to set a toolbar with just waited that's when we were slated for toolbar and toolbar and I'm going to create another image view and a few and in this view I'm going to sell toolbar so just gonna copy this and change ID so these are thinking spaces right here and so bar to bar that will be 2 over 2 and then you compare in a food market disk that will be image new case the casting - mhm view and the idea will be image view to equate now we need to check for the bundle so bundle and bundle up toy boy toy boy it's bundle and bundle it goes to get xn dot yes extra since we are passing data between the main activities to this activity I need to check what was the bundle is null or not so if n random is not equal to will not equal to null then inside here I'm going to set the toolbar so I'm going to the title of the country - toolbox m toolbox for search console and I will be M bundle dot yes 3 get princess cookie how do I hire the key the key is right here that's one of the greatest country name that means that we'll fix that right here so we have a country name next is the image field so an image the image by mother asking which method should I call image bitmap drawable resource we have so many well now to use results why because if you go back to the main activity here what if we have the drawable right here I'm actually passing for focusing and don't actually give a unique ID for each for each global and federal project right so what we can do is we are actually passing the yes we are passing that unique ID through the put extra mess and then if we go back to the interactivity I'm going to call any image view to embrace resource and that resource is risk the example integer value which is a unique ID so how do we get a unique ID well we do M bundle don't get end because we're expecting an integer value and then for the shrinking that would be in country slang for copy that was actually in Turkey material class and paste it like that so we have the toolbar where the title of the country the toolbar and wasagadave country / to the image view so let's run the app alright so we have the list which we have the say the app name shown in the toolbar now we have a list so let's say when I click on Australia okay so we have the country nation on the toolbar and it has the image right here so go back and I click on Brazil for example I have Brazil and I have this slide right here click on China against China and concern this leg right here so let me just let give you guys a tip on online sometimes and we still might not show up so one of the reason is we usually like tend to forget to set the adapter for the ListView so let's see if we comment this out let's say we come at this up and we want the app so we want to ask you can we will be able to see anything inside listen the list is there but there's nothing inside the list because why we happen sized image co2 adapter the adapter is the one that holds the data please remember that guys the adapter is one of all theatres and the list view is the ones that show that that populates the data from that access and so in the list all so if we don't set this then we're going to have an increased going like this so please don't forget that that's one thing now another thing is if we go back to my adapter the Java sometimes we tend to avoid going to forget to override this method get count the same thing is when you forget this even if we'll get if we forget this but we actually have added the adapter for the list view you will see what happens let's run the app I've commented this out let's open up the emulator you can see right it's an interest in the way I've already set the adapter why this will we comment this out if the angel is because the adapter doesn't know the size of your list so you need to provide the size of the list to be able to show the items inside the ListView so this is the thing that you should not forget so we want to list view okay so open up the animator now it's empty so if you want that again all right there you can see right there country use of the list and click on that goes to the second derivative is there as a country name and dislike so that's my clip for this tutorial I hope you guys enjoyed it if you have any questions or comments please leave them in the comment section below or you can actually email me and you can find my email in the pod section of the channel thanks again for watching and please do subscribe for more awesome videos excuse I promote chicks thanks for watching and happy coding

Channel: Coding Demos

Views: 77,822

Keywords: custom listview, listview with image and text, android app development, how to show image in list, listview android studio, listview with images, custom listview android tutorial, android listview custom adapter, android listview from database, android listview with image, listview with image android, android listview tutorial, android listview, android listview adapter, android tutorial for beginners, android application development tutorial

Id: q2XA0Pe2W04

Length: 44min 28sec (2668 seconds)

Published: Sat Feb 18 2017