Android custom listview with images

ListView is a view in which several items can display in vertical scrollable list. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database.For displaying just a text we can use Array Adapter as we already learned in my previous tutorial .But for displaying multiple items in a list item we need to use custom adapters.

In this tutorial we will learn how to implement a listview with custom adapter in which we will be able to display images with text inside a listview. Let us start by creating a new project in android studio.

Note- This tutorial is explained with the example of listing programming languages with logo as images ,so names of the filenames will be matching to that.You can replace with your own names.

Steps

  • Create new project in android studio
  • Add listview to the layout file
  • Create layout of listview item with images
  • Implement adapter for listview
  • How to set adapter with data in listview

Create new project in android studio

Refer Android beginners app development guide if you are beginner or if you don’t know how to create project in android studio.

Add listview to the layout file

For implementing the listview first we need to have the listview widget in our layout file. After creating the project in android studio and if you haven’t changed any defaults an Activity with one layout file will be automatically created. So for displaying listview in your activity just add the following code into your layout file.

<ListView
android:id="@+id/lv_languages"
android:layout_height="wrap_content"
android:layout_width="match_parent">
</ListView>

Create layout for listview item with images

In this step we need to design the layout for listview item. For doing that create a file layout_language_list_item.xml for list item under res/layout/ . This layout will contain an imageview and a textview which should display images and text in each item in a listview.

layout_language_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:id="@+id/im_language"
android:layout_width="60dp"
android:layout_height="60dp"
/>

<TextView
android:id="@+id/tv_language"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"/>

</LinearLayout>

Implement adapter for listview

Since we are implementing custom listview we cannot use default string array adapter which will allow us to set only one string. So we need to create a custom adapter in which will inflate the above layout file . For doing that create a custom adapter class LanguagesListAdapter.java under java/your package/

LaunguagesListAdapter.java

package codes4.com.simplelistview;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.squareup.picasso.Picasso;
public class LanguagesListAdapter extends BaseAdapter{
String [] result;
Context context;
int [] imageId;
private static LayoutInflater inflater=null;

public LanguagesListAdapter(MainActivity mainActivity, String[] prgmNameList, int[] prgmImages) {
// TODO Auto-generated constructor stub
result=prgmNameList;
context=mainActivity;
imageId=prgmImages;
inflater = ( LayoutInflater )context.
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return result.length;
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

public class Holder
{
TextView tv_language;
ImageView im_language;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
Holder holder=new Holder();
View view;
view = inflater.inflate(R.layout.layout_language_list_item, null);

holder.tv_language=(TextView) view.findViewById(R.id.tv_language);
holder.im_language=(ImageView) view.findViewById(R.id.im_language);

holder.tv_language.setText(result[position]);
Picasso.with(context).load(imageId[position]).into(holder.im_language);

view.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(context, "You Clicked " + result[position], Toast.LENGTH_LONG).show();
}
});
return view;
}
}

How to set adapter with data in listview

This is the final step for implementing the custom listview .All you need to do is just copy paste the following code to the activity’s java file.The code is

  • Referring the listview
  • Setting up adapter with data required
  • Setting adapter to listview
package codes4.com.simplelistview;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;
ListView lv_languages;
LanguagesListAdapter list_adapter;
String[] languages = new String[] { "SQL",
"JAVA",
"JAVA SCRIPT",
"C#",
"PYTHON",
"C++",
"PHP",
"IOS",
"ANDROID"
};

public static int [] language_images={R.drawable.sql,
R.drawable.java,
R.drawable.javascript,
R.drawable.c,
R.drawable.python,
R.drawable.cplus,
R.drawable.php,
R.drawable.ios,
R.mipmap.ic_launcher};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

init();
lv_languages.setAdapter(list_adapter);
}

private void init() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Languages");
list_adapter = new LanguagesListAdapter(this,languages, language_images);
lv_languages = (ListView) findViewById(R.id.lv_languages);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Since we are displaying images inside listview it is easier to use some library to have the lazy load feature, Here we are using picasso in the above code and you need to add the following line into your apps build.gradle file

compile 'com.squareup.picasso:picasso:2.5.2'

Output

Now run the project you will get the following output.

android custom list view
android custom list view
 

In my next tutorial i am explaining How to implement listview using cardview

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

2 Comments

Add a Comment

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