Previous Next In previous post, we have seen simple android ListView example. In this post, we are going to see Android Custom ListView example. So we will create custom ListView in which each list item will have Country flag, Country name and its capital in different font size as below. It is widely used in android apps to list number of items and select one or more items from the list. Imagecursor = context.getContentResolver.query(MediaStore.Images.Media.EXTERNALCONTENTURI, columns, null, null, orderBy); Since you are storing your images in the internal phone storage, you should probably be using MediaStore.Images.Media.INTERNALCONTENTURI, at least. I also notice you're using getThumbnail. This will only work with.
Adapter Tutorial With Example In Android Studio
In Android, Adapter is a bridge between UI component and data source that helps us to fill data in UI component. It holds the data and send the data to an Adapter view then view can takes the data from the adapter view and shows the data on different views like as ListView, GridView, Spinner etc. For more customization in Views we uses the base adapter or custom adapters.
To fill data in a list or a grid we need to implement Adapter. Adapters acts like a bridge between UI component and data source. Here data source is the source from where we get the data and UI components are list or grid items in which we want to display that data.
Below is a conceptual diagram of Adapter:
Table Of Contents
Adapters In Android:
There are the some commonly used Adapter in Android used to fill the data in the UI components.
- BaseAdapter – It is parent adapter for all other adapters
- ArrayAdapter – It is used whenever we have a list of single items which is backed by an array
- Custom ArrayAdapter – It is used whenever we need to display a custom list
- SimpleAdapter – It is an easy adapter to map static data to views defined in your XML file
- Custom SimpleAdapter – It is used whenever we need to display a customized list and needed to access the child items of the list or grid
Now we describe each Adapters one by one in detail:
1. BaseAdapter In Android:
BaseAdapter is a common base class of a general implementation of an Adapter that can be used in ListView, GridView, Spinner etc. Whenever we need a customized list in a ListView or customized grids in a GridView we create our own adapter and extend base adapter in that. Base Adapter can be extended to create a custom Adapter for displaying a custom list item. ArrayAdapter is also an implementation of BaseAdapter.
Custom Adapter code which extends the BaseAdapter in that:
In above code snippet we see the overrided functions of BaseAdapter which are used to set the data in a list, grid or a spinner. These functions are described in BaseAdapter tutorial with example.
2. ArrayAdapter In Android:
Whenever we have a list of single items which is backed by an Array, we can use ArrayAdapter. For instance, list of phone contacts, countries or names.
Here is how android ArrayAdapter looks ::
The above function are described in ArrayAdapter tutorial with example.
3. Custom ArrayAdapter In Android:
ArrayAdapter is also an implementation of BaseAdapter, so if we want more customization then we can create a custom adapter and extend ArrayAdapter in that. Since array adapter is an implementation of BaseAdapter, so we can override all the function's of BaseAdapter in our custom adapter.
Below Custom adapter class MyAdapter extends ArrayAdapter in that:
These functions are described in Custom ArrayAdapter tutorial with example.
4. SimpleAdapter In Android:
In Android SimpleAdapter is an easy Adapter to map static data to views defined in an XML file(layout). In Android we can specify the data backing to a list as an ArrayList of Maps(i.e. hashmap or other). Each entry in a ArrayList is corresponding to one row of a list.
The Map contains the data for each row. Here we also specify an XML file(custom list items file) that defines the views which is used to display the row, and a mapping from keys in the Map to specific views.
Whenever we have to create a custom list we need to implement custom adapter. As we discuss earlier ArrayAdapter is used when we have a list of single item's backed by an Array. So if we need more customization in a ListView or a GridView we need to implement simple adapter.
SimpleAdapter code in Android:
The above parameters of a simple Adapter is described in SimpleAdapter tutorial with example.
5. Custom SimpleAdapter In Android:
Whenever we have to create a custom list we need to implement custom adapter. As we discuss earlier ArrayAdapter is used when we have a list of single item's backed by an Array. So if we need customization in a ListView or a GridView we need to implement simple Adapter but when we need more customization in list or grid items where we have many view's in a list item and then we have to perform any event like click or any other event to a particular view then we need to implement a custom adapter who fulfills our requirement's and quite easy to be implemented.
BaseAdapter is the parent adapter for all other adapters so if we extends a SimpleAdapter then we can also override the base adapter's function in that class.
Important Note:We can't perform events like click and other event on child item of a list or grid but if we have some requirements to do that then we can create our own custom adapter and extends the simple adapter in that.
Custom Adapter extends SimpleAdapter in that:
The above overrided functions of simple adapter are already described in Custom SimpleAdapter article.
Adapter Example In Android Studio:
Below is the Android Studio example which show the use of the Adapter in Android. In this example we display a list of fruits names with images by using SimpleAdapter and whenever user click on a list item the fruit's name displayed in a Toast.
Below you can download complete Android Studio code, see final output and read step by step explanation:
Step 1:Create a new project and name it SimpleAdapterExample.
Step 2: Open res -> layout -> xml (or) main.xml and add following code :
In this step we open an xml file and add the code for displaying a ListView by using its different attributes.
Step 3: Save fruit images in drawable folder with name apple, banana, litchi, mango and pineapple.
Step 4: Open src -> package -> MainActivity.java
In this step we add the code for initiate ListView and set the data in the list. In this firstly we create two arrays first for fruit names and second for fruits images and then set the data in the ListView using SimpleAdapter.
Step 5: Create new layout-> rec-> layout-> list_view_items.xml and add following code:
In this step we create a xml file for displaying ListView items. In this xml we add the code for displaying a ImageView and a TextView.
Output:
Now run the App and you will different fruit names listed in ListView. Here we used Simple Adapter to fill data in ListView.
Continue Reading:
In this article we will create an android application with a listview which holds both text and images as listview items.
An extension to this article is available in the article titled 'Android ItemClickListener for a ListView with Images and Text', where an item click event handler is added.
For loading images and text from Internet , see the article titled 'Android Lazy Loading images and text in listview from http json data'.
1. Create an Android project namely 'ListViewWithImagesAndText'
Figure 1: Create new Android Project2. Select build target
Figure 2: Select Build Target3. Enter application details
Figure 3: Application Details4. Download and extract the zip file containing flag's images to the directory /res/drawable-ldpi
5. Open and update the file /res/layout/main.xml with the given below code
6. Create a new file namely /res/layout/listview_layout.xml and update the content with the given below code
7. Open and update the file /src/in/wptrafficanalyzer/listviewwithimagesandtext/MainActivity.java with the given below code
8. Run the application
Figure 4: Application in Execution9. Download the source code
ListView with Images and Text 187.83 KB10. Reference
http://developer.android.com/guide/index.html
How to hire me?I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
Ready to test your knowledge in Android? Take this quiz :
Tags:image, ImageVIew, listview, SimpleAdapter John on September 3, 2012 at 11:37 pm
Hello, this is a very good example, but how could I do it if the images are not resources in the project?? I mean like a Bitmap or something.
Thanks.
Replygeorge on September 5, 2012 at 11:49 amIn the following article, we have discussed how to load sdcard images in a list view. Loading ListView with SDCard Thumbnail Images and displaying its Title, Size, Width and Height by merging cursors using MatrixCursor
Reply John on September 5, 2012 at 10:42 pmHello, and what if I want to show some pictures I have downloaded from internet and are stored in a list?
I'm trying to show some news downloaded from a rss source and every news contains a picture, and I would like to show it, but no results until now, only text is shown.
How could I do it??
Reply John on September 6, 2012 at 2:28 amNever mind, I got it. ;-P
Reply Dan on December 16, 2013 at 8:51 pmHi John, could you let me know how you did it?
Thanks
Muhammad Ifthikhar on February 15, 2015 at 5:12 pmWonderful tutorial.
Thanks
very helpfull!
thanks you very much
Great tutorial! By far the easiest one to understand. Thanks!
Reply Android Rao on September 12, 2012 at 12:24 pmThis is great tutorial, ss there any further enhancement to this utility on when list item click?
Thanks.
Reply Dexter on September 26, 2012 at 10:34 pmExcellent tutorial for beginners
Reply Arief Rivai on September 30, 2012 at 7:22 pmWow. Thanks for great tutorial.
But how to implement OnClickListener in this code? I tired to try I hope u help me. Thanks@ https://downjfiles486.weebly.com/3-reel-free-slot-games.html.
ItemClickListener is added to the listview and is available in the article Android ItemClickListener for a ListView with Images and Text
Reply ines on October 8, 2012 at 5:15 amgreat tutorial but how can i display pictures coming from server (located in a folder) and just their id whitch are saved in a database mysql???
I want find out how can i use a web service for creating a table sqlite in android to synchronize with the table mysql and display with her all my pictures!!!!!!
HELP ME PLEASE !!
very helpful…for me
Reply Friend from VietNam on November 17, 2012 at 8:11 pmThank for your tutorial. it realy good example for custom listview. But I have a problem. When I get information from SQLite via Cursor, and send it to arraylist. With 'country' and 'currency' list, I can do it, but 'flag' is can't. In my roject I custom it like 'image Avatar', 'Name'and 'type'. Type maybe is: bar, coffee or restaurant. If type is bar, image Avatar will be show 'bottle of beer', and if is coffee, it show 'coffee cup', like this for bar.
So, how I can do it? Please help me.
.
Hieu Nguyen Trung
Thank you George…. It helped for me…
Reply Gui on January 1, 2013 at 11:47 pmThanks for this tutorial, it helps a lot.
Adobe xd cc 18 0 12 9. I thought it wasn't possible to use a simpleAdapter with images because of the following text in the documentation:
'
constructor parameters:
to [..] These should all be TextViews. [..]
'
Where's the magic? Is it a mistake in the documentation?
Reply kalpesh patel on January 25, 2013 at 12:28 pmhow can we add two or more images in listview???
Reply androtition on February 4, 2013 at 4:23 pmGreat tutorial, Now If want to delete some particular row then how's that possible??
Reply Prakash Gavade on March 24, 2013 at 5:09 pmGreat Tutorial helps me lot….Thank You very much….
Reply Sergey Danilov on March 28, 2013 at 6:03 pmVery good lesson!!! The large thank.
Hi from Russia.
Really helpfull tutorial. Thank you very much.
Reply Ricardo on May 9, 2013 at 3:47 amFirst things first: thanks for this great tutorial!
Second: I have adapted the code for my android app, but I am faced with a small problem: text gets cut off, since the text string is variable. Would know how to solve this problem? Or point me in the rigth direction (web content, etc… xD)?
Cheers from Portugal
Ricardo
I forgot to add:
In listview_layout.xml, if i change the orientation i get the following results:
android:orientation='vertical' image is displayed over the text, but text is presented correctly (without being cut off).
android:orientation='horizontal' image is displayed to the left of the text, but text is presented incorrectly (cut off).
The goal is to the image to be displayed to the left without getting cut off xD
Reply Tachikoma on May 15, 2013 at 3:46 amThanks, this is a straight forward example.
Reply Triston on May 23, 2013 at 10:38 pmWOW thank you SOOOO much for the lesson
Best and easiest way to get images and text into listview
Best of luck for your future
T
Best Ever
Reply sanjay on June 7, 2013 at 12:55 pmHi george i want know how can i show different different text along with country information at bottom of imageview whenever clicked by any user and also i want know i have take imagebutton on right of text view and i want call new activity how can i do plz let me know reply soon………….
Reply Niju on June 15, 2013 at 10:23 amHey your code worked properly.Next thing I want to know is to how to put the strings below the images,I want to display the list view as an image and the text as up and down.pls reply….
Reply Miiro Bels on June 26, 2013 at 1:21 pmAdapter Images Android Download
how do you implement selected item like i want to select china. how do u implement that coz i have faile
Reply Jorari71 on July 14, 2013 at 3:38 am
Hi!.
I was trying to add 2 buttons per row/item in my ListView taking your example as base and I don't know why I click/tap on the buttons I've added and they don't give me any result (Showing my println ). Any idea?. Here's my code:
if (convertView null) {
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.list_item, null);
.
.
.
holder.menos = (Button)convertView.findViewById(R.id.buttonmenos);
holder.mas = (Button)convertView.findViewById(R.id.buttonmas);
.
.
.
convertView.setTag(holder);
else{
holder = (ViewHolder) convertView.getTag();
}
}
holder.menos.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
System.out.println('inside the buttonlistener1!!');
}
});
holder.mas.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
System.out.println('inside the buttonlistener2!!');
}
});
class ViewHolder {
Button mas;
Button menos;
int position;
}
class ListItem {
String caption;
Integer images;
}
}
The php code:
$row['countryname'],
‘flag' => $row['flag'],
‘language' => $row['language'],
‘capital' => $row['capital'],
‘currency' => array(
‘code' => $row['code'],
‘currencyname' => $row['currencyname']
)
)
);
}
mysqli_free_result($sql);
header(‘Content-type: application/json');
echo json_encode($currency);
?>
How good and simple example of ListView with image and text.
Thank you so much for this wonderful example.
Reply navya on September 10, 2014 at 5:54 pmHey Nice Tutorial,
Can you tell me how to add different colors as background for each flag?
Thanks
Reply Jafeena Thaha on November 21, 2014 at 4:07 pmVery good tutorial. Worked properly. Thank You.
Reply Umair on December 7, 2014 at 11:19 pmbro i have path of pics .i want to retrive those pics from sd-card folder …and show them on listview …how to do that .i dont have pics in drawable .:( plzplz help bro
Reply saikiran on December 18, 2014 at 12:29 pmThe tutorial is good,But if i click the listtextitem in listView,it must highlight permanently and if i click another text item,the previous item which is clicked must be faded and this clicked text item must be highlighted…
Reply selva on December 27, 2014 at 3:01 pmHey your code worked.while I tried to update the values of adapter getting error.can you help me………
Reply lata on March 3, 2015 at 10:38 ami want code for spinner in custom listview plz help me
Reply mohamed hanifa m on March 23, 2015 at 9:33 pmhow to upload image and text via admin app using php then download by custom list view.
could u explain with including php code
Hi, how to add buttons in each listview row?
Reply Tanya on April 21, 2015 at 4:29 pmYou can Simply add button in the XML layout.
But Its nothing more then a show.
As we are not able to perform any selection operation neither on Listview, Image, Text nor on Buttons.
So In case you get the solution please let me know.
Reply Intan on May 6, 2016 at 9:59 pmHi.do you get the solution yet? im stuck.help me please.
Reply Intan on May 7, 2016 at 9:35 amhi.do you get the solution yet? please let me know.im stuck
Reply Diego on August 26, 2015 at 10:11 amWonderful, pretty clear.
Reply Aditi on February 12, 2016 at 1:10 pmhow to take different images and different text in one row by adding list view
plzzz help me
Reply Aditi on February 12, 2016 at 1:12 pmin xml i have to design plzzz answer me as soon as.
Reply vinodh on March 15, 2016 at 7:34 pmwonderful. can we load the list view from the my sql by using php!!!!!!!
Reply vinodh on March 18, 2016 at 12:51 pmyour tutorial is very helpful to me. if we image and text taken from mysql database using php in list view. how can we implement???? plz help me sir….
.jpg "Adapter Images Android")
Hi!.
I was trying to add 2 buttons per row/item in my ListView taking your example as base and I don't know why I click/tap on the buttons I've added and they don't give me any result (Showing my println ). Any idea?. Here's my code:
if (convertView null) {
holder = new ViewHolder();
convertView = mInflater.inflate(R.layout.list_item, null);
.
.
.
holder.menos = (Button)convertView.findViewById(R.id.buttonmenos);
holder.mas = (Button)convertView.findViewById(R.id.buttonmas);
.
.
.
convertView.setTag(holder);
else{
holder = (ViewHolder) convertView.getTag();
}
}
holder.menos.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
System.out.println('inside the buttonlistener1!!');
}
});
holder.mas.setOnClickListener(new Button.OnClickListener()
{
public void onClick(View v)
{
System.out.println('inside the buttonlistener2!!');
}
});
class ViewHolder {
Button mas;
Button menos;
int position;
}
class ListItem {
String caption;
Integer images;
}
}
The php code:
$row['countryname'],
‘flag' => $row['flag'],
‘language' => $row['language'],
‘capital' => $row['capital'],
‘currency' => array(
‘code' => $row['code'],
‘currencyname' => $row['currencyname']
)
)
);
}
mysqli_free_result($sql);
header(‘Content-type: application/json');
echo json_encode($currency);
?>
How good and simple example of ListView with image and text.
Thank you so much for this wonderful example.
Reply navya on September 10, 2014 at 5:54 pmHey Nice Tutorial,
Can you tell me how to add different colors as background for each flag?
Thanks
Reply Jafeena Thaha on November 21, 2014 at 4:07 pmVery good tutorial. Worked properly. Thank You.
Reply Umair on December 7, 2014 at 11:19 pmbro i have path of pics .i want to retrive those pics from sd-card folder …and show them on listview …how to do that .i dont have pics in drawable .:( plzplz help bro
Reply saikiran on December 18, 2014 at 12:29 pmThe tutorial is good,But if i click the listtextitem in listView,it must highlight permanently and if i click another text item,the previous item which is clicked must be faded and this clicked text item must be highlighted…
Reply selva on December 27, 2014 at 3:01 pmHey your code worked.while I tried to update the values of adapter getting error.can you help me………
Reply lata on March 3, 2015 at 10:38 ami want code for spinner in custom listview plz help me
Reply mohamed hanifa m on March 23, 2015 at 9:33 pmhow to upload image and text via admin app using php then download by custom list view.
could u explain with including php code
Hi, how to add buttons in each listview row?
Reply Tanya on April 21, 2015 at 4:29 pmYou can Simply add button in the XML layout.
But Its nothing more then a show.
As we are not able to perform any selection operation neither on Listview, Image, Text nor on Buttons.
So In case you get the solution please let me know.
Reply Intan on May 6, 2016 at 9:59 pmHi.do you get the solution yet? im stuck.help me please.
Reply Intan on May 7, 2016 at 9:35 amhi.do you get the solution yet? please let me know.im stuck
Reply Diego on August 26, 2015 at 10:11 amWonderful, pretty clear.
Reply Aditi on February 12, 2016 at 1:10 pmhow to take different images and different text in one row by adding list view
plzzz help me
Reply Aditi on February 12, 2016 at 1:12 pmin xml i have to design plzzz answer me as soon as.
Reply vinodh on March 15, 2016 at 7:34 pmwonderful. can we load the list view from the my sql by using php!!!!!!!
Reply vinodh on March 18, 2016 at 12:51 pmyour tutorial is very helpful to me. if we image and text taken from mysql database using php in list view. how can we implement???? plz help me sir….
Reply mansingh on June 11, 2016 at 3:13 amcan posible add radio button single in this code
Reply mansingh on June 12, 2016 at 4:23 pmhow add radio button in this example
Reply rajitha on July 4, 2016 at 6:02 pmHi,
Thanks for the tutorial.
I need help in fetching the image from te mysql database to andoid.I have stored the image in database with the file name of image like flower_veg.jpg.I am not able to fetch the image.Kindly help me in this.
here is the source code : https://github.com/Oclemy/MySQLGridViewMDetail
ReplyLeave a Reply
Adapter Images Android App
Be friend at g+
Adapter Images Android Sdk
Subscribe for Lastest Updates
FBF ▪ Powered by ®Google FeedburnerMagazine Basic theme designed by Themes by bavotasan.com.
Powered by WordPress.
