Click here to Skip to main content
11,435,451 members (62,271 online)
Click here to Skip to main content

How To Create Android Live Wallpaper

, 20 Mar 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Step-by-step Android Live Wallpaper creation guide for absolute beginners

Introduction

Starting with Android 2.1. (API Level 7), developers can create live wallpapers - richer, animated, interactive backgrounds - on their home screens. A live wallpaper is very similar to a normal Android application: you can create menu with settings, use SGL and OpenGL for drawing, accelerometer, etc.

In this article, I want to demonstrate how to create live wallpaper from scratch. Step-by-step, we will create live wallpaper that would output TV test pattern on out home screen. Just like on real TV during night hours!

This article will highlight the following aspects of Live Wallpaper development:

  1. Drawing on graphic primitives (circles, rectangles) using android.graphics.Canvas class
  2. Developing of applications for screens with different resolution and orientation
  3. Creation of settings dialog for live wallpaper
  4. Reading of variables values for resource XML file
  5. Actual creation of live wallpaper for Android

Background

In this article, I show how to create a very simple live wallpaper.

On the internet, you can find much more profound and cooler apps, but I want you to check the following examples:

Using the Code

1. Making Android Virtual Device

As I mentioned earlier, we have to create an appropriate Android Virtual Device (AVD) to run our application.

Open Android SDK and AVD manager.

And create AVD with the following capabilities:

  1. Target platform Android 2.1 or higher
  2. With accelerometer support (we will add support for screen rotation detection)
  3. Touch-screen support

Resolution might be any. Our application will detect screen resolution and rescale graphic elements if necessary.

2. Creating Project Files

I named the app as LiveWallpaper.

When creating Android project, set Build Target as Android 2.1.

By default, project will be created with the following files:

We have to change them slightly and add new files that would contain values for application's variables.

First, delete layout folder and main.xml file in res directory. This file is used for creating layout for application controls which we won't use in our project.

Instead of this, create folder xml where we will create two files livewallpaper.xml and livewallpaper_settings.xml that will contain values for live wallpaper service and settings dialog.

Livewallpaper.xml contains the following data:

<?xml version="1.0" encoding="utf-8"?>
<wallpaper xmlns:android="http://schemas.android.com/apk/res/android"
    android:settingsActivity="ca.jvsh.livewallpaper.LiveWallpaperSettings"
    android:thumbnail="@drawable/icon"/>

Where wallpaper tag says that we are creating live wallpaper service. This file will be processed during apk file creation.

Livewallpaper_settings.xml contains description of available settings for our live wallpaper:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"
    android:title="@string/livewallpaper_settings"
    android:key="livewallpaper_settings">

    <ListPreference
        android:key="livewallpaper_testpattern"
        android:title="@string/livewallpaper_settings_title"
        android:summary="@string/livewallpaper_settings_summary"
        android:entries="@array/livewallpaper_testpattern_names"
        android:entryValues="@array/livewallpaper_testpattern_prefix"/>
    <CheckBoxPreference android:key="livewallpaper_movement"
        android:summary="@string/livewallpaper_movement_summary"
        android:title="@string/livewallpaper_movement_title"
        android:summaryOn="Moving test pattern"
        android:summaryOff="Still test pattern"/>
</PreferenceScreen>

Where tag ListPreference shows that we provide user option to choose between several items and the tag CheckBoxPreference shows that we have check box (Yes/No) option.

File strings.xml in values folder contains all strings values that we are using in our project.

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
    <!-- General -->
    <skip />
    <!-- Application name -->
    <string name="app_name">Live Wallpaper</string>

    <string name="livewallpaper_settings">Settings</string>
    <string name="livewallpaper_settings_title">Select test pattern</string>
    <string name="livewallpaper_settings_summary">
		Choose which test pattern to display</string>
    <string name="livewallpaper_movement_title">Motion</string>
    <string name="livewallpaper_movement_summary">
		Apply movement to test pattern</string>
</resources>

You can modify this file during localization of your software.

Also in project, you will find testpattern.xml file. This file contains TV test patterns names and colors that they are using (TV test patterns mostly consist of rectangles).

3. Let's Explore the Code!

You can check the code in the project file I've provided. I will just show the important points.

How to detect screen size and orientation?

You have to use DisplayMetrics class!

DisplayMetrics metrics = new DisplayMetrics();
Display display = ((WindowManager) getSystemService(WINDOW_SERVICE)).getDefaultDisplay();
display.getMetrics(metrics);

mRectFrame = new Rect(0, 0, metrics.widthPixels, metrics.heightPixels);


int rotation = display.getOrientation();
if(rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180)
    mHorizontal = false;
else
    mHorizontal = true;

How to draw a gradient?

You should use GradientDrawable class!

private Rect                mGradientRect;
GradientDrawable            mGradient;

mGradientRect = new Rect(10,10, 40, 40);
mGradient = new GradientDrawable(Orientation.LEFT_RIGHT, new int[] 
		{ 0xff050505, 0xfffdfdfd });
