Place an Image (loaded from URL) and Edit text box in Grid view in Android

Question

Some one please help me to place an Image ( display image in the grid view from URL) and Edittextbox in Android Grid View

This is my grid view xml lay out:

  <TextView 
  android:layout_width="fill_parent" 
 android:layout_height="wrap_content"
 />

 <GridView 
 android:id="@+id/order_details_grid" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:numColumns="4" 
 android:columnWidth="100px" 
 android:stretchMode="columnWidth" 
 android:gravity="center"/> 
 </LinearLayout>

below is the code which i use to populate the grid and it is working fine , i need to place the image coming from the url and and edittextbox:

    super.onCreate(savedInstanceState); 
  setContentView(R.layout.order_details);
  File yourFile = new File("/sdcard/json/orderdetails.txt");
  FileInputStream stream = null;
try {
    stream = new FileInputStream(yourFile);
} catch (FileNotFoundException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}
   String jString = "";
  try {
      FileChannel fc = stream.getChannel();
      MappedByteBuffer bb = fc.map(FileChannel.MapMode.READ_ONLY, 0, fc.size());


      /* Instead of using default, pass in a decoder.*/ 
      jString = Charset.defaultCharset().decode(bb).toString();

  } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}
  finally {
      try {
        stream.close();
    } catch (IOException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    }

  String fileContent=jString;
  JSONObject jobj = null;
  JSONObject jobj1 = null;
try {
    jobj = new JSONObject(fileContent);
} catch (JSONException e1) {
    // TODO Auto-generated catch block
    e1.printStackTrace();
}

try {

    JSONArray ja = jobj.getJSONArray("ORDERDETAILS");   

    listContent.add("ITEM NAME");
    listContent.add("ORDER QUANTITY");
    listContent.add("PRICE");
    listContent.add("PREFERED SHOP");
    for(int i=0; i<ja.length(); i++){              
           String ORDERDETAILS = ja.getString(i);
           System.out.println(ORDERDETAILS);               
           jobj1 = new JSONObject(ORDERDETAILS);
           String ITEMNAME = jobj1.getString("ITEMNAME");          
           listContent.add(ITEMNAME);
           System.out.println(ITEMNAME);
           String ORDERQUANTITY = jobj1.getString("ORDERQUANTITY");            
           listContent.add(ORDERQUANTITY);
           System.out.println(ORDERQUANTITY);
           String PRICE = jobj1.getString("PRICE");          
           listContent.add(PRICE);             
           System.out.println(PRICE);
           String SHOPNAME = jobj1.getString("SHOPNAME");
           System.out.println(SHOPNAME);             
           listContent.add(SHOPNAME);

    }

} catch (JSONException e1) {
    // TODO Auto-generated catch block
    e1.printStackTrace();
}    
  gridView = (GridView)findViewById(R.id.order_details_grid);
  ArrayAdapter<String> adapter = new ArrayAdapter<String>      (this,android.R.layout.simple_list_item_1,listContent); 
  gridView.setAdapter(adapter);
 // gridView.setAdapter(new ImageAdapter(this));

}

This is my json file from which i fetched the json data:

           {
"ORDERDETAILS": [
    {
        "ITEMNAME": "APPLE-LAPTOP",
        "ORDERQUANTITY": "35",
        "PRICE": "4500 DHMS",
        "SHOPNAME": "Indico Icon Kits 403",
        "SHOPIMAGEURL": "http://s0.geograph.org.uk/photos/43/03/430378_cc40fae8.jpg"
    },
    {
        "ITEMNAME": "ASUS-NOTEBOOK",
        "ORDERQUANTITY": "35",
        "PRICE": "3500 DHMS",
        "SHOPNAME": "Indico Icon Kits 403",
        "SHOPIMAGEURL": ""
    },
   {
        "ITEMNAME": "DELL-LAPTOP",
        "ORDERQUANTITY": "35",
        "PRICE": "9500 DHMS",
        "SHOPNAME": "Indico Icon Kits 403",
        "SHOPIMAGEURL": ""
    }
  ]
  }

You set your image to the imageview and then refresh the views :) — An-droid, Jul 22 '13 at 12:31
How to do that ? how to set the image view(the image url) to the grid ? — Jerry Abraham, Jul 24 '13 at 05:29

score 1 · Answer 1 · answered Jul 22 '13 at 12:11

1

check below link and download the sample application it will help You

https://github.com/nostra13/Android-Universal-Image-Loader

answered Jul 22 '13 at 12:11

Armaan Stranger

3,140
1
14
24

Guian · Answer 2 · 2013-07-24T08:22:01.757

Don't use an ArrayAdapter, create a class that extends BaseAdapter to create your own custom adapter.

Then in the getView method, inflate an xml layout for each cell of your grid ( your can place TextViews, EditText, images or whatever you want in it.)

The overriden getView method will look like :

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {


   View cell;
   if(convertView==null){
    cell= new View(context);
    //create a file "cell_layout.xml" in your layout folder to define the layout for each cell
    cell= layoutInflater.inflate(R.layout.cell_layout, null);
   }else{
    cell= (View)convertView;
   }

   ImageView imageView = (ImageView)cell.findViewById(R.id.image);
   imageView.setImageBitmap(bitmap[position]);

   TextView textView = = (TextView)cell.findViewById(R.id.text);
   textView .setText("hello world from gridView");
   return cell;
  }

A more complete example can be find here but a lot of examples can be found by googling "Custom Adapter"

The problem of loading a picture from an url is another topic, the answer from Armaan seems good. I would suggest you to have a look at the GreenDroid project and particularly it AsynImageView that I used a lot.

Place an Image (loaded from URL) and Edit text box in Grid view in Android

2 Answers2