displaying images and text in list view using json

Question

I am fetching the images and data from mysql database from server using json array through url. i can able to do listview all images but i can't able to get text along with images. i think i was create custom layout using view holder.how can i create my custom layout.

            enter code here
       JSONArray json = jArray.getJSONArray("names");
        list=(ListView)findViewById(R.id.list);
         adapter=new ImageAdapter(this, json);
         list.setAdapter(adapter);

         ImageAdapter.java
    public class ImageAdapter extends BaseAdapter {
String qrimage;
Bitmap bmp;
private static LayoutInflater inflater = null;

private ImageView[] mImages;
String[] itemimage;
TextView[] tv;
String itemname;
HashMap<String, String> map = new HashMap<String, String>();

public ImageAdapter(Context context, JSONArray imageArrayJson) {
    this.mImages = new ImageView[imageArrayJson.length()];

    try {


        for (int i = 0; i < imageArrayJson.length(); i++) {
            JSONObject image = imageArrayJson.getJSONObject(i);
            qrimage = image.getString("itemimage");
            itemname = image.getString("itemname");
            map.put("itemname", image.getString("itemname"));
            System.out.println(itemname);

            byte[] qrimageBytes = Base64.decode(qrimage.getBytes());

            bmp = BitmapFactory.decodeByteArray(qrimageBytes, 0,
                    qrimageBytes.length);
            int width=100;
            int height=100;
            Bitmap resizedbitmap=Bitmap.createScaledBitmap(bmp, width, height, true);




            mImages[i] = new ImageView(context);
            mImages[i].setImageBitmap(resizedbitmap);


            mImages[i].setScaleType(ImageView.ScaleType.FIT_START);
            tv[i].setText(itemname);
        }

    } catch (Exception e) {
        // TODO: handle exception
    }
}

public int getCount() {
    return mImages.length;
}


public Object getItem(int position) {
    return position;
}

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

public View getView(int position, View convertView, ViewGroup parent) {
      return mImages[position];
}
  }
       i can create one layout
  <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content">
   <ImageView
  android:id="@+id/image"
  android:layout_width="50dip"
  android:layout_height="50dip" android:src="@drawable/stub"          
      android:scaleType="centerCrop"/> 
    <TextView
  android:id="@+id/text"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_weight="1"  android:textSize="20dip"      
      android:layout_marginLeft="10dip"/> 
    </LinearLayout>

the above image append listview.xml and text also append with listview.xml i want display images and names in a listview...please any one can help me.

Answer 1

The ImageAdapter class should extend BaseAdapter. Refer http://pradeep-sharma.com/blog/android-custom-listview-baseadapter-tutorial/ .

Answer 2

Use Adapter like this, Take all the text contents and Bitmaps into array before calling the Adapter

class NamesAdapter extends BaseAdapter{

//      @Override
        public int getCount() {
        // TODO Auto-generated method stub
        return mImages.length;
        }

//      @Override
        public Object getItem(int position) {
        // TODO Auto-generated method stub
        return null;
        }

//      @Override
        public long getItemId(int position) {
        // TODO Auto-generated method stub
        return 0;
        }

//      @Override
        public View getView(int pos, View convertView, ViewGroup parent) {
        View row=getLayoutInflater().inflate(R.layout.imagetext,null);
        TextView text=(TextView)row.findViewById(R.id.text);
                ImageView image=(ImnageView)row.findViewById(R.id.image);

        name.setText(text[pos]);
               image.setImageBitmap(resizedbitmap[pos]);
        return row;
        }

        }