ListView with Images and Text

Reading Time: 5 minutes

In this tutorial it is explained how to insert ListView with Images and Text in Android app. ListView with Images and Text is very handy user interface for Android app. First, let’s add ListView container in content_main.xml.

So we have it.

Keep relative layout, layout_width, layout_height and change id to list.

Go to MainActivity.java and change AppCompatActivity to Activity {
And also delete methods onCreateOptionsMenu and onOptionsItemSelected

Delete toolbar code in onCreate method:

What we can do now is to prepare images and save them in app→src→main→res→drawable to have them ready for use.

Then expand the existing code in MainActivity extends Activity
with:

ListView listView;
String[] str_choice = {“Camera”,”Map”,”Comment”,”Send”};
Integer[] int_image = {R.drawable.camera,R.drawable.pin,R.drawable.pencil,R.drawable.paperplane};

Now, add one more layout that will keep one image and one text in a row.

Letters must be lowercase:

Now, in layout, change LinearLayout to TableLayout. Define layout_width=”match_parent”
android:layout_height=”match_parent” >

Then insert  <TableRow> </TableRow>
And define row content:

<TableRow>

<ImageView

android:id=”@+id/image“

android:layout_width=”80dp”

android:layout_height=”60dp”/>

<TextView

android:id=”@+id/text“

android:layout_width=”wrap_content”

android:layout_height=”60dp” />

</TableRow>

Now, crucial moment is to connect new layout with the rest of the project. For that purpose we need to have additional java class that will do connection job.

Give it some name.

Let’s modify class constructor first:

Then in the bulb choose ‘Create constructor matching super’.

public MyLayoutConn(Context context, int resource, int textViewResourceId) {

super(context, resource, textViewResourceId);

}

Then change Context to Activity, int resource to String[] str_some_choice, int textViewResourceId to Integer[] myImageID,
super(context, resource, textViewResourceId)
to
super(context, R.layout.mylayout, str_some_choice);

Above declare:

private final Activity context;
private final String[] str_some_choice;
private final Integer[] myImageID;

and bellow define:

this.context = context;
this.str_some_choice = str_some_choice;
this.myImageID = myImageID;

In order to map ImageView and TextView from new layout (mylayout.xml in this example) we need to have one public View method:

public View getView(int position,View view,ViewGroup parent){
    
}

We need now one LayoutInflater,

LayoutInflater inflater = context.getLayoutInflater();

and one View for rowView,

View rowView = inflater.inflate(R.layout.mylayout,null,true);

and one more TextView:

TextView txtChoice = (TextView)rowView.findViewById(R.id.text);

In here, TextView txtChoice is mapped on id text in mylayout.xml (take care that this id is not offered by default).

Let’s now map image from new layout as well.

ImageView imageView =(ImageView)rowView.findViewById(R.id.image);

Now we need to set text on txtChoice.

txtChoice.setText(str_some_choice[position]);

And need to set particular image:

imageView.setImageResource(myImageID[position]);

Once when we set particular text and image, we can return view.
return rowView;

Whole code is:
public class MyLayoutConn extends ArrayAdapter<String> {

private final Activity context;

private final String[] str_some_choice;

private final Integer[] myImageID;

public MyLayoutConn(Activity context, String[] str_some_choice, Integer[] myImageID) {

super(context, R.layout.mylayout, str_some_choice);

this.context = context;

this.str_some_choice = str_some_choice;

this.myImageID = myImageID;

}

public View getView(int position,View view,ViewGroup parent){

LayoutInflater inflater = context.getLayoutInflater();

View rowView = inflater.inflate(R.layout.mylayout, null, true);

TextView txtChoice = (TextView)rowView.findViewById(R.id.text);

ImageView imageView =(ImageView)rowView.findViewById(R.id.image);

txtChoice.setText(str_some_choice[position]);

imageView.setImageResource(myImageID[position]);

return rowView;

}

}

We can finalize coding. Go to onCreate method in MainActivity class. Now, prepare one object of  MyLayoutConn  that will have role of an adapter.

MyLayoutConn adapter = new MyLayoutConn(MainActivity.this,str_choice,int_image);

Since we have already declared listView, we can define it now.

listView = (ListView)findViewById(R.id.list);

Now we can set adapter to the listView.
listView.setAdapter(adapter);

Final step is to add setOnItemClickListener method

MyLayoutConn adapter = new MyLayoutConn(MainActivity.this, str_choice, int_image);
listView = (ListView)findViewById(R.id.list);

listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Toast.makeText(MainActivity.this, “You choosed: ” + str_choice[+position], Toast.LENGTH_SHORT).show();

}

});

So whole code is:

public class MainActivity extends Activity {

ListView listView;

String[] str_choice = {“Camera”,”Map”,”Comment”,”Send”};

Integer[] int_image = {R.drawable.camera,R.drawable.pin,R.drawable.pencil,R.drawable.paperplane};

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

MyLayoutConn adapter = new MyLayoutConn(MainActivity.this,str_choice,int_image);

listView = (ListView)findViewById(R.id.list);

listView.setAdapter(adapter);

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

Toast.makeText(MainActivity.this, “You choosed: ” + str_choice[+position], Toast.LENGTH_SHORT).show();

}

});

}

}

External links:

ListView with Images and Text on learn2crack
ListView with Images and Text on androidinterview
ListView with Images and Text on YouTube
ListView with Images and Text on YouTube
ListView with Images and Text on YouTube