Android GridView Example in Real Wallpaper App

On February 10, 2014, in Android, by James Liu

These days I am working on an Android Wallpaper app tutorial. In this android wallpaper app example source code, I will list all available wallpaper thumbnail images in two modes. In the list mode, I will show all wallpaper image in a list with their information like download counter and votes. In the grid mode, I will list all wallpapers in a gridview. In this tutorial, I will show you how to create a GridView in an activity and how to generate all image item in a GridView in android. After all, you can download this example app and example source code to use in your own project.

This Android Wallpaper App example includes four tutorials:

Create a New Android Project in Eclipse

First of all, let’s create an Android project in Eclipse. I am using Eclipse 4.2.2 with Android SDK 22.3. The project will target to API 19, Android 4.4.2, compatible with minimum required SDK API 8 for Android 2.2. Follow the steps to create a new project first.

create android project 1
create android project 2
create android project 3
create android project 4
create android project 5

Place GridView in Layout XML

After we create a project, we will get a xml file in the layout folder. Now, we can edit this layout xml to add a grid view in main layout. Here is the example source code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:numColumns="auto_fit"
        android:columnWidth="216dp"
        android:verticalSpacing="16dp"
        android:horizontalSpacing="16dp" 
        android:stretchMode="spacingWidth"
        android:gravity="center">
    </GridView>
</RelativeLayout>

Generate Image Item in GridView

To make this example simple to understand, I am using some dummy data first. In future tutorial, we can load a wallpaper list from server so that we can show the available wallpaper dynamically. In this example, I put 8 images in res folder and define an Integer array in Activity class. Here is the source code:

	private Integer[] wallpaperThumbIntegers = {
			R.drawable.thumb1, R.drawable.thumb2,
			R.drawable.thumb3, R.drawable.thumb4,
			R.drawable.thumb5, R.drawable.thumb6,
			R.drawable.thumb7, R.drawable.thumb8
	};

Then, I define a inner class called ImageAdapter which will be in charge of generate all ImageView for GridView. Here is the source code:

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

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return wallpaperThumbIntegers.length;
		}

		@Override
		public Object getItem(int position) {
			// TODO Auto-generated method stub
			return null;
		}

		@Override
		public long getItemId(int position) {
			// TODO Auto-generated method stub
			return 0;
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			// TODO Auto-generated method stub
			ImageView imageView;
			
			if(convertView == null) {
				imageView = new ImageView(mContext);
				imageView.setLayoutParams(new GridView.LayoutParams(216, 162));
				imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
			} else {
				imageView = (ImageView) convertView;
			}
			
			imageView.setImageResource(wallpaperThumbIntegers[position]);
			return imageView;
		}
	}

In last step, I will set the ImageAdapter to gridView in onCreate function of Activity class. Here is the source code:

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		
		GridView gridView = (GridView) findViewById(R.id.gridView1);
		gridView.setAdapter(new ImageAdapter(this));
	}

Let’s run the app and see how it looks like.

Wallpaper GridView Example Snapshot

Try Example Android App

You can download and install this android app by click the following link, or scan the following QR code to download and install on your android phone simply. If you feel it is helpful, please support me by clicking the banner inside the app.
Download and Run This Example on Your Android Phone

chartwallpapergridviewexample

Download Example Source Code for Free

Here is the example source code. You can download it for free and use it in your own project.
http://jmsliu.com/example/androidwallpaperapp/WallpaperGridViewExample.zip

 

13 Responses to “Android GridView Example in Real Wallpaper App”

  1. chester says:

    sorry, where is the sample code?

  2. jamal says:

    vry good example .. i like it and i want to use it and make a project its run for me ..

  3. Suchitra says:

    Hi, can you also show how we can get an xml file with URLs of image files to load in the app?

    Thanks for this tutorial.

  4. Kate says:

    How can i make this app using my wordpress wallpaper rss feed ?? or just wallpaper site make with wordpress

    i want to get image from my wordpress site
    Please let me know what code can grab wallpaper from wordpress site and show in the app …
    If you see my site there are resolution for several mobile screen ..
    So how the app can detect the resolution and show that wallpaper to set as wallpaper in mobile screen

  5. NEhan says:

    I have problem in my eclipse…”No grammar DTD or XML file in my app….so i cant run my app in emulator… can you help me please???

  6. Arkadiy says:

    It doesn’t works on my Samsung Galaxy note 3. It just shows 8 images and nothing happens

Leave a Reply

Free WordPress Theme

Premium WordPress Themes