CODEWITHSUNDEEP
androidlistviewimageview
Naveen
Naveen

Reputation: 1060

Display Pictures in Listview - Android

I've a ListView in my app.. The ListView can contain text, images or both. If there are images, I want to display the text in the first line and show the set of images in the next line.. Which one should I use?? ViewFlipper or ViewPager or anything else? I have been looking around for examples on how to do this.

Any pointers would be quite helpful!!

Thanks.

EDIT: I want to display text in the first line and list of Pictures (3-5) in the second line in the listview

Upvotes: 2

Views: 1565

Answers (2)

bourax webmaster
bourax webmaster

Reputation: 733

Creating a ListView with pictures has 3 main parts: 1- creating a simple listview in the main layout

2- creating a custom listview item layout:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal" >
<ImageView
 android:id="@+id/img"
 android:layout_width="50dp"
 android:layout_height="50dp"/>
 <TextView
 android:id="@+id/txt"
 android:layout_width="wrap_content"
 android:layout_height="50dp" />
</LinearLayout>

and then create a custom ListView class:

private final Activity context; // the context view of the list
private final String[] countries; // the list of countries
private final Integer[] imageId; // the list of images that you already uploaded to your @Drawable file (res/drawable-xdpi/)

a constructor comes after that to create the customView object:

//class constructor
public CustomList(Activity context,String[] countries, Integer[] imageId) 
{
super(context, R.layout.list_item, countries);
this.context = context;
this.countries = countries;
this.imageId = imageId;
}

The customView class has a getView method that returns the item view:

@Override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.list_item, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);
ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
txtTitle.setText(countries[position]);
imageView.setImageResource(imageId[position]);
return rowView;
}

and finally create the adapter for your list in the mainActivity:

 yourList.setAdapter(new CustomList(MainActivity.this, countries, imageId));

you can see the full sourceCode and download it here here

Upvotes: 0

Wenger
Wenger

Reputation: 989

If you're using a custom adapter, which I assume you are, then you have to feed some kind of array into it. I don't think you can add another row to a ListView from within the adapter itself, so I would consider parsing through the array, or whatever data you're using to populate your listview. From that, create another array that has a separate entry for the text and image set (if it exists). Then feed that final array into the adapter. Using a JSONArray with JSONObjects might work better because then you can set labels for all the entries.

Then, inside the adapter in the getView() method, check to see if the entry type is text, or images, and change which xml layout it inflates based on that. Or you could use the same xml and control the different views with setVisibility().

If you want to make the images scroll horizontally within their list item, you may have to use a HorizontalScrollView. I haven't ever used it, but I know it might give you some issues with having that scrolling element inside the other scrolling element (the ListView).

Upvotes: 1

Related Questions