Making a Jingle Bells App – Part 4: Coding Background Change


Posted On by John Slater in Jingle Bells, Making Apps, Tutorials

So far we’ve covered the detection of shake via the devices accelerometer and created one action which will play a sound when called. The only function we are missing in the app we have put together so far is the colour changing of the background and also the general user interface, which we showed in part 1.

In this tutorial we will cover the building of the function which, when called, will test the current background colour and show the opposite colour each time the action is called. Following this we will add in the user interface image we designed in the first part of the tutorial and at this point we should we should have the app we set out to create. So moving swiftly into our current project (you can download the progress so far in the last tutorial) lets get to it.

1. Declare Background Change Action

Below the -(void)playJingleBell; action declaration we created in the last tutorial in the ViewController.h file we need to declare a new action, we’ll name this “changeBackground” because the action will change the background, makes sense i guess.

So this block should look something like this…

-(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration;

2. Create Background Change Action

Now we have declared the function we will create we will now create the function which is relatively simple to do using the UIColour class.

2.1 Starting the function

Open up ViewController.m and below the action -(void)playJingleBell we will create the new action for -(void)changeBackground;. We should already know how we start these off, but incase you don’t i’ve shown the code below.

-(void)changeBackground {
    // code goes here

2.2 Declaring Our Two Colours

The first thing we need to do is declare the two colours we are going to use. I’ve gone with a red colour and a green, two festive colours in my books. Using the scheme i showed you in the “UIColor: Understanding Colour in iOS” tutorial we will convert the RGB values for the two colours, which are…

Red Colour: (RGB) 166, 0, 0
Green Colour: (RGB) 15, 105, 56

Using this we now need to declare the object name for the two colours which we will call primaryColour and secondaryColor and each will be given a UIColor object for the two colours above using the aforementioned “RGB to colourWithRed” colour conversion technique which will give you code looking like this…

UIColor *primaryColour = [UIColor colorWithRed:166.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:1.0];
UIColor *secondaryColour = [UIColor colorWithRed:15.0/255.0 green:105.0/255.0 blue:56.0/255.0 alpha:1.0];

2.3 Determining Current Colour

Now we know what colours we want to use in the app and have successfully declared them we will need to check to see, when the action is called, whether or not the current background colour is the same as the primary colour and if this is true we will display the secondary colour, if not we will display the primary colour.

The UIColor class actually has the ability to check the colour against another UIColor and determine whether or not the colours are the same and return a boolean (true or false, yes or no) response to the query. The if statement for this check is shown below, in basic form the statement asks whether or not the primaryColor object is the same as the UIColor from the background of the main view.

    if([primaryColour isEqual:self.view.backgroundColor]){
        // if the current background is the same as primary colour, show secondary colour

    else {
        // if the current background is not the same as primary colour, show primary

In the “Lights On/Off” tutorial we covered how to change the background colour of the main view, we will employ the same method to do this in this tutorial also. If the statement matches we want to change the colour of the background from primaryColour to secondaryColour and if the statement does not match we will do the opposite.

    if([primaryColour isEqual:self.view.backgroundColor]){
        // if the current background is the same as primary colour, do this
        self.view.backgroundColor = secondaryColour;

    else {
        // if the current background is not the same as primary colour, do this
        self.view.backgroundColor = primaryColour;

3. Calling The Background Change Action

The last thing we need to do is actually call the action when the device is shaken and the background changing of the app will be 100% complete. It is also worth mentioning that when the device first launches we will also call the action so that the default background colour is replaced with a festive colour.

In our -(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration action we added a call to play the jingle bells sound in the last tutorial,m right below this is where we will call the background change, and we will call this action in exactly the same way. Your code should look something like…

// When Shaken Do Something
[self playJingleBell]; /* NSLog(@"Shake Shake Shake"); */
[self changeBackground];

Also in the default -(void)viewDidLoad action we will place the same line of code just below our accelerometer listener, so this should now look like…

- (void)viewDidLoad
    [super viewDidLoad];
	[UIAccelerometer sharedAccelerometer].delegate = self;
    [self changeBackground];

4. Adding The Interface Image

Lastly, before we have an totally ace app, we need to add in the image for the main user interface, this is the one i provided in the first part of the tutorial and you should have already imported this in part 2 of this tutorial.

Adding the image is straight forward enough, simply open the ViewController.xib file which will open up Interface Builder within Xcode and provide you with your main canvas.

Simply navigate to the UIImageView object in the Object pane and drag this into the middle of the canvas.

Xcode, by default, will try to make the UIImageView full width and full height, however if it does not be sure to drag the handles to fit the canvas.

Now in the preference pane on the right select “background.png” from the “Image” drop down menu.

Retina Display Tip

With the release of the iPhone 4 and iPhone 4S as well as the new iPod touches Apple has incorporated retina displays. On these devices which have a higher pixel density and therefore require bigger images for the interface, in fact the images need to be offered in true resolution as well as 200% higher resolution for retina display. Despite this however you will never need to reference the retina image directly because iOS will automatically look for the same image name with a @2x suffix and if the filename with this suffix exists it will replace the image with that.

5. Finishing Up

And there you have it when you run this app you will have a fully working iOS Jingle Bells app. We do have one little surprise for you though, think of it as a christmas present, we are going to publish one final tutorial with extra bits to help you clean up the app and get it running exactly like iJingle, my very own version of this app which was released into the app store.

Download The Xcode Project

You can download the Xcode Project for this tutorial to help you better understand the code and syntax.

Download Now!

About John Slater

I'm a professional web designer professionally, in a professional way, but also love iOS Development and two years ago is when i threw myself into the deep end and learnt enough to create a few apps. While i develop my skills i want to help others learn iOS development, because i'm kind like that. @slaterjohn