Android ListView Tutorial With Example For Beginners

Today’s Android ListView Tutorial With Example is for beginners.

Listview enable us to display a list of vertically scrollable items.

ListView automatically inserts the data item into the list from data source using adapter.

Adapter helps listview to pull out the data from data set like arraylist or database query.

ListView creates separate row for every data entry. Each row will have the same or different layout according to coding lines.

But number of UI widgets remains constant.

For example, in the row view, you have added two textviews and one imageview.

Now every row of listview will have two textviews and one imageview but text and image can be different.

Similarly, we can put different textColor, textSize, background color in rows of listview.

Basic example of listview in android device is the contact book application.

You have seen that all the contacts like set in the list and you can click on any row (contact) to move to the next activity.

Adapter in ListView

Primary task of the adapter is work as bridge or connector between the data source and listview.

Adapter takes out the single data item from data set and sends it to the listview.

Listview will create the single row item using that specific data item.

Later in this tutorial, we will see about arrayadapter and base adapter with example in android studio.

XML Writing for ListView

For adding listview in our activity or fragment, we need to write it in the XML file as the below

Whenever we want to use listview, we need to define it in XML like the above.

However, we can change the attributes values as per the requirements.

Now let us see the various attributes and it’s usage one by one.

1. android: id=”@id/listView

Every person have their name and surname which act as that person’s identity.

For listview, id works as an identity for listview.

You need to define this property in the XML code.  ID of listview should be the unique in the whole android studio project.

2. android: divider=”#fff”

divider defines the divider between two row items of the liistview.

It creates the horizontal line with the color value given in the property.

3. android: dividerHeight=”5dp”

This property defines the thickness of the divider line.

Unit of this attribute can be in dp(density pixel),sp(scale independent pixel) or px(pixel).

The higher the value, more thickness divider will get.

4. android: clickable=”true”

It will allow us to decide whether to make our listview clickable or not.

clickable parameter can have two values : true or false

If true, then listview clickable and click event defined in the Java will be run.

But if false, then user won’t be allowed to click on listview.

Methods of ListView

Below are the methods which are in built in the android system.

1. setAdapter(ListAdapter adapter)

This method will set the adapter to the listview.

In the parameter, we need to pass the object of the adapter class.

See the below code snippet

2. setDividerHeight(int height)

Use this method to set the divider height of the listview programmatically.

In the parameter, you need to pass the value of the divider height in the integer format.

3.  addFooterView(View v)

This method helps to give a footer view to the listview.

You need to pass the object of the View in the paramter.

Footer will stick at the bottom of the listview.

Source code for footer is as below

4. addHeaderView(View v)

Similar to addFooterView() method but it will add header at the top of the listview.

You need to give a view in the parameter.

Header and footer views are not updated with the updation in the listview.

You need to update it with extra coding lines.

5. getAdapter() 

Use this method to get the adapter associated with the listview.

6. getFooterViewsCount()

Returns the number of footer views in the list.

7. getHeaderViewsCount()

It will give the number of header views in the list.

8. removeFooterView(View v)

This method removes a previously added footer view.

After removing, footer view you can again call addFooterView() method to add footer again.

9. removeHeaderView(View v)

Removes a previously added header view.

10. setDivider(Drawable divider)

Sets the drawable that will be drawn between each item in the list.

For making a color as a divider, you need to convert a color into drawable first.

Click Event of ListView

Android gives us in built method to handle the click events of the listview.

This click listener method also return us the position number of row, which was clicked.

Consider the below code snippet

Compiler will run the above code when the user clicks any row of the listview.

When click event takes place, compiler will show one toast.

This toast will have value like “Clicked: 1” ,if user have clicked on the second row of the listview.

Examples of ListView

Let us create two examples of listview.

In the first example, we will use the arrayadapter.

Step 1. Layout making

In the activity_main.xml file, add the following code

one listview is there in the main layout file.

Now make a new XML resource file in res->layout directory.

Name of this file should be array_list_item.xml

Write the below source code lines in array_list_item.xml file

There is one textview and one simple view is there.

Textview will get the names from the data source while simple view will work as the divider of listview.

Step 2. Code for Main files

In the MainActivity.java file, add the below code

I have written one string array named “myImageNameList.”

This string array holds the names of the vehicle companies.

Now let us watch the arrayadapter code.

I have make a new object of array adapter. First parameter is context.

Second is the reference to the array_list_item.xml file.

Third parameter have the id of the textview and last one is the data source which is our string array.

Following images are the output of this example.

android arrayadapter
Example With Custom Adapter and Image

Step 1. XML files writings

Make a new project in android studio.

Now in the activity_main.xml file, add the below source code

Just one listview in the main layout is there.

Make a new XML layout resource file and have it a name lv_item.xml

Write down the below code in the lv_item.xml

This file is the core view file for the listview.

Adapter will use this file to make the layout of the each cell of the listview.

I have written single textview and imageview in this file.

Click the following link to download images.

download demonuts_images_listview

After downloading the images, copy them into the res->drawable directory.

Step 2. Model and Images

Now make a new JAVA class and name it as ImageModel.java

Code block for ImageModel.java is as the following

This file has mainly two variables.

One is string variable and another is integer, which will hold the reference of the images present in the drawable folder.

Getter and setter methods for both of this variables are also there.

Step 3. Adapter and Main JAVA classes

Now we will create the adapter class here. Prepare a new JAVA class called CustomeAdapter.java

Copy the following code in CustomeAdapter.java

You can see that I have made a custom adapter by extending the base adapter.

I have also override the methods of base adapter like getCount(), getView(), getItem(), getItemId() etc.

Finally, code block for MainActivity.java is looking like the below

Here, I have created the object of the CustomeAdapter class.

After attaching this object with listview, we will be able to populate our listview with image and text.

After this much work, when you run the app, you should get the below output

android baseadapter

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *