A Cool Photo Gallery

The end-result is

Starting at the xml, create a new xml file. This xml file will contain a listview.

gallery.xml

<!---gallery.xml--->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bag_cake"
     >
     <ListView
            android:id="@+id/lvdata"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="1dp"
            android:layout_weight="1"
            android:cacheColorHint="#251e1b" android:layout_marginTop="1dp">
        </ListView>
    

</LinearLayout>

Next the row-item. This will be used by the photoAdapter and define how each row item should be placed.

row_photo.xml

<?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" >



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1" >


        <ImageView
            android:id="@+id/iv1"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />


        <ImageView
            android:id="@+id/iv2"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />


        <ImageView
            android:id="@+id/iv3"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />


        <ImageView
            android:id="@+id/iv4"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>

</LinearLayout>

Thats it for the xml. There java files, one that defines the row as an object(Photo class), the PhotoAdapter Class and the implementation – (Gallery.java).

Photo.java

package com.gilo.zosi;

public class Photo {
	private int iv1;
	private int iv2;
	private int iv3;
	private int iv4;

	public Photo(int iv1, int iv2, int iv3, int iv4) {
                //The constructor takes the ids of three images and initiliases them
		super();
		this.iv1 = iv1;
		this.iv2 = iv2;
		this.iv3 = iv3;
		this.iv4 = iv4;
	}

	public int getIv1() {
		return iv1;
	}

	public void setIv1(int iv1) {
		this.iv1 = iv1;
	}

	public int getIv2() {
		return iv2;
	}

	public void setIv2(int iv2) {
		this.iv2 = iv2;
	}

	public int getIv3() {
		return iv3;
	}

	public void setIv3(int iv3) {
		this.iv3 = iv3;
	}

	public int getIv4() {
		return iv4;
	}

	public void setIv4(int iv4) {
		this.iv4 = iv4;
	}

}

and for PhotoAdapter.java

package com.gilo.zosi;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class PhotoAdapter extends BaseAdapter {
	private ArrayList<Photo> list;
	private LayoutInflater mInflater;

	public PhotoAdapter(Context context, ArrayList<Photo> list) {
		this.list = list;
		this.mInflater = LayoutInflater.from(context);
	}

	@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) {
		ViewHolder holder;
		if (convertView == null) {
			convertView = mInflater.inflate(R.layout.row_photo, null);
			holder = new ViewHolder();
			holder.iv1 = (ImageView) convertView.findViewById(R.id.iv1);
			holder.iv2 = (ImageView) convertView.findViewById(R.id.iv2);
			holder.iv3 = (ImageView) convertView.findViewById(R.id.iv3);
			holder.iv4 = (ImageView) convertView.findViewById(R.id.iv4);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		holder.iv1.setImageResource(list.get(position).getIv1());
		holder.iv2.setImageResource(list.get(position).getIv2());
		holder.iv3.setImageResource(list.get(position).getIv3());
		holder.iv4.setImageResource(list.get(position).getIv4());
		return convertView;
	}

	private static class ViewHolder {
		private ImageView iv1, iv2, iv3, iv4;
	}
}

package com.gilo.zosi;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

public class Gallery extends Activity{

	ListView gallery;
	ArrayList<Photo> row = new ArrayList<Photo>();

	protected void onCreate(Bundle icicle){
		super.onCreate(icicle);
		setContentView(R.layout.gallery);
		
		gallery = (ListView) findViewById(R.id.lvdata);
		
		init();
		
		gallery.setAdapter(new PhotoAdapter(getBaseContext(), row));
	}
	
	private void init(){
		
		Photo p1 = new Photo(R.drawable.p1, R.drawable.p2, R.drawable.p3, R.drawable.p4);
		Photo p2 = new Photo(R.drawable.p5, R.drawable.p6, R.drawable.p7, R.drawable.p8);
		Photo p3 = new Photo(R.drawable.p9, R.drawable.p10, R.drawable.p11, R.drawable.p12);
		
		row.add(p1);
		row.add(p2);
		row.add(p3);
		row.add(p2);
		row.add(p1);
		row.add(p3);
		row.add(p2);
		
		
	}
}