mGradient.setBounds(mGradientRect);
mGradient.draw(c);

Check out this code:

public void onSharedPreferenceChanged(SharedPreferences prefs,
        String key)
{
    mShape = prefs.getString("livewallpaper_testpattern", "smpte");
    mMotion = prefs.getBoolean("livewallpaper_movement", true);
    readColors();
}

private void readColors()
{
    int pid = getResources().getIdentifier(mShape + "colors", "array", getPackageName());

    rectColor = getResources().getIntArray(pid);
    mRectCount = rectColor.length;
    mColorRectangles = new Rect[mRectCount];

    System.out.println("mRectCount "+mRectCount);
    initFrameParams();
}

Those functions are called when we change our settings.

In readColors() function, we are reading color values from resources (testpatterns.xml file).

4. Editing AndroidManifest.xml

Proving a proper AndroidManifest.xml file is a crucial point if you want your app to be accepted at Android Market.

In our project, Android Manifest looks as follows:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ca.jvsh.livewallpaper"
    android:versionName="1.0.20100908.1"
    android:versionCode="1">

    <uses-sdk android:minSdkVersion="7" />
    <uses-feature android:name="android.software.live_wallpaper" />

    <application android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:permission="android.permission.BIND_WALLPAPER">

        <service android:name=".LiveWallpaper"
            android:label="@string/app_name"
            android:icon="@drawable/icon">

            <intent-filter>
                <action android:name="android.service.wallpaper.WallpaperService" />
            </intent-filter>
            <meta-data android:name="android.service.wallpaper"
                android:resource="@xml/livewallpaper" />

        </service>

        <activity android:label="@string/livewallpaper_settings"
            android:name=".LiveWallpaperSettings"
            android:theme="@android:style/Theme.Light.WallpaperSettings"
            android:exported="true"
            android:icon="@drawable/icon">
        </activity>

    </application>
</manifest>

It is very important to set up android:permission="android.permission.BIND_WALLPAPER" because this will allow the wallpaper to stay on your home screen.

5. Result

 

Points of Interest

Android live wallpapers are supported only on Android 2.1. (API level 7) and higher versions of the platform. To ensure that your application can only be installed on devices that support live wallpapers, remember to add to the applications's manifest before publishing to Android Market which indicates to Android Market and the platform that your app requires Android 2.1 or higher.

<uses-feature android:name="android.software.live_wallpaper" />

which tells Android Market that your application includes a live wallpaper.

