ListView with images only

Question

I was just asking myself if there was a way of making a ListView without any texts. I've only found ListViews with images + texts, and that exactly what i dont want. I just want to add a lot of images like in a list and don't want to make it with ImageView because that makes my app crash. Also, i dont want my app to lag. Thanks!

this is what i got in my activity_main.xml

<ListView
android:id="@+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"

/>

and i found this from another post that actually helped me, but it doesnt display all images

public class MainActivity extends Activity {


// Array of integers points to images stored in /res/drawable-hdpi/
int[] vehs = new int[]{
    R.drawable.veh1,
    R.drawable.veh2,
    R.drawable.veh3,
    R.drawable.veh4,
    R.drawable.veh5,
    R.drawable.veh6,
    R.drawable.veh7,
    R.drawable.veh8,
    R.drawable.veh9,
    R.drawable.veh10,
    R.drawable.veh11,
    R.drawable.veh12,
    R.drawable.veh13,
    R.drawable.veh14,
    R.drawable.veh15,
    R.drawable.veh16,
    R.drawable.veh17,
    R.drawable.veh18,
    R.drawable.veh19,
    R.drawable.veh20,
    R.drawable.veh21,
    R.drawable.veh22,
    R.drawable.veh23,
    R.drawable.veh24,
    R.drawable.veh25,
    R.drawable.veh26,
    R.drawable.veh27,
    R.drawable.veh28,
    R.drawable.veh29,
    R.drawable.veh30,
    R.drawable.veh31,
    R.drawable.veh32,
    R.drawable.veh33,
    R.drawable.veh34,
    R.drawable.veh35,
    R.drawable.veh36,
};


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Each row in the list stores country name, currency and flag
    List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();

    for(int i=0;i<10;i++){
        HashMap<String, String> hm = new HashMap<String,String>();
        hm.put("vehs", Integer.toString(vehs[i]) );
        aList.add(hm);
    }

    // Keys used in Hashmap
    String[] from = { "vehs","txt","cur" };

    // Ids of views in listview_layout
    int[] to = { R.id.vehs,R.id.txt,R.id.cur};

    // Instantiating an adapter to store each items
    // R.layout.listview_layout defines the layout of each item
    SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList, R.layout.listview_layout, from, to);

    // Getting a reference to listview of main.xml layout file
    ListView listView = ( ListView ) findViewById(R.id.listview);

    // Setting the adapter to the listView
    listView.setAdapter(adapter);
}

}

Didn't edit all the code, so you might find some things confusing xD

Answer 1

Don't make things difficult, the solution is simple in the classic 3 steps

Step 1:
Make a RelativeLayout in XML. Move the image to desired position (always to center, but you can choose if left or right) and change layout_height to wrap_content

Step 2:
Create a custom adapter for ListView, if you do this, you'll be able to all any layout as an item

public class ImagesAdapter extends ArrayAdapter<String> {

    private Activity mContext;
    private ArrayList<Bitmap> mImages;

    public ImagesAdapter(Activity context, ArrayList<String> listOfValues, ArrayList<Bitmap> images) {
        //The listOfValues is used when you make item click to get value
        //Each image must to have a text value
        super(context, R.layout.yourlayout, listOfValues);
        mContext = context;
        mImages = images;
    }

    @Override
    public void getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = mContext.getLayoutInflater();
        View returnView = inflater.inflate(R.layout.yourlayout, null);
        ImageView imageView = (ImageView) returnView.findViewById(R.id.yourimageid);
        imageView.setImageBitmap(mImages.get(position));
        return returnView;
    }

}

Step 3:
Implement in your code

ImagesAdapter adapter = new ImagesAdapter(this, myList, myImages);
mylistView.setAdapter(adapter);
myListView.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        //volov = Values Of ListOfValues
        String volov = (String) myListView.getItemPosition(position);
        Log.i(TAG, "listOfValues is useful " + volov);
    }

});

Answer 2

The way ListView displays data is by using an adapter. The adapter takes your data, inserts it into a custom view, and then adds it to the list.

To build a fast images ListView, the first thing you'd want to do is to add Picasso to your project. This library will automatically download and cache your images, handle ImageView recycling, and more.

The next thing you'd want to do is to write your item view. If you want an images-only list, the view could be as simple as:

<!-- res/layout/list_item.xml -->

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight" />

Next, you want to create your adapter. It accepts a List<String> of image URLs as an input, builds the items and inserts them to the ListView.

public class ImageListAdapter extends ArrayAdapter<String> {
    List<String> items;

    public ImageListAdapter(Context context, int resource, List<String> items) {
        super(context, resource, items);
        this.items = items;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(getContext());
            convertView = inflater.inflate(R.layout.list_item, null);
        }

        Picasso.with(getContext())
               .load(items.get(position))
               .into((ImageView) convertView);

        return convertView;
    }
}

Read the Picasso library documentation if you want to add more options such as image placeholders, transformations, and more.

Finally, to use the adapter on your ListView, add this to your activity's onCreate method:

List<String> images = new ArrayList<String>();
images.add("http://hometowncolumbia.files.wordpress.com/2007/12/lol-cats-dont-look-behind-cat.jpg");
images.add("http://i232.photobucket.com/albums/ee245/topswing/cat-lol.jpg");

listView = (ListView)findViewById(R.id.myListView);
listView.setAdapter(new ImageListAdapter(this, R.layout.list_item, images))

In a real application though, you'd probably want to load the image list from your server. You'd need to use an AsyncTask for that.