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