Application loading images from webservice. App waits a lot in android

Question

I'm developing an android app which uses web services developed in .ashx request handler.

• application waits a lot and shows the black screen while launching the aap for the first time.
• sometimes it gives error outofMemory VM budget.

Here is some code.

 public class Home extends Activity implements AdapterView.OnItemClickListener {
        /** Called when the activity is first created. */

        Context context = Home.this;
        HashMap<String, String> map = new HashMap<String, String>();
        ArrayList<String> BookTitle = new ArrayList<String>();
        ArrayList<String> BookCoverPhotos = new ArrayList<String>();

        URL bookImageURL = null;
        Bitmap bitMapImage = null;

        View homeTabLayout;
        View reviewLayout;
        ArrayList<String> ImageUrl = new ArrayList<String>();
        ImageButton btnBack;


        // XML Parsing
        ArrayList<HashMap<String, String>> menuItems = new ArrayList<HashMap<String, String>>();

        // All static variables
        static final String URL = "http://www.my_url_goes_here.com/rxxxxxxxandler.ashx";
        // XML node keys
        static final String KEY_ITEM = "Book"; // parent node
        static final String KEY_ID = "BookID";
        static final String KEY_BOOKTITLE = "BookTitle";
        static final String KEY_BOOKCODE = "BookCode";
        static final String KEY_BOOKIMAGE = "BookImage";

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.home_activity);
            // Get XML Data in a Array List

            XMLParser parser = new XMLParser();
            String xml = parser.getXmlFromUrl(URL, "Imam Ali"); // getting XML
            Document doc = parser.getDomElement(xml); // getting DOM element

            NodeList nl = doc.getElementsByTagName(KEY_ITEM);

            // looping through all item nodes <item>
            for (int i = 0; i < nl.getLength(); i++) {
                // creating new HashMap
                Node node = nl.item(i);
                Element e = (Element) nl.item(i);
                // adding each child node to HashMap key => value
                map.put(KEY_ID, parser.getValue(e, KEY_ID));
                BookTitle.add(parser.getValue(e, KEY_BOOKTITLE));
                BookCoverPhotos.add("http://shiaislamicbooks.com/books_Snaps/"+parser.getValue(e, KEY_BOOKCODE)+"/1.jpg");
                Log.i("URLs", BookCoverPhotos.toString());
                // String
                // imgUrl="http://shiaislamicbooks.com/books_Snaps/"+parser.getValue(e,
                // KEY_BOOKCODE);
                map.put(KEY_BOOKTITLE, parser.getValue(e, KEY_BOOKTITLE));
                map.put(KEY_BOOKCODE, parser.getValue(e, KEY_BOOKCODE));
                map.put(KEY_BOOKIMAGE, parser.getValue(e, KEY_BOOKIMAGE));

                // adding HashList to ArrayList
                menuItems.add(map);

                Log.i("Array List", menuItems.toString());
            }

            homeTabLayout = findViewById(R.id.rel_HomeLayout);
            reviewLayout = findViewById(R.id.scroll_ReviewLayout);
            reviewLayout.setVisibility(View.GONE);

            btnBack = (ImageButton) findViewById(R.id.btnBack);
            btnBack.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    reviewLayout.setVisibility(View.GONE);
                    homeTabLayout.setVisibility(View.VISIBLE);

                }
            });

            final GridView gridView = (GridView) findViewById(R.id.gridview);
            gridView.setAdapter(new ImageAdapter(this));
            gridView.setOnItemClickListener(new OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> arg0, View arg1, int pos,
                        long arg3) {


                }
            });

       }
        public class ImageAdapter extends BaseAdapter {
            private Context context;
            public ImageAdapter(Context c) {
                context = c;
            }

            // ---returns the number of images---
            public int getCount() {

                return BookCoverPhotos.size();
            }

            // ---returns the ID of an item---
            public Object getItem(int position) {
                return position;
            }

            public long getItemId(int position) {
                return position;
            }
            // ---returns an ImageView view---
            public View getView(int position, View convertView, ViewGroup parent) {
                // ImageView bmImage;
                ImageView img_BookCoverPhoto;
                img_BookCoverPhoto = new ImageView(context);
                LayoutInflater inflater = (LayoutInflater) context
                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                View row = inflater.inflate(R.layout.grid_style, parent, false);
                TextView txt_BooksTitle = (TextView) row
                        .findViewById(R.id.txt_BookTitle);
                txt_BooksTitle.setText(BookTitle.get(position) + "");
                img_BookCoverPhoto = (ImageView) row
                        .findViewById(R.id.imgBookCover);
                try {
                    bookImageURL = new URL(
                            BookCoverPhotos.get(position));
                } catch (MalformedURLException e) {
                    e.printStackTrace();
                    Toast.makeText(context, "Network Error", Toast.LENGTH_LONG).show();
                    Log.i("URL", "ERROR");
                }

                try {
                    bitMapImage = BitmapFactory.decodeStream(bookImageURL
                            .openConnection().getInputStream());
                } catch (IOException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                    Toast.makeText(context, "Bitmap Error", Toast.LENGTH_LONG).show();
                    Log.i("BITMAP", "ERROR");
                }

                img_BookCoverPhoto.setImageBitmap(bitMapImage);

                return row;
            }
        }

    }

One more thing to tell you all that I'm using the XML parsing using the this tutorial.

• Is there any excessive unwanted code here in my app.
• Is there any way to load the first some basic UI and then app should start downloading the data (i.e images in bitmaps and text data) from the web server.
• And suggest me should i use AsyncTask, please provide some links for basic tutorials about AsyncTask.

Please provide code with some description.

Answer 1

Use Asynctask to perform network operations like fetching data from server. All the network hand shake can be done in doInBackground() of AsyncTask class. UI updations can be performed in onPostExecute()

Example

Study