Programmer XR Just someone who explains Android code!

Android tutorial: How to set a custom wallpaper

Android wallpapers

Wallpapers are a nice way to customize your homescreen. There are many applications that allow you to change your wallpaper and they have huge databases with alot of wallpapers. An example is Zedge.

But the main question is:
How to they do it?

If we take a look at how this is done, it's pretty simple. In this tutorial i'll explain the basics ( really the basics ) of how you can make your own Wallpaper-changer-application-thingy!

This tutorial will cover the following subjects:

• A GridView to  show the wallpapers
• Implement a custom Adapter to show our images
• The code required to set a new wallpaper

Follow me after the break to learn how I put this together.

The Layout

The layout is pretty simple here. Just a basic GridView. We will load the images in the Grid in the next chapter ( The custom adapter ).

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

The custom ImageAdapter

Here is where the GridView logic is. This will load the images. In this example I chose to make all images embedded and static. The main thing is to notice the Arrays in the bottom. They hold the reference id's to the thumbnails and the large images.

public class ImageAdapter extends BaseAdapter {
	private Context mContext;

	public ImageAdapter(Context c) {
		mContext = c;
	}

	public int getCount() {
		return mThumbIds.length;
	}

	public Object getItem(int position) {
		return null;
	}

	//Don't return the thumb id - but the large image id
	public long getItemId(int position) {
		return mFullSizeIds[position];
	}

	// create a new ImageView for each item referenced by the Adapter
	public View getView(int position, View convertView, ViewGroup parent) {
		ImageView imageView;

		if (convertView == null) {
			imageView = new ImageView(mContext);
			imageView.setLayoutParams(new GridView.LayoutParams(300, 250));
			imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
			imageView.setPadding(8, 8, 8, 8);
		} else {
			imageView = (ImageView) convertView;
		}

		imageView.setImageResource(mThumbIds[position]);

		return imageView;
	}

	// references to our smaller images ( else the memory will fill up )
	private Integer[] mThumbIds = {
			R.drawable.wallpaper1t,
			R.drawable.wallpaper2t,
			R.drawable.wallpaper3t,
			R.drawable.wallpaper4t,
			R.drawable.wallpaper5t,
			R.drawable.wallpaper6t,
			R.drawable.wallpaper7t,
			R.drawable.wallpaper8t
	};

	//These id we will pass on getItemid ( the larger images )
	private Integer[] mFullSizeIds = {
			R.drawable.wallpaper1,
			R.drawable.wallpaper2,
			R.drawable.wallpaper3,
			R.drawable.wallpaper4,
			R.drawable.wallpaper5,
			R.drawable.wallpaper6,
			R.drawable.wallpaper7,
			R.drawable.wallpaper8
	};
}

The magic code

The actual setting of the wallpaper is done in only a few lines of code. This is the code that binds the Adapter to the Gridview + it implements a setOnItemClickListener. This will tell the application what to do when a user clicks on a image.

//find grid and apply the custom adapter
GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));

//set the onclickhandler ( what happens when i click a item in the grid )
gridview.setOnItemClickListener(new OnItemClickListener() {
	public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

		//Make a Bitmap from the Resource
		ImageAdapter i = (ImageAdapter)parent.getAdapter();
		Bitmap mBitmap = BitmapFactory.decodeResource(getResources(),(int)i.getItemId(position));

		//Get the WallpaperManager
		WallpaperManager myWallpaperManager = WallpaperManager.getInstance(getApplicationContext());

		try {
			//Set the clicked bitmap
			myWallpaperManager.setBitmap(mBitmap);
			Toast.makeText(MainActivity.this, "Wallpaper set", Toast.LENGTH_SHORT).show();
		} catch (IOException e) {
			Toast.makeText(MainActivity.this, "Error setting wallpaper", Toast.LENGTH_SHORT).show();
		}
	}
});

Sidenote: We also have to include a permission. This permission is located in the AndroidManifest.xml

<uses-permission android:name="android.permission.SET_WALLPAPER" />

Make it more interesting

Here are some ideas on how you can improve this application:

• Dynamically loading images from the internet
• Call Flickr for your images
• Let a ProgressBar popup when you click a image
• Make thumbnails dynamically
• etc etc

If you alter the project and want to share it. Please post the relevant code on PasteBin and leave a comment.

Source code

You can download the source code here:

• Eclipse project WallpaperApp

Related posts:

1. Android tutorial: Game menu with a custom Font
2. Android Tutorial: 2d canvas graphics