History

  • 2010.08.09 Initial sample commit

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Evgeny Vinnik
Software Developer Darim Vision
Canada Canada
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 Pin
Arunachalam MC15-Dec-14 5:57
memberArunachalam MC15-Dec-14 5:57 
Questiongalaxy s3/s4 live wallpaper Pin
Abbas Yousaf14-Aug-14 7:06
memberAbbas Yousaf14-Aug-14 7:06 
QuestionKinde eBook: Creating Live Wallpapers With Parallax Layers and Images Pin
Member 1080958510-May-14 19:09
memberMember 1080958510-May-14 19:09 
GeneralMy vote of 5 Pin
ridoy27-Nov-13 4:36
professionalridoy27-Nov-13 4:36 
Questiongood job Pin
Member 1040937018-Nov-13 6:47
memberMember 1040937018-Nov-13 6:47 
GeneralMy vote of 5 Pin
arashmd4-Jul-13 13:02
memberarashmd4-Jul-13 13:02 
QuestionMy Vote 4 Pin
Toywarrior12-Jun-13 17:19
memberToywarrior12-Jun-13 17:19 
GeneralMy vote of 2 [modified] Pin
Venson25-Jun-13 10:31
memberVenson25-Jun-13 10:31 
GeneralMy vote of 5 Pin
Otto Castillo31-May-13 12:10
memberOtto Castillo31-May-13 12:10 
QuestionGreat Job Dude ! Pin
plus34724-May-13 10:27
memberplus34724-May-13 10:27 
GeneralThanks Pin
Member 100289734-May-13 11:15
memberMember 100289734-May-13 11:15 
QuestionERROR Pin
Member 99751809-Apr-13 22:25
memberMember 99751809-Apr-13 22:25 
GeneralMy vote of 1 Pin
Member 841045031-Mar-13 6:17
memberMember 841045031-Mar-13 6:17 
QuestionHow to run source code? Pin
krewelfow16-Mar-13 12:06
memberkrewelfow16-Mar-13 12:06 
Questioncannot run [modified] Pin
maitung31-Jan-13 2:21
membermaitung31-Jan-13 2:21 
GeneralMy vote of 5 Pin
kksrinivasan8930-Jan-13 0:02
memberkksrinivasan8930-Jan-13 0:02 
Questionerror in usin @string or @array Pin
Member 97335576-Jan-13 22:10
memberMember 97335576-Jan-13 22:10 
Questionwallpaper Pin
Member 967820811-Dec-12 23:06
memberMember 967820811-Dec-12 23:06 
GeneralThanks! Pin
riyadoll21-Nov-12 9:23
memberriyadoll21-Nov-12 9:23 
Questioncan i use this live wallpaper as a background in my app . Pin
manohar37879-Sep-12 21:18
membermanohar37879-Sep-12 21:18 
Questioncreate app software Pin
Member 93468289-Aug-12 6:39
memberMember 93468289-Aug-12 6:39 
where would i find the software needed to create the app and also test it?
AnswerRe: create app software Pin
Member 961428419-Nov-12 23:24
memberMember 961428419-Nov-12 23:24 
BugFile not Found Pin
Rishav Jalan22-May-12 5:08
memberRishav Jalan22-May-12 5:08 
GeneralRe: File not Found Pin
Evgeny Vinnik22-May-12 5:57
memberEvgeny Vinnik22-May-12 5:57 
Question"Settings" show error message : "Live Wallpaper Picker has stopped" Pin
Member 896834213-May-12 4:02
memberMember 896834213-May-12 4:02 
Questioni cannot download, blank page Pin
Member 883855017-Apr-12 2:10
memberMember 883855017-Apr-12 2:10 
QuestionArticle missing pictures? Pin
wildwestgoh16-Feb-12 19:45
memberwildwestgoh16-Feb-12 19:45 
AnswerRe: Article missing pictures? Pin
Evgeny Vinnik16-Feb-12 20:15
memberEvgeny Vinnik16-Feb-12 20:15 
QuestionError Pin
smilieegurl2-Jan-12 14:24
membersmilieegurl2-Jan-12 14:24 
AnswerRe: Error with xml Pin
Evgeny Vinnik3-Jan-12 8:38
memberEvgeny Vinnik3-Jan-12 8:38 
AnswerRe: Error Pin
Isaac Gittins27-Aug-12 15:14
memberIsaac Gittins27-Aug-12 15:14 
GeneralMy vote of 3 Pin
Member 82974586-Oct-11 22:48
memberMember 82974586-Oct-11 22:48 
Questionhow do I open the samples? Pin
Diamagin18-Sep-11 11:06
memberDiamagin18-Sep-11 11:06 
GeneralRe: how do I open the samples? Pin
Jaydeep Jadav24-Nov-11 18:23
memberJaydeep Jadav24-Nov-11 18:23 
AnswerRe: how do I open the samples? Pin
TH3ORY2-Feb-12 14:46
memberTH3ORY2-Feb-12 14:46 
Generalhelp on livewall Pin
Member 78453479-May-11 7:39
memberMember 78453479-May-11 7:39 
GeneralRe: help on livewall Pin
Evgeny Vinnik9-May-11 12:21
memberEvgeny Vinnik9-May-11 12:21 
QuestionCan we use the SDK's "View Animation" package from within Live Wallpaper? Pin
Member 77175803-Mar-11 22:11
memberMember 77175803-Mar-11 22:11 
AnswerRe: Can we use the SDK's "View Animation" package from within Live Wallpaper? Pin
Evgeny Vinnik4-Mar-11 10:47
memberEvgeny Vinnik4-Mar-11 10:47 
GeneralRe: Can we use the SDK's "View Animation" package from within Live Wallpaper? Pin
GeorgeFreeman15-Mar-11 7:15
memberGeorgeFreeman15-Mar-11 7:15 
GeneralConfigure crashes this live wallpaper Pin
timverhoeven13-Feb-11 8:28
membertimverhoeven13-Feb-11 8:28 
GeneralRe: Configure crashes this live wallpaper Pin
Evgeny Vinnik13-Feb-11 13:57
memberEvgeny Vinnik13-Feb-11 13:57 
GeneralRe: Configure crashes this live wallpaper Pin
timverhoeven14-Feb-11 2:36
membertimverhoeven14-Feb-11 2:36 
GeneralRe: Configure crashes this live wallpaper Pin
Evgeny Vinnik14-Feb-11 9:31
memberEvgeny Vinnik14-Feb-11 9:31 
GeneralRe: Configure crashes this live wallpaper Pin
Evgeny Vinnik30-Mar-11 7:56
memberEvgeny Vinnik30-Mar-11 7:56 
GeneralRe: Configure crashes this live wallpaper Pin
timverhoeven30-Mar-11 9:48
membertimverhoeven30-Mar-11 9:48 
GeneralRe: Configure crashes this live wallpaper Pin
Member 852201531-Dec-11 15:13
memberMember 852201531-Dec-11 15:13 
GeneralRe: Configure crashes this live wallpaper Pin
Evgeny Vinnik3-Jan-12 8:27
memberEvgeny Vinnik3-Jan-12 8:27 
GeneralRe: Configure crashes this live wallpaper - thanks for update Pin
Member 85220156-Feb-12 17:11
memberMember 85220156-Feb-12 17:11 
Question??? Pin
Pedropassos24-Jan-11 10:37
memberPedropassos24-Jan-11 10:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 20 Mar 2012
Article Copyright 2010 by Evgeny Vinnik
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid