Android Sort custom listview with image and text

Ok, here are an example of how to achieve your goal.

The best way is to create a custom object to hold the different strings and the image for each row.

This object could look like this:

public class MyCustomObject {
    private int image;
    private String house;
    private String location;
    private String price;

    public MyCustomObject(int image, String house, String location, String price) {
        this.image = image;
        this.house = house;
        this.location = location;
        this.price = price;
    }

    public int getImage() {
        return image;
    }

    public String getHouse() {
        return house;
    }

    public String getLocation() {
        return location;
    }

    public String getPrice() {
        return price;
    }
}

Now to the DBHelper class. Instead of fetching one String[] for each type, you should fetch a List of MyCustomObjects. I choose List instead of arrays because these are easier to handle and should (in most cases) be used instead of the more primitive array. :-)

The DBHelper.sortLocationAsc() is renamed to getAllMyCustomObjects() instead and could look something like this:

public List<MyCustomObject> getAllMyCustomObjects() {
    Cursor localCursor = this.myDataBase.query(DB_TABLE, new String[] {
            KEY_ID, KEY_HOUSE, KEY_PRICE, KEY_LOCATION }, null, null,
            null, null, KEY_LOCATION + " ASC");

    String house = "";
    String price = "";
    String location = "";
    int image = 0;

    List<MyCustomObject> listOfObjects = new ArrayList<MyCustomObject>();
    while (localCursor.moveToNext()) {
        house = localCursor.getString(localCursor.getColumnIndex(DBHelper.KEY_HOUSAE));
        price = localCursor.getString(localCursor.getColumnIndex(DBHelper.KEY_PRICE));
        location = localCursor.getString(localCursor.getColumnIndex(DBHelper.KEY_LOCATION));
        image = localCursor.getInt(localCursor.getColumnIndex(DBHelper.KEY_IMAGE));

        listOfObjects.add(new MyCustomObject(image, house, location, price));
    }
    return listOfObjects;
}

Now when creating your custom Adapter I've changed it a bit, so it only takes a List of MyCustomObjects instead of the arrays.

You'll notice in the getView method that I fetch one item from the List of MyCustomObjects instead of fetching from each different array. This way it's much easier to control what elements belong together and you won't get weird behaviours like you could get if the different arrays aren't the same length.

The new MyCustomAdapter could look something like this:

class MyCustomAdapter extends BaseAdapter {
    List<MyCustomObject> myListOfCustomObjects;

    MyCustomAdapter(List<MyCustomObject> customObjects) {
        this.myListOfCustomObjects = customObjects;
    }

    public int getCount() {
        return myListOfCustomObjects.size();
    }

    public String getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = getLayoutInflater();
        View row;

        row = inflater.inflate(R.layout.listrow, null);

        textview1 = (TextView) row.findViewById(R.id.tvName);
        textview2 = (TextView) row.findViewById(R.id.tvLocation);
        textview3 = (TextView) row.findViewById(R.id.tvPrice);
        ImageView imageview = (ImageView) row.findViewById(R.id.image);

        imageview.setScaleType(ImageView.ScaleType.FIT_XY);
        textview1.setText(myListOfCustomObjects.get(position).getHouse());
        Spanned strFormattedLocation = Html.fromHtml("<b>Location: </b>");
        Spanned strFormattedPrice = Html.fromHtml("<b>Price: </b>");
        textview2.setText(strFormattedLocation + myListOfCustomObjects.get(position).getLocation());
        String strPrice = strFormattedPrice
            + "$"
            + (new DecimalFormat("#,###.00")).format(Integer.parseInt(myListOfCustomObjects.get(position).getPrice()));
        textview3.setText(strPrice);
        imageview.setImageResource(myListOfCustomObjects.get(position).getImage());

        return row;
    }
}

And then you'll set the adapter in your displayRecords() like this:

private void displayRecords() {
    checkDatabaseConnection();
    List<MyCustomObject> list = dbHelper.getAllMyCustomObjects();
    adapter = new MyCustomAdapter(list);
    lv.setAdapter(adapter);
}

So the key is to create a custom object to hold the data.

The above code might not run/compile - I've just written it inside a text-editor and didn't test it at all, but now you hopefully have a clear view of how the issue can be solved :-)

Also: if you have a lot of data in your database, I'd recommend you looked into populating the ListView inside a background thread - for instance you could use an [AsycnTask][1] to do this.

Also have a look at the ViewHolder pattern when calling the getView of the Adapter.