Skip to content
September 15, 2010 / Daniel Freeman

Dr Android Answers: XML + Image download + Fancy Lists

Esther asks the following question:-

Hi there,
For my situation, i got a XML which one of the element contains a http string that points to an image on my webserver.  Any approach you would suggest for it to be downloaded to the drawable so that my application will be able to download it to drawable before displaying it with imageview
Can you also please suggest some tutorial on array adapter that might be useful to display image and text from an array.

Thanks.



To parse the XML and access the URL, I’d suggest modifying a SAX parser.  (I hope the other teachers on the course covered this – if yours didn’t let me know and I’ll elaborate).

Downloading an image isn’t too difficult.

See: http://www.helloandroid.com/tutorials/how-download-fileimage-url-your-device

In this example, they save the image to a file.  But in your case, you’ll want to take baf.toByteArray(); and assign it to an ImageView, something like this:-

ByteArray myBytes = baf.toByteArray();
ImageView myImage = (ImageView) findViewById(R.id.myimage);
myImage.setImageBitmap(BitmapFactory.decodeByteArray(myBytes, 0, myBytes.length));

As for modifying an ArrayAdapter to display both image and text into a ListView – that’s pretty standard practice.  We create a new custom adapter that inherits from the ArrayAdapter class, and override the getView() method, so that it deals with a custom list item layout, which might contain text, images, etc. etc.

Here’s an example based on two arrays.  One containing text, the other containing a reference to images in our res/drawable folder:-

public class HelloArrayAdapterSubClass extends Activity {

	final protected static String[] DAYS = {"Monday","Tuesday","Wednesday"};
	final protected static int[] PICTURES = {R.drawable.mondayPic,R.drawable.tuesdayPic,R.drawable.wednesdayPic};

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ListView list=(ListView)findViewById(R.id.days);

        list.setAdapter(new SwitchAdapter(this));
    }

    class SwitchAdapter extends ArrayAdapter<String> {
        Activity context;

        SwitchAdapter(Activity context) {
          super(context, R.layout.custom_list_item_3, DAYS);
          this.context=context;
        }

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

        View row;
        LayoutInflater inflater=context.getLayoutInflater();
        String myday = DAYS[position];
        int mypicture = PICTURES[position];

        row=inflater.inflate(R.layout.custom_list_item_3, null);
        TextView label=(TextView)row.findViewById(R.id.label);
        ImageView picture=(ImageView)row.findViewById(R.id.image);
        label.setText(myday);
        picture.setImageResource(mypicture);

        return(row);
        }
      }
}

Note the row=inflater.inflate().  Inflation is the conversion between a text XML layout description, and the instantiation of objects (inherited from View and ViewGroup) that make up what’s shown on the screen.

The custom layout looks like this:-

<?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"
	android:orientation="horizontal">
<ImageView
	android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
/>
<TextView
	android:id="@+id/label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="days of the week"/>
</LinearLayout>
Advertisements

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: