Today, I'm very proud of myself to create simple gallery application in Android. Likewise, it's my so-called first ever Android application and I really like what I've done. Because, I'm very new at creating Android application and Java language. Now I feel that developing Android application isn't that difficult to do.

Objectives of this application is display thumbnail images at the first screen. Once click on these thumbnail images, the actual image will be displaying within in Dialog box.

First of all, I need to add some XML coding in main.xml for layout of my application under res/layout. Displaying thumnail photos as GridView format. That's why I've added the following GridView layout.

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
2
3<RelativeLayout android:id="@+id/RelativeLayout01"
4android:layout_width="fill_parent"
5android:layout_height="fill_parent"
6xmlns:android="http://schemas.android.com/apk/res/android">
7
8<GridView xmlns:android="http://schemas.android.com/apk/res/android"
9 android:id="@+id/gridview"
10 android:layout_width="fill_parent"
11 android:layout_height="fill_parent"
12 android:columnWidth="90dp"
13 android:numColumns="auto_fit"
14 android:verticalSpacing="10dp"
15 android:horizontalSpacing="10dp"
16 android:stretchMode="columnWidth"
17 android:gravity="center" />
18
19</RelativeLayout>

After that, I need to create layout for Dialog box to preview actual size of image once click on thumbnail photo. So, I've created layoutdialog.xml file under res/layout as well and added the following XML coding into it.

view plain print about
1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="wrap_content" android:layout_height="wrap_content">
4
5<ImageView android:id="@+id/ImageView01"
6 android:layout_width="wrap_content" android:layout_height="wrap_content"
7 android:layout_centerHorizontal="true" />
8
9 <ScrollView android:id="@+id/ScrollView01"
10 android:layout_width="wrap_content" android:layout_below="@+id/ImageView01"
11 android:layout_height="200px">
12
13 </ScrollView>
14
15 <Button android:id="@+id/Button01" android:layout_below="@id/ScrollView01"
16 android:layout_width="wrap_content" android:layout_height="wrap_content"
17 android:layout_centerHorizontal="true" android:text="Close" />
18
19</RelativeLayout>

After all, the core part of my application is coming here.

view plain print about
1package com.ppshein.MyLoveGallery;
2
3import android.app.Activity;
4import android.app.Dialog;
5import android.content.Context;
6import android.os.Bundle;
7import android.view.View;
8import android.view.View.OnClickListener;
9import android.view.ViewGroup;
10import android.widget.AdapterView;
11import android.widget.AdapterView.OnItemClickListener;
12import android.widget.BaseAdapter;
13import android.widget.Button;
14import android.widget.GridView;
15import android.widget.ImageView;
16
17public class MyLoveGallery extends Activity {
18 //---the thumbnail images to display---
19 Integer[] imageIDs = {
20 R.drawable.pic01,
21 R.drawable.pic02,
22 R.drawable.pic03,
23 R.drawable.pic04,
24 R.drawable.pic05,
25 R.drawable.pic06,
26 R.drawable.pic07,
27 R.drawable.pic08
28 };
29 //---the actual images to display---
30 Integer[] imageLargeIDs = {
31 R.drawable.act_pic_01,
32 R.drawable.act_pic_02,
33 R.drawable.act_pic_03,
34 R.drawable.act_pic_04,
35 R.drawable.act_pic_05,
36 R.drawable.act_pic_06,
37 R.drawable.act_pic_07,
38 R.drawable.act_pic_08
39 };
40
41 @Override
42 public void onCreate(Bundle savedInstanceState) {
43 super.onCreate(savedInstanceState);
44 //set up main content view
45 setContentView(R.layout.main);
46
47 GridView gridView = (GridView) findViewById(R.id.gridview);
48 gridView.setAdapter(new ImageAdapter(this));
49
50 gridView.setOnItemClickListener(new OnItemClickListener()
51 {
52            public void onItemClick(AdapterView parent,
53 View v, int position, long id)
54 {
55                final Dialog dialog = new Dialog(MyLoveGallery.this);
56 dialog.setContentView(R.layout.maindialog);
57 dialog.setTitle("Gallery Review");
58 dialog.setCancelable(true);
59
60 //set up image view
61 ImageView img = (ImageView) dialog.findViewById(R.id.ImageView01);
62 img.setPadding(10, 10, 10, 10);
63 img.setImageResource(imageLargeIDs[position]);
64
65 //set up button
66 Button button = (Button) dialog.findViewById(R.id.Button01);
67 button.setOnClickListener(new OnClickListener() {
68 @Override
69 public void onClick(View v) {
70         dialog.dismiss();
71 }
72 });
73 //now that the dialog is set up, it's time to show it
74 dialog.show();
75 }
76 });
77
78 }
79
80 public class ImageAdapter extends BaseAdapter
81 {
82 private Context context;
83
84 public ImageAdapter(Context c)
85 {
86 context = c;
87 }
88
89 //---returns the number of images---
90 public int getCount() {
91 return imageIDs.length;
92 }
93
94 //---returns the ID of an item---
95 public Object getItem(int position) {
96 return position;
97 }
98
99 public long getItemId(int position) {
100 return position;
101 }
102
103 //---returns an ImageView view---
104 public View getView(int position, View convertView, ViewGroup parent)
105 {
106 ImageView imageView;
107 if (convertView == null) {
108 imageView = new ImageView(context);
109 imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
110 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
111 imageView.setPadding(5, 5, 5, 5);
112 } else {
113 imageView = (ImageView) convertView;
114 }
115 imageView.setImageResource(imageIDs[position]);
116 return imageView;
117 }
118 }
119 }

After building and rendering my application, the outcome will be as follow:

The first screen of application

Once click on thumbnail photo, this second screen will be coming out

References Grid View from Android developer

This entry was posted on July 31, 2011 at 3:53 AM and has received 4143 views. There are currently 7 comments. Print this entry.