Custom Listview in android with Images and text using glide library | Custom List view android

hello guys welcome to my channel in this tutorial we are going to learn about custom list view and android i have already created a list view with this image and this title but this is created in a flutter language now we will try to create it in android java so let's start first i will come to this uh android studio file new new project and here i will create an empty project uh empty select and then uh i will give it a name of for flutter like list view or you can simply call it custom list view and android now finish it now it will take some time to create this project so let me request you people if you have not subscribed my channel please subscribe my channel so that my channel can grow and also comment uh what else you want to learn in android in the comments section of this video and do like this video as well so first thing we we want to create a string variable at the top url and i will copy the url from the browser and now i'll paste it in here and now i will put a semicolon here now the second thing is i will create a background task class that will download json from this url so i will create class background task extends as in task and now i will provide some parameters here worldwide and then a string remember this wide is with capital v now it is showing me some error if i click on this it will tell me that implement method so i will implement doing this now we will also work to other methods in the on pre-execute and on first execute now on pre-execute we will show a dialogue to the user that json is downloading so let me create but before creating a practice bar here we have to create in the activity main.xml file first so i will make this textview as a progress bar so i will go to code and here i will name it progress bar now i will give it an id progress bar bar and now i'll go to code and here and this main activity or at the top i will create a progress bar bar progress bar semicolon and now i will initialize it with the bar is equal to progress bar and find view by id r dot id dot progress ba now i will make progress more visible here set visibility visible and now here i will set the visibility to invisible now this is done so we will go to uh let's check the error here is uh we got semicolon here so now i will come to many activity activityman.xml and now i'll go to design you can see that uh the progress bar is showing up so i'll call the code the code and mac visibilitycon i will remove this text and i will make visibility android visibility gone invisible gone now if i come to the design you can't see a progress bar now i'll come to this uh main activity and now um i will create a list view so for that i have to go to in the layout file and drag a list view to the designer now i will pin it to the top side this side as well as bottom now [Music] i'll go to code and give it an id i'll make this match parent and as well as this match parent and i will remove these margins and now if i go to design now i'll go to code again and give it an id id custom list view and now i will go to main activity and here i will create i will connect this java list view to xml list view custom list view now we are good to go now we will write code for json downloading so here first i will create a url java.net url url uh we created at the top this one now now it is showing me an error so i'll click on this and i will surround surrounded with try and catch and this is the now i am creating a http url connection url connection is equal to http you are in connection url underscore java dot dot open connection semicolon now it is also asking for uh surrounding and drawing cage so i will add only a cage clause to this try and catch now we need an input stream reader stream reader is equal to new input stream reader and url connection dot get input stream now we have the input stream so i'll come to this buffer reader is equal to new buffer reader and now i'll pause uh pass stream reader to it now what semicolon now all the json will be downloaded and now we have the all the json in this reader so we will um read uh stream reader line by line from it and then we will append it in a string builder so string builder i will create at the top builder is equal to new string builder and now put semicolon here now here i will create a string called line is equal to empty semicolon now i'll use while loop while and line is equal to reader dot read line and is not equal to null then do what um builder dot append uh a line semicolon and now uh we will print this line and this builder here and log to check if json is downloading or not log.e error comma builder dot 2 string we are converting the builder to string now we have to call this inside this uh on create so i will call new background task dot execute now this will execute this uh as a task class but we need another thing and that is permission so i will use uh internet permission here uses permission and then internet and then close and now let's turn it on our mobile and check the log if it is downloading the json now you can see in the log that json has downloaded successfully and it is showing it here so now we will quickly parse it and then show it and list view so for that i have to come to this return and i will return builder.2 string here so now it returns all the data to this on first execute and that json is now available in this s because we return this builder to string to this unposted execute now here i will uh create uh adjacent array because the first element if i look at the json the first element is a square bracket which means adjacent array so i'll create a json array in here array array is equal to [Music] new jersey and i will pass us into it as a parameter now it is asking me for surrounding try and try and catch so i will surround it with try and catch uh and the second thing is now i have to get rid of each object of this uh json array so for that i will use a for loop the second element is a curly brace which means it is a json object so i'll come here and i will use for loop for and i is equal to zero semicolon is less than array dot length semicolon i plus plus and then curly braces i put it in the wrong place so i'll put this put it here now now here i will create the second element was just an object so i'll create a json object object there's an object is equal to uh as we have this suggestion object in array so we will get this json object from there i get json object at index i okay and now if we look inside this uh json object then we have an id a flower name and then flower image url so now we will get all these three now i will create a strength current strength id 02 uh just an object dot get string and i'll correct some uh id in here this name this name is actually this key is this from the json okay now the second one is a flower name so i'll copy it from here and i'll come to android studio and here i will say string flower name is equal to json object dot get json string and just an object yeah json object dot get yes and string and then i will pass this uh ctrl z z and ctrl v this and shift at the end and semicolon now string flower url is equal to just an object dot get string and the name is flower underscore image we have to surround it in double quotes so i'll surround it flower underscore image underscore url now put semicolon here we have all three of them now i will print them this uh in log and let's see if it is printing i will say names and i'll id id plus plus and here i will put person name plus name uh yeah name and then here we need a plus sign url and space and then plus url and then send a column and now i'll come here and i will remove this so that it is not printed in the login i will rerun the application now let's see if this is printed in the lock kit now you can see that json has downloaded successfully and we have passed them and passed the json this is id and name and we have printed it here so it is printed now we will get we will create a model class for this and then we will create a custom adapter so i will come here i will create a new class new java and model class and in this i would have i will have string id semicolon string image name semicolon and string image url semicolon and now i will come to this code and i will click on this uh generate and i will click on this [Music] okay now we have generated saturn and getters now come here and at the top i will create a list of modern uh semicolon list semicolon and i will attempt to import list and now i'll come down to this and post execute and before this uh i will initialize this list uh list is equal to new array list and now semicolon now i will create a model object here so model m is equal to new model uh semicolon and now i will add all these three properties in model m dot set id id m dot set name um flower name and m.set image url so flower url okay now i will add this into list list dot add m okay now uh as this for loop is going uh all these properties will be added into this list now we have to create a customer doctor so for that i will create a new java class and here i will create a new class called custom adapter and now it will extends array array doctor and of type model okay now it is asking me to implement create constructor so so i will use this one okay now i will create another gate count and also i will create git view now i have to create a custom view here in the layout so i can call this new layout resource i can call this item our row because it will represent each row okay or each item now and make this uh uh okay constraint level is fine so i'll go to design and i will use an image view okay and i will use map map and ic launcher okay now i will pin it to the top from top it will be 10. and to this side as well on this side it will also be apparently it is 7. so i make this 10 now i will increase its size to somewhat let me go to code and width is 150 to dp to 100 dp 100 dp and now i will create a text view so i'll go to design and i will get a text view here is text text view so i'll send it to this side and it will be 10 from this side and i will click on this and i will pin it to this side as well as to the top of this image view so it will remain in the center of this image view now we have created this so i am going to go to give it ids so title txt and flower underscore image now this is complete so i will go to customer doctor and here i will create a view view is equal to convert view semicolon and now the next thing i'm doing is creating a context in this class here and a list so context context and semicolon and list of model model and this will be list um semicolon and this will be also a list of models and make some space here now context this dot context is equal to context semicolon this dot list is equal to objects semicolon now the next thing we are doing is because come to this git view method we are getting layout inflator service and inflator is good to lay out and later context dot get system service uh context this contains it with a capital dot layout inflatable service now we got the inflator service so our view is now equal to view is equal to inflator dot inflate row or dot layout dot row comma null semicolon now we will find the text view because now this view is equal to this layout row.xml so we will find the textview from it textview title txt is equal to view dot view text view view find view by id r dot id dot title txt semicolon and image view image view is equal to text view actually it is image view image view view dot find view by id r dot id dot image flower image semicolon now this is done so the next thing we are doing is uh is to create um is to uh get the data from this list that we will pass in the constructor of this uh customer doctor uh and show it in this text view and image view so title text dot set text is equal to uh is list dot get uh position dot image name okay now image name not image name but yes image name and for the downloading the image from the url we will use a library called glide so i'll come to this browser and search for glide glide library and now we will go to this glide and now here will come and i will copy these two lines and i'll come to this list view and i'll paste it in this gradle build module and depends density section now i'll ctrl v this and same place now if it is successfully sent then we will go to this and we will go to the using section so i'll copy this this is the usage because we have an image view and we have to download that in this now it is configured successfully so i will come to this custom adapter and now i will control v this and our this is the image view this one and now i will pass the url which is the image url i will get it from this list list dot get position dot image url and now i will enter alt enter 2 now glide is uh it cannot uh recognize this so i'll pass the context so context okay now i will return this view here and now we are good to go i will come to this main activity and i'll come out of this and here and here i will pass create the object of customer doctor custom adapter adapter is equal to new custom adapter so it will take uh three things the context so the context says main activity we are in the context of many activities so we i will call my activity that this the end resource or that layout dot lay out dot row and the list we have created it and we have populated it here this is the list that we created and this is the here it is populated with models and now we are passing this to this customer doctor which is getting it here in this constructor here now what is okay now i'll come again to this my nativity and now i will list view dot set adopter adopter now i will run this and let's see that it is working or not now you can see that the image are downloaded and you can see the title at the top so uh let me fix this uh issue and show this started at this side of this image now this is trix view so i'll uh pin it to this side and now i'll pin it to the top and now i'll pin it to the bottom of the same view so now it will keep it simple at the middle of this and now let's turn it again and let's check if it is good now it is running again and now it is looking good uh if i scroll it and now it is looking good now i will put a click event on each item of this uh list view and we will get this titan from it and show it in a toast so for that i will go to main activity and here we created this list view here i will add a click listener to this so i will use list view list view dot set [Music] now we have to get the title this title from the this text view so actually it is present at a position are at this item so i will say text view text view is equal to text view u dot find r dot id dot title text semicolon and now i will create a string title is equal to text view dot get text dot to string semicolon and now i will show it in a toast toast so title is plus title now if i run this again and now if i click on this item here you can see title is blooming and if i click on this morning view you can see that it is mom and do and if i click on this yellow tube title is yellow tv so that's all for today i have created this uh usually people created uh create an item click listener in adopter but uh i like it this way in the main activity so i hope you like the video if you like the video please subscribe to my channel because i need your love and support for this channel please guys if you are looking or you are watching please subscribe like and comment any topic that you think is uh good and challenging so do comment it in the [Music] comments section so i will try my best to create a video on that thank you

Channel: Programming Guru

Views: 150

Keywords: Programming Guru, Guru Programming, programming, gurru, programminggurru, custom listview, custom listview android, custom listview android studio, custom list view control, custom listvew with images and text, android list view

Id: swJLd8GRTUk

Length: 40min 47sec (2447 seconds)

Published: Wed Jul 21 2021