ListView with Images and Text

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.

ListView-Content-Main-XML

So we have it.

ListView-in-Android

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

ListView-text

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

Delete-onCretaeOptionsMenu-ItemSelected

Delete toolbar code in onCreate method:

Delete-toolbar

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

Save-Imges-to-Drawable

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};

String-and-Image-id-Arrays

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

Layout-new-Layout-resource-file

Letters must be lowercase:

mylayout
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>

TableRow-ImageView-TextView

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.

New-java-class-for-Layout-Connection

Give it some name.

New-java-class-for-Layout-Connection1

Let’s modify class constructor first:

Create-new-class-extends-ArrayAdapter

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

Choose-Super-Class-Constructors

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;

MyLayoutConn-Constructor

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).

id-text-TextView-Mapping

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;

}

}

getView-method-code

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:

MainActivity-ListView-whole-Code

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

 

Posted in android Tagged with: ,

Leave a Reply

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

*