App crashes when images load

Question

The problem you have here is you are loading everything at the same time, I guess. You should try using a ListView and inflate each row! The way this would work is that your app will load an ImageView or two at once and the rest will be left on the side, until the user scrolls close to it.

The tutorial I found for this is (watch #71 to about #87 - you can get all his videos at slidenerd.com):
http://www.youtube.com/watch?v=uic3TVp_j3M#t=0

You should also resize your bitmaps so they aren't loaded in full resolution. You don't need a 1920x1080 image for a 540*420 screen, for example. The following link shows you how to take care of this. http://developer.android.com/training/displaying-bitmaps/index.html

So, in the end, you will have only 1 ListView, 1 ImageView and way less code and way less confusion :P

EDIT: QUICK GUIDE: I'll walk you through the ListView method only, because I think the scaling down of an image example by Google is easy to follow.

So, first of all, you will have the following:

myActivity.xml (the main Activity where you need these images)
Single row (the layout of what a single row looks like)
MyActivity.java (The java class for your activity)

myActivity.xml will contain a ListView:

<ListView
    android:id="@+id/lvList"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >
</ListView>

singleRow.xml will contain just an ImageView - you will use the same ImageView's LayoutParamaters and mirror them 36 times:

<ImageView
    android:id="@+id/ivImage"
    android:layout_width="50dp"
    android:layout_height="85dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/ic_launcher" />

MyActivity.java - where all the magic happens!

public class MyActivity extends Activity implements OnItemClickListener {
    ListView lv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        lv = (ListView) findViewById(R.id.lvList);
        MyAdapter adapter = new MyAdapter(this);
        lv.setAdapter(adapter);
        lv.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        MyView holder = (MyView) view.getTag(); // This will get the tag of the item click - that is set up below
    }

    //Create a holder for the image that will be in an ImageView
    class SingleRowData {
        int img;

        SingleRowData(int img) {
            this.img = img;
        }
    }

    //A reference to the ImageView that needs to be copied
    private class MyView {
        ImageView ivImg;

        MyView(View v) {
            ivImg = (ImageView) v.findViewById(R.id.ivHomePageRow);
        }
    }

    class MyAdapter extends BaseAdapter{
        ArrayList<SingleHPSRow> list;
        Context context;

        public MyAdapter(Context context) {
            this.context = context;
            list = new ArrayList<SingleRowData>();
            ...
            int[] imgId = ...; // let's say you are getting all the images from your resources .. you will have to set this up, I'm guessing you know how to.
            for(int item = 0; item < imgUrl.length; i++) {
                list.add(imgId[item]);
            }
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Override
        public Object getItem(int position) {
            return list.get(position);
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            view row = convertView; //This will try to see if the row has already been loaded b4
            MyView holder = null; initialize our custome View for the row
            if(row == null) { // new row
                LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); //Get the LayoutInflater
                row = inflater.inflate(R.layout.singleRow, parent, false); //Reference to the row layout
                holder = new MyView(row);
                row.setTag(holder); // Give the row a tag - the holder that contains the item
            } else { // old row
                holder = (MyView) row.getTag(); //Get the tag that was assigned
            }
            SingleRowData item = list.get(position); //Get the item at the current position
            int image = item.img; //Get the imgId assigned to the current item
            holder.ivImg.setImageResource(image); //Load image for the current position
            return row; // Return the current row
        }
    }
}

Hopefull this is well explained, I copied and shortened one of my codes. Let me know if there's something you don't understand