Mobiletuts+

Supplementing iAd Placement with AdMob

Brandon Trebitowski — Mon, 13 Feb 2012 12:30:23 +0000

Click-based advertising within a mobile application is a great way to make some money off of your free or inexpensive applications. While there are many choices out there, many iOS developers tend to go with the iAds platform for a variety of reasons including simplicity, aesthetics, and a high CPM.

Although iAds is great, it’s not quite the silver bullet you might be looking for. Being that iAds serves up very specific content from providers that must have a very specific contract with Apple, they often fail to fulfill in certain situations. These situations might be in a geolocation that ads have not been placed in, foreign countries, or just lack of publishers for a given time period.

In the production version of the Caterpillar Application I created, I implemented iAds and noticed that the fill rate falls somewhere in the 75% range. That’s not bad, however AdMob is usually somewhere in the 98% range! This brings me to the purpose of this post.

Wouldn’t it be great to have a hybrid solution to fill the ad spots with AdMob ads when iAds fails to deliver?

Step 1: iAds Setup

Since this is not an iAds tutorial, we are just going to start with a very simple iAds setup. It will be a banner view at the top of a regular UIView. I have begun with a single view project template and added the following code to the ViewController.h file:

#import &lt;UIKit/UIKit.h&gt;
#import &lt;iAd/iAd.h&gt;

@interface ViewController : UIViewController&lt;ADBannerViewDelegate&gt;

@property (nonatomic, strong) ADBannerView *bannerView;

@end

This is just declaring our banner ad that will be displayed in the view. Now, let’s take a look at the code to display the ad banner inside of ViewController.m:

#import "ViewController.h"

@implementation ViewController

@synthesize bannerView = _bannerView;

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.bannerView = [[ADBannerView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
    [self.bannerView setRequiredContentSizeIdentifiers:[NSSet setWithObjects:
                                                        ADBannerContentSizeIdentifierPortrait, nil]];
    self.bannerView.currentContentSizeIdentifier = ADBannerContentSizeIdentifierPortrait;
    [self.bannerView setDelegate:self];
    [self.view addSubview:self.bannerView];
}

- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error {
    NSLog(@"iad failed");
}

@end

This loads up an ADBannerView at the top of the window set in portrait mode. As of right now, when iAds fail to load, it will simply print “iAd Failed” to the log as you can see in the bannerView:didFailToReceiveAdWithError delegate method. We will make use of this delegate method in order to replace the iAd banner with an AdMob banner.

Step 2: AdMob Configuration

Start by downloading the iOS AdMob SDK here:

http://code.google.com/mobile/ads/download.html

Extract it somewhere on disk and drag every file into your project. When asked if you want to copy the files in, check yes.

There are also some libraries that you must link in, in order to use AdMob:

AudioToolbox
MessageUI
SystemConfiguration
CoreGraphics

Once you have done this, you should be all set to implement the AdMob ads.

Step 3: Fill the iAd Spot With AdMob

Let’s start by revisiting ViewController.h and updating the code to look like this:

#import &lt;UIKit/UIKit.h&gt;
#import &lt;iAd/iAd.h&gt;
#import "GADBannerView.h"

@interface ViewController : UIViewController&lt;ADBannerViewDelegate, GADBannerViewDelegate&gt;

@property (nonatomic, strong) ADBannerView *bannerView;
@property (nonatomic, strong) GADBannerView *admobBannerView;

@end

All we did here was tell our class to be a delegate of GADBannerView and created a property for a GADBannerView. Also, make sure that you @synthesize the admobBannerView in the ViewController.m file.

The last part is to replace the iAd with the AdMob banner when it fails to load. This can be done by adding some code to the bannerView:didFailToReceivedAdWithError method in ViewController.m:

- (void)bannerView:(ADBannerView *)banner didFailToReceiveAdWithError:(NSError *)error {

    // 1
    [self.bannerView removeFromSuperview];

    // 2
    _admobBannerView = [[GADBannerView alloc]
                    initWithFrame:CGRectMake(0.0,0.0,
                                             GAD_SIZE_320x50.width,
                                             GAD_SIZE_320x50.height)];

    // 3
    self.admobBannerView.adUnitID = @"a14ec3f0a2028f2";
    self.admobBannerView.rootViewController = self;
    self.admobBannerView.delegate = self;

    // 4
    [self.view addSubview:self.admobBannerView];
    [self.admobBannerView loadRequest:[GADRequest request]];
}

So, here’s what is going on:

We remove the iAd banner from the current view. It will no longer be needed for the duration of this session. You could get tricky and try to make more requests to iAds, but it’s not really necessary.
Here we instantiate the AdMob banner telling it to give us a banner that is 320 by 50 and place it at the top of the screen.
This is the setup code for the AdMob banner (Feel free to use my ad unit id ;) ).
Finally, we add the AdMob banner to our view and tell it to fetch an ad.

Step 4: Testing It Out

One thing to note is, you will never see iAds fail in the simulator. Perhaps if you had the Internet disabled you might, but then you wouldn’t even be able to fetch the AdMob ad. The best way to test is to simply force the call of the bannerView:didFailToReceiveAdWithError method from inside of viewDidLoad:

[self bannerView:self.bannerView didFailToReceiveAdWithError:nil];

This will simulate the iAd failing and run through the code to fetch and display the AdMob ads.

Step 5: Final Steps

Now that we have this dual solution in place, it is very unlikely that the user won’t see an ad. However, there is still that slight chance that both iAd and AdMob fail. In that case, I like to give the user a break and not show them anything. Sort of like a freebie for the day ;). So, the final method will be called when AdMob fails to load.

- (void)adView:(GADBannerView *)view didFailToReceiveAdWithError:(GADRequestError *)error {
    [self.admobBannerView removeFromSuperview];
}

As you might expect, when AdMob fails, we remove its view from the screen and the user wins!

Wrap Up

I hope that you have found this tutorial useful for ~~bleeding every penny out of your users~~ your development efforts. Although I have used AdMob, you are free to use this same design pattern to combine/chain any of the Ad networks that you prefer to work with. You may download the source code for this tutorial at the very top.

If you have any questions or comments, feel free to leave them here or write me on Twitter.

Happy coding!

Corona SDK: Create a Rapid Roll-like Game – Setup

Carlos Yanez — Sat, 11 Feb 2012 01:36:41 +0000

In this tutorial series, you’ll learn how to create your own version of the classic Rapid Roll game. Read on!

Step 1: Application Overview

Using premade graphics, we will code an entertaining game using Lua and the Corona SDK APIs.

The player will be able to move a character across the stage and the platforms using the Accelerometer and you will be able to modify the parameters in the code to customize the game.

Step 2: Target Device

The first thing we have to do is select the platform we want to run our app within. By doing so, we’ll be able to choose the size for the images we will use.

The iOS platform has these characteristics:

iPad: 1024x768px, 132 ppi
iPhone/iPod Touch: 320x480px, 163 ppi
iPhone 4: 960x640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

Google Nexus One: 480x800px, 254 ppi
Motorola Droid X: 854x480px, 228 ppi
HTC Evo: 480x800px, 217 ppi

In this tutorial we’ll be focusing on the iOS platform with the graphic design, specifically developing for distribution to an iPhone/iPod touch, but the code presented here should apply to Android development with the Corona SDK as well.

Step 3: Interface

A simple and friendly interface will be used, this involves multiple shapes, buttons, bitmaps and more.

The interface graphic resources necessary for this tutorial can be found in the attached download.

Step 4: Export Graphics

Depending on the device you have selected, you may need to export the graphics in the recommended ppi, you can do that in your favorite image editor.

I used the Adjust Size… function in the Preview app on Mac OS X.

Remember to give the images a descriptive name and save them in your project folder.

Step 5: App Configuration

An external file will be used to make the application go fullscreen across devices, the config.lua file. This file shows the original screen size and the method used to scale that content in case the app is run in a different screen resolution.

application =
{
    content =
    {
        width = 320,
        height = 480,
        scale = "letterbox"
    },
}

Step 6: Main.lua

Let’s write the application!

Open your prefered Lua editor (any Text Editor will work, but you won’t have syntax highlighting) and prepare to write your awesome app. Remember to save the file as main.lua in your project folder.

Step 7: Code Structure

We’ll structure our code as if it were a Class. If you know ActionScript or Java, you should find the structure familiar.

Necesary Classes

Variables and Constants

Declare Functions

    contructor (Main function)

    class methods (other functions)

call Main function

Step 8: Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

This code hides the status bar. The status bar is the bar on top of the device screen that shows the time, signal, and other indicators.

Step 9: Load Physics Engine

We’ll make use of the poweful Box2D engine built into Corona, use this code to include it in your app:

local physics = require('physics')
physics.start()
physics.setGravity(0, 0)

Step 10: Background

A simple graphic is used as the background for the application interface, the next line of code stores it.

-- Graphics
-- [Background]

local bg

Step 11: Title View

This is the Title View, it will be the first interactive screen to appear in our game, these variables store its components.

-- [Title View]

local title
local startB
local creditsB

-- [TitleView Group]

local titleView

Step 12: Credits

This view will show the credits, year and copyright of the game, this variable will be used to store it.

-- [CreditsView]

local credits

Step 13: Score & Lives

The Score and Lives are handled by the following variables.


local live
local livesTF
local lives = 3
local scoreText
local score = 0
local alertScore

Step 14: Blocks & Player

The blocks are the platforms where our player will step on, stored in the next lines of code.

-- [Blocks group, Player]

local blocks
local player

Step 15: Game View

The gameView variable is a group that will contain all the game graphics, this will help us handle them all at once.

--[GameView Group]

local gameView

Step 16: Variables

These are the variables we’ll use, read the comments in the code to know more about them. Some of their names are self explaining so there will be no comment there.

-- Variables

local moveSpeed = 2
local blockTimer
local liveTimer

Step 17: Code Review

Here is the full code written in this tutorial alongside with comments to help you identify each part:

-- Blocks 'Rapid Roll' like Game
-- Developed by Carlos Yanez

-- Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

-- Physics

local physics = require('physics')
physics.start()
physics.setGravity(0, 0)

-- Graphics
-- [Background]

local bg

-- [Title View]

local title
local startB
local creditsB

-- [TitleView Group]

local titleView

-- [CreditsView]

local credits

-- [Score & Lives]

local live
local livesTF
local lives = 3
local scoreText
local score = 0
local alertScore

-- [Blocks group, Player]

local blocks
local player

--[GameView Group]

local gameView

-- Variables

local moveSpeed = 2
local blockTimer
local liveTimer

Next Time…

In this part of the series you’ve learned the interface and the basic setup of the game. Stay tuned for part two where we will handle the logic of the application, buttons behavior and more. See you next time!

PhoneGap From Scratch: Camera API & App Exporting

Shaun Dunne — Thu, 09 Feb 2012 08:44:09 +0000

This entry is part 5 of 5 in the series PhoneGap From Scratch

Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together “Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

Adding Camera Functionality

We left off in the last tutorial in this series just after getting our application into the Phonegap framework and awaiting to add our final piece of functionality: the device camera. The idea behind this tutorial is to allow the user to take a photo with the camera and then have it uploaded to a server. We will not cover the actual uploading of the image, but will leave the space for the functionality to be added. You can find plenty of examples of various implementations for uploading images via PHP, Ruby, and other server side languages elsewhere online. Instead, this tutorial will focus on taking the picture, displaying the picture taken, and giving the user an alert that the picture has been uploaded (the function that your server might fire when it returns a successful upload message).

The first thing we need to do is add a button onto our page:

<div id="camera">
	<button class="camera-control" onclick="capturePhoto();">Capture Photo</button>

    <div style="text-align:center;margin:20px;">
        <img id="cameraPic" src="" style="width:auto;height:120px;"></img>
    </div>
</div>

Next, we need to add a bit of styling for the button to make it look a bit nicer. As we are developing for decent browsers, we can take advantage of some CSS3 styles.


button.camera-control {
  background-color: #f3f3f3;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(50%, #dddddd), color-stop(50%, #d2d2d2), color-stop(100%, #dfdfdf));
  background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  background-image: linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #b4b4b4;
  border-right: 1px solid #dfdfdf;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  box-shadow: inset 0 1px 0 0 white, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef;
  color: #666;
  display: block;
  font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
  margin: 10px auto;
  padding: 7px 0;
  text-shadow: 0 1px 1px #fff;
  width: 150px;
}
button.camera-control:hover {
    background-color: #e5e5e5;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5e5e5), color-stop(50%, #d1d1d1), color-stop(50%, #c4c4c4), color-stop(100%, #b8b8b8));
    background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    background-image: linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
    -webkit-box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3;
    box-shadow: inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3; }
  button.camera-control:active {
    -webkit-box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
    box-shadow: inset 0 0 30px 0 #999999, 0 1px 0 0 white;
}

If you now run and test your app (either the simulator or on a device) you should have a page like this:

Now we need to tie in the functionality. First, we start off with the capturePhoto() function that will start up the camera:

function capturePhoto(){
	navigator.camera.getPicture(uploadPhoto,null,{sourceType:1,quality:60});
}

The success function, uploadPhoto, is the next to be written. This function will upload the photo to our server, output the image to the screen, and also give the user a notification that the image has been uploaded. Let’s start by outputting the image to the screen:

function uploadPhoto(data){
// this is where you would send the image file to server

//output image to screen
	cameraPic.src = "data:image/jpeg;base64," + data;
}

One of the Phonegap APIs that we didn’t really look at before, but we will use here, is the notification API. The Notification API is for alerting the user of an action performed, like the alert() Javascript functionality, but tailored for the specific device that it is running in. It also has the ability to beep, vibrate, or just simply pop-up and alert a dialog message. For this app, we are just going to be using the notification.alert(), which is a dialog box that can accept some customizable options. The basic usage is:

navigator.notification.alert(message, alertCallback, [title], [buttonName])

Within our uploadPhoto function, we are going to use the notification.alert() to display a message that the photo has been uploaded to the server. Our code looks like this:

navigator.notification.alert(
	'Your Photo has been uploaded',	// message
	okay,					        // callback
	'Photo Uploaded',            	// title
	'OK'                  			// buttonName
);

We also need to write the okay function to make sure that we don’t run into any errors when we run our code. It can do anything you want it to, but it’s better used when tied into the server. At the moment, the function will remain empty.

Our uploadPhoto() function now looks like this:

function uploadPhoto(data){
// this is where you would send the image file to server

	cameraPic.src = "data:image/jpeg;base64," + data;
	// Successful upload to the server
	navigator.notification.alert(
		'Your Photo has been uploaded',  // message
		okay,                           // callback
	    'Photo Uploaded',              // title
	    'OK'                          // buttonName
	);

	// upload has failed Fail

	/* 

	if (failedToUpload){

	navigator.notification.alert(
		'Your Photo has failed to upload',
		failedDismissed,
	    'Photo Not Uploaded',
	    'OK'
		);

	}
	*/

}

function okay(){
	// Do something
}

You will now need to run the application on a device, as the simulator has no access to a camera. After taking a picture, you will get the following alert:

Our app is now complete and we are ready to export it as a working application and submit it to the stores!

Exporting for iOS

Please note that in order to distribute an application in the Apple App Store, you must have a paid-for developer certificate from Apple.

Exporting for the iOS platform can be a bit of a challenge, but as long as you have all your certificates pre-installed and synced up with Xcode (which you would have to have done before you could test on a device) it shouldn’t be too challenging after you’ve done it once. If you double click on your project in Xcode and go to the Build Settings, make sure that your code signing identity is being used for the application.

You now need to go to Product => Archive and send the app to the Archive (Found in the Organizer window). It’s possible that you may get an error along the lines of NSAutomaticpool is unavailable, this is due to Automatic Reference Counting (which is new). PhoneGap doesn’t support it at the moment, so we just need to switch it off in the build settings for the project. If you go to the build setting and search for -CLANG_ENABLE_OBJC_ARC you will find it and switch it to “no”.

Once that is done, you can head to iTunes Connect and begin setting up your app there. Once you have logged in, click on “Manage Applications” and “Add A New App”. Go through the Wizard, add the iTunes Icon (512x512px in size) and at least one screenshot of the application. There are some other mandatory fields such as an SKU number (this is a tracking number for yourself. I personally use 0001 to start and continue from there) and a description. Once you have finished filling out the form, click submit.

Once finished you will be presented with the following

At first, your Applications Status will be “Prepare for Upload”, so you need to click “View Details” and then “Binary Upload”. Once you’ve gone through this, your status will now be “Ready for Upload”.

Back in Xcode’s Organizer we can run the Validate option to check that our app is all good to be submitted to the App Store and hopefully the app will get by with no validation errors.

Note: Jumping through all the hoops that Apple presents is not an easy task to master. If you are getting various errors to do with builds failing because provisioning profiles couldn’t be found etc, etc, do a quick search on Google and you will find the solution. There are 100 different scenarios with miss-matched certificates that I have faced while trying to build an app for iOS, all solved by using Google. If you are consistently running into issues, feel free to leave a comment below and I will try to help!

Now that our app is valid, we can submit it to the App Store. We click submit, check that our Application and Identity are correct, and then wait for the upload.

Once done, you can login to iTunes Connect and see that the app is “Waiting for Review”. It can often take up to 14 days before your app is in the App Store, so expect to wait for a bit.

Exporting for Android

Thankfully, after all the possible pain you might have gone through with the iOS export, Android is mildly easier. Assuming that you are using Eclipse for your Android development, all you need to do is remove any unused features from the manifest file and then right-click on the project and go down to Android Tools => Export Signed Application Package. Once you have gone through the Wizard to export your package, you need to make sure you create a Keystore. You’ll end up with an .apk file, which is what we will upload to the Android market.

Head over to the Android Market publisher’s site here and sign in. If this is your first time here you will need to sign up for an account (using your existing Google account), pay $25, and setup a Google wallet account. Once signed up and logged in, you can go ahead and upload your .apk file. It’s a much more straightforward process than the iOS route. If you do feel that the form is overwhelming or you’re not too sure about something, check out Shane Conder & Lauren Darcey’s tutorial here on mobiletuts as they go through it step-by-step. Their entire series on Android development is worth reading if you are at all interested in taking your development further!

Once you’re done, it takes no time at all before your app is on the market place and ready to be sold.

Exporting for Other Devices

As stated in the first tutorial of this series, we are going to take advantage of PhoenGap’s cloud building system found at build.phonegap.com. In the long run, using this service does cost money, but the other option of running various different SDKs across various operating systems and then porting the app over each one might be more time consuming and hassle than the extra money it costs to use the service is worth.

All we need is a zip file containing our HTML, CSS, and JavaScript. Upload it to the service and you will then be taken to a “Your Apps” screen where you will see your app available in its various formats:

It’s a simple click and download to get the right build. To get started for Blackberry, we need to submit our app to their “App World”. Head over to the App World here and click “Get Started”. Fill in the pretty straightforward form and then wait.

NOTE: Unfortunately, at the moment (2/8/2012), Blackberry apparently has a backlog of “Vendor” applications. I have been waiting since the beginning of January to be approved but have thus far had no such luck. They are currently running a Playbook promotion for those willing to convert their Android apps, which is causing the backlog. If you are at all interested in signing up to be a Blackberry Vendor, sign up ASAP.

For the other devices supported by PhoneGap’s cloud build service, it’s worth signing up at their relevant development sites: Nokia and webOS. They are very similar and full of documentation for uploading applications to their relevant markets. They follow the same sort of process (Sign Up, Upload App, Upload Marketing Materials, Wait) and are reasonably straightforward to follow.

Conclusion

We have now finished our app, exported it, and uploaded it to the iOS App Store as well as the Android market. We also used PhoneGap’s build service to get a version of our app onto the other platforms we might want to support.

Phonegap is going from strength-to-strength at the moment and continuing to grow (version 1.4 was just recently released). It’s well worth getting to know this SDK if you are just starting out in mobile development and have no understanding of the native programming languages behind the Android or iOS platforms. Hopefully this tutorial series has shown you how to do just that!

Continuous Integration – Tuts+ Premium

Aron Bury — Wed, 08 Feb 2012 04:22:59 +0000

In this tutorial series we will explore a rarely discussed (but highly valuable) process of developing software that is disappointingly absent in the iOS and mobile world: Continuous Integration. Today’s tutorial will teach you how to script your own Xcode builds!

Tutorial Teaser

Where We Left Off

In part 1, we discussed the concept of Continuous Integration and how it can assist us in developing software faster. Part 2 went through installing Apache Tomcat, the web server that runs our CI server software. In part 3, we installed and configured Hudson to monitor our project and begin the build process whenever we update our project repository. In part 4, we wrote a basic build script that compiled our project and generated an IPA file.

Where To Go From Here?

Right now we’ve got a functioning build script, but there is so much more we can do! This tutorial is a little different from the others. Instead of taking you through a series of steps, there will be a collection of helpful additions that you can add to your script and, depending on your circumstances, you can choose to add them or not.

Addition 1: Modify Your Script To Use Functions

Bash scripts can use functions just like other languages. Large build scripts can get pretty long, so it’s important to organize it as much as possible. Functions are a great way of doing this.

Let’s put all of our existing code into a function called “buildApp”. Open your script and enter the following code:

function buildApp
{
	#existing code goes here
}

To call our “buildApp” function, simply enter the following below the function declaration:

buildApp

As you add more functionality to your script you can place them in differently named functions such as “distributeApp” or “signApp”.

Get the Full Series!

This tutorial series is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

For those unfamiliar, the family of Tuts+ sites runs a premium membership service called Tuts+ Premium. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Mobiletuts+, Nettuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+. You’ll learn from some of the best minds in the business. Become a premium member to access this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Android Essentials: Publishing to Specific Devices

Shane Conder & Lauren Darcey — Mon, 06 Feb 2012 07:57:30 +0000

This entry is part 13 of 13 in the series Android Essentials

As the Android platform continues to grow and spread to new types of devices, it becomes more important for developers to keep track of where their applications are deployed. While market filters are available for developer configuration, sometimes the default filters don’t go far enough. This tutorial will teach you to exclude specific devices manually!

The Android Market allows developers to specifically exclude devices by name. These devices are organized by manufacturer. You can only create a list of exclusions (a.k.a. a black list), not inclusions (a.k.a. a white list), although inclusions are feasible simply by blacklisting every device except the few you want to “include”. The exclusion feature is built more for the developer who runs into a device-specific problem and needs to exclude a device until they have a chance to fix the underlying problem. It is not currently a sophisticated publication rules engine.

Note: The Android Market manual exclusion list only controls how the Android Market lists your applications for users to download. No actual changes are made to the application package itself. Your app can still be installed on “excluded” devices without issue if the user were to find the package through other means, unlike some of the Android manifest file features which the Android platform actually checks for and enforces.

Step 0: Reasons to Exclude Devices

Before you go configuring your application listing on the Android Market from excluding specific devices, give some thought as to why you are doing so. Under normal circumstances, you should be able to solve any incompatibility issues using the market filters built into the platform. For example, you should be setting the Android Manifest file settings to filter your application in terms of appropriate API Levels and other flags. Some reasons you might want to use the manual exclusion feature of the Android Market include:

Excluding a problematic device, such as one that routinely has caused your application to have bad ratings (until you can fix the problem).
Excluding a class of devices with specific form factors, features, or configurations not supported with Android manifest file settings (like excluding all tablets).
Excluding all devices from a specific manufacturer for contractual reasons.
Forcing your application to be published only on a very specific subset of devices (and no others), likely for business reasons.

The first option is the only real technical reason this would be needed. It’s a good option if you need to quickly disable access by certain devices while you come up with a fix or workaround to the issue.

Step 1: Login to Your Market Account

You must have a valid Android Market account and an application ready to publish or already published to manage an exclusion list. Each application can have its own exclusion list that is managed separately; they may not be combined at this time. We will assume your application is already uploaded to the Android Market.

Step 2: Select the Application to Manage

On your Android Market Developer dashboard, you should see all Android Market listings when you login to your account. Choose the application you want to manage by clicking on its name. This will bring you to the Product details tab of your application’s profile, where you can upload screenshots and other information for the application’s market listing. The compatible devices are based on the latest APK file, so make sure this file is up to date before you configure any specific publication options.

Step 3: Configure the Publishing Options

Scroll down the Product details tab to the Publishing Options section. At the very bottom of this section, there is a configuration option called Supported Devices. By default, this section will show the number of devices that match the configuration defined by your application’s Android manifest file. For example, this section might look like Figure 1.

Step 4: Excluding Specific Devices

To exclude specific devices, click on the Show devices link next to the sentence that states how many devices your application is available to. This launches the Device Availability dialog, which lists all the devices that the Android Market will currently publishes your application to. By default, this list is organized by manufacturer. So, for example, I could decide I didn’t want my app on my Asus Transformer Prime by selecting it from the list of available devices, as shown in Figure 2.

If Asus decided to ship a new version of the Asus Transformer Prime, like an Asus Prime II: Deceptipad (see what we did there?) or something, your application would automatically include it until you came in and excluded it manually (assuming it was compatible with the Android manifest file settings). New devices are added on a regular basis, usually within two weeks of release.

Once you return to the Publishing Options, you will see that it indicates that you are manually excluding devices, as shown in Figure 3 below:

Step 5: Searching for Devices

You can use the Device Availability dialog to search for specific devices by manufacturer, name, or device brand name.

Conclusion

The Android Market development team is constantly improving the developer dashboard for application management. Normally, developers should simply configure the proper Android manifest file settings in order to ensure their applications are published to compatible devices. However, there are some valid reasons why a developer might want to “blacklist” or exclude specific devices when they publish an application. This feature is available in the Android Market developer dashboard, where the developer can manually exclude specific devices.

Do you blacklist any devices for technical reasons? If so, which ones and why?

About the Authors

Mobile developers Lauren Darcey and Shane Conder have coauthored several books on Android development: an in-depth programming book entitled Android Wireless Application Development, Second Edition and Sams Teach Yourself Android Application Development in 24 Hours, Second Edition. When not writing, they spend their time developing mobile software at their company and providing consulting services. They can be reached at via email to androidwirelessdev+mt@gmail.com, via their blog at androidbook.blogspot.com, and on Twitter @androidwireless.

Need More Help Writing Android Apps? Check out our Latest Books and Resources!

Best of Tuts+ in January 2012

David Appleyard — Fri, 03 Feb 2012 15:06:27 +0000

Each month, we bring together a selection of the best tutorials and articles from across the whole Tuts+ network. Whether you’d like to read the top posts from your favourite site, or would like to start learning something completely new, this is the best place to start!

Psdtuts+ — Photoshop Tutorials

Create a Pimped Out Truck Using Photoshop and Point and Shoot Photos

Making modifications to your car or truck in Photoshop can be a lot of fun. In this tutorial we will demonstrate how to create a pimped out truck modification using photos taken with a simple point and shoot camera, with no advanced lighting setup. Let’s get started!

Visit Article
Create an Elephant Sundae Using Photo Manipulation Techniques

Photoshop is great at seamlessly combing photos to create an entirely new scene. In this tutorial we will create an elephant sundae using several stock photos. Let’s get started!

Visit Article
The Incredible Digital Art of Michael Oswald

In this article we will be featuring the work of Michael Oswald. Oswald is a digital artist with a unique style. His technique involves a combination of photo manipulation and digital painting techniques and the results are often stunning. Let’s take a look!

Visit Article

Nettuts+ — Web Development Tutorials

Sublime Text 2 Tips and Tricks (Updated)

Sublime Text 2 is one of the fastest and most incredible code editors to be released in a long time! With a community and plugin ecosystem as passionate as this one, it just might be impossible for any other editor to catch up. I’ll show you my favorite tips and tricks today.

Visit Article
An In Depth Analysis of HTML5 Multimedia and Accessibility

In this tutorial, youll learn how HTML5 helps to provide you with several ways of presenting your media content to users. As a result, youll increase the availability of your media to users with different
needs and requirements, making it more accessible.

Visit Article
Writing an API Wrapper in Ruby with TDD

Sooner or later, all developers are required to interact with an API. The most difficult part is always related to reliably testing the code we write, and, as we want to make sure that everything works properly, we continuosly run code that queries the API itself. This process is slow and inefficient, as we can experience network issues and data inconsistencies (the API results may change). Let’s review how we can avoid all of this effort with Ruby.

Visit Article

Vectortuts+ — Illustrator Tutorials

How to Illustrate a Microscope in Illustrator

The microscopes is a symbol of our civilization. Throughout this tutorial on how to illustrate a vector microscope you’ll take advantage of numerous Illustrator tools. You will learn how to use blends, art brushes and 3D rendering in Adobe Illustrator. Let’s get started!

Visit Article
Create a Picture Gallery in Illustrator

This work is a common project created together with Iaroslav Lazunov and Alexander Egupov. We have used 3D rendering, Blends, Opacity masks, making this three-dimensional stage with vanishing points. Learn every step in how to create this picture gallery work.

Visit Article
Important Resources for Learning How to Design Typefaces and Full Fonts

If you’re serious about creating a typeface design, then you’ll need some solid resources to get started. Learn effective typeface design workflows, how to take an initial spark of an idea from sketch, through Illustrator, into Fontlab, and then work your creation into a complete and custom font design. Here are multiple tutorials that show you how to create fonts in Illustrator and Fontlab, and you can also dive into articles that describe the foundation of quality type design with ample inspirational examples.

Visit Article

Webdesigntuts+ — Web Design Tutorials

A Beginner’s Guide to Pairing Fonts

Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

Visit Article
Design a Series of Smart Banner Ads in Photoshop

With the continuous growth of the Internet, online marketing has gotten bigger every year, and along with it, the advertising industry. One major factor in all this craziness is buying and selling ads.

Visit Article
Twitter Bootstrap 101: Introduction

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

Visit Article

Phototuts+ — Photography Tutorials

HDR: Love it or Leave It?

There are few techniques in the photography world that divide our community as much as HDR. High dynamic range images, or HDR images, are a special type of composite image that combines several images at different exposure settings in order to create an image with increased dynamic range. The look provided by HDR is loved by many, and disliked by perhaps just as many. In today’s article, we’re going to take a better look at what HDR is, and get some opinions from photographers using HDR.

Visit Article
Inspiring Images of Cars and Motorcycles

Cars and motorbikes have been around for 100 years. Throughout the century, they have looked beautiful, satisfied our need for speed and become a symbol for thrill seeking. Today, we’ll look at photos ranging from brand new Ferrari’s to classic muscle cars.

Visit Article
Quick Tip: GIMP Portable – Take Your Editing Software With You

While a number of smartphones now offer photo editing basics (and a plethora of apps to expand things even more), the portability of a solid photo editing program has been hard to come by. Photoshop is a monster in regards to space requirements and its ability to work on any system where it is not expressively installed. Picasa can be fairly ‘lightweight’ but lacks many of the more advanced photo editing tools. So what about GIMP?

Visit Article

Cgtuts+ — Computer Graphics Tutorials

Modeling, UVmapping And Texturing A Low Poly T-Rex In Blender, Part 1

In the first tutorial of 2012 you’ll learn how to create an awesome low-poly dinosaur using Blender and Gimp. In today’s post artist Karan Shah will walk you through the entire modeling process step by step, and show you how to create an optimized model suitable for use in any game engine.

Visit Article
Create A Realistic Explosion In Maya Using Maya Fluids

Today you’ll learn to animate and shade fluids, understand all of the major attributes, learn how adding fields will allow you to gain better control over your simulation, and how to light and render the final animation.

Visit Article
SpeedTree To UDK: The Complete Workflow, Part 1 Creating The Tree

Due to the shear number of polygons often required to make believable 3D trees, creating realistic ones for use “in-game” can be a challenging, time consuming task. SpeedTree from IDV aims to change all that with it’s intuitive UI, ease of use and powerful toolset. Making believable trees and plants has literally never been easier!

Visit Article

Aetuts+ — After Effects Tutorials

Dominoes” CameraTracker and Cinema 4d Case Study – Day 1

In this tutorial we’re going to go over the principle functionality of CameraTracker from The Foundry, learning basic workflow, optimizing results, aligning the ground plane and exporting this data from After Effects to Cinema 4d.

Visit Article
Make An Amazing Motion Reactant Flame – Tuts+ Premium

Using just a few video elements of torch flames, we composite a burning hand by using a series of null objects and expressions to drive a time lagged displacement effect to simulate fire burning from a moving source. We use the Puppet tool for the distortion and throw on some tracked lighting effects and a displacement map for the Heat. This principle can be used to add realistic, fluid motion to any tracked object.

Visit Article
Key Tips To Becoming A Successful Video Freelancer

Youve watched thousands of tutorials. Youve put in countless hours and spent many late nights working on personal projects. Youve finally come to the conclusion that this may just be something you would like to do for a career. It can seem a little intimidating at first, because how are you going to convince someone to pay you to do this? Up until now youve been your only client. How do you get more? Im going to share my insight and experiences on how to successfully launch your freelance career this year!

Visit Article

Audiotuts+ — Audio & Production Tutorials

Free Professional Quality Audio Unit Plug-ins for Mac

Lets face it, software is expensive. While there are hundreds of free plug-ins available online, more often than not two problems will arise: One, most of them are for PCs leaving us Mac users feeling left out. Two, most of them are vary poor quality.

While I do agree with the saying, “The tools are only as good as the artist,” I also believe the opposite is true; that at some point the artist can only be as good as his tools are.

Visit Article
Quick Tip: Drum Processing Part 4: Tips and Tricks

This short series of quick tips is designed to give you a good overview of the audio processing techniques involved in creating a professional sounding drum beat for use in house, electro and breaks in Cubase. In this final part we will look at a few ways to add even more life to your drums.

Here is a sample of the type of beat you could expect to end up with at the end of this series of tips:

Visit Article
Quick Tip: Use the Doubling Technique for Quick Drums

It’s 3:30 in the afternoon when your phone rings. The head of a music library is calling and she needs your help. They have a commercial for an A-list client that needs music, and they want you to submit an entry. You’ll get $10,000 if you land the gig.

Visit Article

Activetuts+ — Flash, Flex & ActionScript Tutorials

Create a Microphone-Controlled Flash Game: Code

In this mini-series, we’re creating a spaceship game where the main control is via the microphone: shout louder to make the ship fly higher. So far, we’ve created all the required graphical elements for the game. Now, it’s time to work on our code. We’ve got a lot to do, so let’s get started!

Visit Article
Why Bother With jQuery? A Guide for (Former) Flash Developers

If you, like many Flash developers, are looking into using HTML5 for your web apps, you’ll almost certainly have come across jQuery. It’s a very popular JavaScript library, used by a large percentage of the most visited websites – but what’s all the fuss about, and should you use it?

Visit Article
An Introduction to the HTML5 Gamepad API

As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter for both us developers and our end players. One of these is the GamepadAPI, which allows you to connect your good old console gamepad into your computer and use it for browser based games, plug and play style. Let’s dive in!

Visit Article

Wptuts+ — WordPress Tutorials

The Rise of HTML5 in WordPress

2011 was a big year for the advancement of HTML5 in the web development community. It became pretty widely adopted, especially for the mobile web. There have been major projects that help developers use HTML5, like Paul Irish’s HTML5 Boilerplate (technically 2010, but popularized in 2011) and books galore!

Visit Article
Reusable Custom Meta Boxes Part 3: Extra Fields

In Part 1 and Part 2 of our custom meta box template tutorial series, we learned how to create a field array to loop through and create a custom meta box with your standard fields. Now let’s throw in a bit of JavaScript for some fancy, but highly useful fields.

Visit Article
The Ultimate Quickstart Guide to Speeding Up Your WordPress Site

Give your site a boost! Implement crucial optimization techniques that will improve not only your ySlow score, but your Google rank too. In this tutorial we will cover all aspects of W3 caching, ySlow, Google page speed, CSS sprites & htaccess rules, to achieve a high ySlow score like i have done on my blog.

Visit Article

Mobiletuts+ — Mobile Development Tutorials

iOS SDK: Creating an Awesome Carousel

Engage your users with stunning carousels. We’ll look at how easy and clean it can be to implement scrollable, interactive carousels in your iOS applications. With high configurability, you can have 3D, flat, rotating, and endless scrolling arrays for data, images, or buttons.

Visit Article
PhoneGap From Scratch: Introduction

Want to learn how to use PhoneGap, but don’t know where to get started? Join us as we put together “Sculder”, not only a tribute to an excellent science fiction TV series, but a fully-fledged native mobile application for the believer in you!

Visit Article
Mobile Flash is Far From Dead: Setting the Record Straight

In light of recent announcements from Adobe, there has been a lot of confusion over the state of the Flash Platform – specifically in regard to Flash content on mobile devices. This article seeks to clarify many of the misconceptions that exist by addressing the main points of confusion around these announcements regardless of the initial, monumental, and absolutely unbelievable blunders from failed public (and private) relations messaging and general marketing surrounding these announcements.

Visit Article

PhoneGap From Scratch: Twitter & Maps

Shaun Dunne — Thu, 02 Feb 2012 14:22:15 +0000

This entry is part 4 of 5 in the series PhoneGap From Scratch

Where We Left Off

In the last part of this series, we got our web app up and running with some basic structure and transitions between pages. In this part, we are going to continue working on filling out the parts of the app that can run without PhoneGap and set up our PhoneGap project, ready for the integration.

Before we get started, I wanted to cover a question that I always get asked. This is a question that I once asked, and no doubt you might have asked too. Namely: How do I debug a web app on a mobile device?

Debugging on a Device

There are a number of ways of debugging in a device. You could go old-school and use alert(something);, but having alerts all over the place is both inefficient and could end up in the production code (so annoying!). You could use the debug console in Safari on an iOS device, located in Settings -> Safari -> Developer, but not all devices use Safari or have a debug console. Also, this console outputs minimal information.

If I just need to use a JavaScript console to catch a console.log(), or maybe execute some JS on the device to check something, I like to use jsconsole.com. It’s one of the easiest methods of using a console on your device and there is even an iOS app available. To start a session on jsconsole.com, just type :listen and you will then get a script tag output to include in your page. Start up you app and you will see the connection happen in the console. You can now execute JS in the console and see it reflected on the device or log to the console in your code and see it here. See the video below for a demonstration of this:

For more help on jsconsole, see here.

Another alternative is WeInRe (Web Inspector Remote). First started off as an independent project, WeInRe is now part of the PhoneGap family and can be found at debug.phonegap.com. The set-up is very similar to jsconsole, but what you actually get is a a WebKit inspector, much like Chrome or Safari. See the video below for an example:

Another alternative is Socketbug, which is great, but requires Node and socket.io to be installed and set up, which is unfortunately outside of the scope for this tutorial. If, however, you are feeling adventurous and want to give Socketbug a try – it’s worth it.

Those are the debugging tools that I use. Now we can start adding some features!

Twitter Feed

One of the features that we are able to implement without a PhoneGap API is the Twitter feed. This feature will simply list a feed of tweets that match a particular search term. Thankfully, Twitter can return data in JSON format when we run a query on search.twitter.com. If you use the following URL http://search.twitter.com/search.json?q=ufo+spotted&rpp=4, you will get a JSON response filled with enough data to fill a list.

In order to get our data onto the page and display it in a nice way, we are going to use templating. There are a bunch of template engines out there and they are all worth looking at, Mustache is a very popular one and very powerful. jQuery also has one which I think is perfect for what we want to achieve.

In the tweet page, I am going to have an empty ul and a div container that is hidden on the page. Within the container will be the code that I want to use as a template. In this case, it is a simple li element with some basic markup that will hold the twitter information we want to display. It will be in a script block that has a unique ID and a type of type="text/x-jquery-tmpl", this is so the browser does not execute it as JavaScript. The Twitter templating engine uses ${} as a placeholder for the data that we will get from our JSON data. The tweets page now looks something like this:

<div id="twitter" class="current">
	<ul id="tweets">

	</ul>

	<script id="tmpl-tweets" type="text/x-jquery-tmpl">
    	<li>
			<a class="avatar" href="#"><img src="${profile_image_url}" alt="${from_user}"></a>
			<a href="http://twitter.com/${from_user}"><h2>${from_user}</h2></a>
			<span class="details">${text} </span>
		</li>
	</script>

</div>

Now we need to write our function that will get called anytime we load this page. This function will go out to Twitter and get our feed:

function getTweets() {
	var q = "ufo+spotted"
		rpp = 5,
		twurl = "http://search.twitter.com/search.json?q=";

	$.getJSON(twurl + q + "&rpp=" + rpp + "&callback=?", function(data){
		$("#tmpl-tweets").tmpl(data.results).appendTo("#tweets");
	});
}

I’m going to have this page load first, so I have set the page’s class to current. Now, we just need to add some style to the tweets, so they are displayed a bit nicer.

/** Tweets Styling **/

#tweets {
    list-style:none;
    padding:10px;
}

#tweets li{
    font-size:12px;
    overflow: hidden;
    margin-bottom:20px;
}

#tweets li h2{
    font-size:14px;
    margin:0;
}
.avatar{
    margin-right:10px;
}

#tweets li a, #tweets li span {
    float:left;
}

#tweets li span {
    width:70%;
}

The next time we start up the app we should get the following.

Map Basics

The other feature that we can implement before we do the phonegap integration is the map feature. We are going to use the Google Maps API to generate a simple map and then use some map data to drop markers. Each marker will indicate UFO sightings.

For this we are going to use the JavaScript API, currently at version 3. A full introduction to the maps API is out of scope for this tutorial, but you can find all the documentation can be found here, as well as implementation samples. If you follow the tutorial found here, you will see how to implement a basic map. We can use the same code to implement a basic map and end up with the following:

Now we can go to the documentation that covers the markers, found here. Now we can drop some basic markers on our map upon load. The markers would represent locations of sightings with the data from the photographs that have been taken and uploaded by users of the application. We would have a service running on a server that can return data via Ajax, probably in the JSON format. Again, setting up this service is an entire tutorial in itself, but for each entry we would create a marker for the map using the code provided in the demo.

var marker = new Google.maps.Marker({
      position: newLatlng,
      map: map,
      title:"New Sighting"
});

After the map loads, the markers would be added. If you read through the Google API documentation, you will find other options for the markers – such as displaying them with images and notes. It is worth exploring the other options and coming up with different implementations.

That’s about as much as we can do before we get to PhoneGap. Our last function requires the use of the camera, so let’s go ahead and begin setting up our PhoneGap project. Check out the introduction to PhoneGap here if you haven’t already.

Icons, Icons, Icons

Icons are a very important part of the application. It’s the image that represents your application everywhere, and there are certain guidelines you will want to follow to ensure that it looks good everywhere it will be seen. There is a great blog post here about icon sizes and the guidelines to follow when creating an icon. I usually take a 512×512 icon and scale it down from there to all the sizes needed.

You will also need to create a Launch image / splash screen for your app.

Xcode Project Setup

Once we have the default PhoneGap application running on our simulator and/or test device. We can go through the main summary page on the Xcode template for PhoneGap. The first thing I want to make sure is that the devices menu is set to iPhone. We could deploy to iPad too, if we wanted too, but there might be some CSS changes that we’d like to make first. For now I am sticking to iPhone only. Check all the device orientations as jQuery Mobile sorts out our layout depending on orientation. You are able to drag-and-drop the image files into their allocated slots on the summary page.

Now, when you start up your application you will be greeted with your new app icon and launch page. Now copy over the files you have been working from in the www folder. Start up the app and check that everything is working OK.

Eclipse Project Setup

After you’ve set up your project in Eclipse (in the same way as we did our test project in the first part here) you need to have three icon sizes prepared for your application. High Density (72×72), Medium Density (48×48), and Low Density (36×36). These icons replace the default icons that can be found in the res folder. The appropriate acronyms are hdpi, mdpi, and ldpi standing for High, Medium and Low respectively. The images you want to use as your splash screen should go in these folders too.

In order to have the splash screen work for Android, we need to add and modify our DroidGap class to include the splash image on load. Add:

super.setIntergerProperty("splashscreen", R.drawable.splash)

Next, the loadUrl needs a timeout added to it.

super.loadUrl("file:///android_asset/www/index.html", 5000);

Your file should now look like the following:

Run the application and ensure that everything is working OK.

Conclusion

We are now at the point where we are ready to implement our last two features: the device camera and local storage options. Doing so will be covered in future tutorials in this series. This series will also go through submitting our app to the various app stores, so be sure to follow along!

Android SDK: Implement an Options Menu

Sue Smith — Wed, 01 Feb 2012 12:30:49 +0000

This tutorial will teach you how to implement an options menu in any of your Android SDK applications. Read on!

In Android apps, you can make use of three standard menus supported within the platform: the context menu, the options menu, and submenus. The options menu appears when the user presses the menu button on their Android device. This is a common feature in almost all apps, so your users will be used to the menu appearing in this way. The options menu is typically used for providing additional info about an app, as well as linking to a help and settings sections. To implement an options menu for an Activity in an Android app, a few fairly straightforward steps are required.

Step 1: Open an Activity Class

The options menu you create will work with one or more Activity classes, so choose an Activity and open it in Eclipse. If your app only has one Activity class as its main screen, you can use it. If you want to create a new Activity for the purposes of this tutorial, feel free to do so. Select your application package and choose “File”, “New”, then “Class” and enter a name of your choice. Remember to make your class extend the Activity class and add it to the application Manifest.

Step 2: Create a Resources Folder

If you look at your application project in the Eclipse Package Explorer, you will see the various files and directories within it. The “res” folder holds all of your application resources. To create a menu, you need a menu folder, so create one inside the “res” folder by selecting it and choosing “File”, “New”, then “Folder” and entering “menu” as the name.

Your new folder will appear within the “res” directory:

Step 3: Create a Menu XML File

Your options menu will be defined as an XML file inside the new menu folder you created. Choose the folder and create a new file by selecting “File”, “New”, then “File” and entering a name. You can choose any filename you like, for example “my_options_menu.xml”. Eclipse will display error messages when you first create the menu file, but don’t worry, these will disappear as you build it.

Open your new XML file and enter the following outline:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

</menu>

Between these opening and closing tags, you will place XML markup for each item in your options menu.

Step 4: Add Items to Your Menu

You can add one or more items to your options menu depending on the needs of your own project. Add an item for each menu option using the following syntax:

<item android:id="@+id/about"
android:title="About" />
<item android:id="@+id/help"
android:title="Help" />

This defines two menu items, one for an “About” section and one for “Help” information. Each menu has an ID attribute and a title. The ID attribute allows your application code to refer to the item and the title defines the text users will see when the menu appears.

Step 5: Create Icons for Your Menu Items

You do not need to create icons for your options menu items, but you can do so if you wish. Use a graphic design or image editing program of your choice to create your icons as PNG files and place them in your application drawable folders. By default, Eclipse creates three drawable folders, for low, medium, and high resolution user devices. You can copy image files into these folders by browsing to your workspace, then locating your Android project directory and finding the “res/drawable” folders from there.

The official Android guidelines recommend a maximum of 72px squared for high resolution, 48px for medium and 36px for low. Once you have your icons in their folders, you can alter your menu item XML to include them as follows:

<item android:id="@+id/about"
android:icon="@drawable/about"
android:title="About" />
<item android:id="@+id/help"
android:icon="@drawable/help"
android:title="Help" />

Each drawable reference uses the filename minus its extension.

Step 6: Inflate Your Menu Resource

To instruct Android to use your options menu, open the Activity class you want it to appear with. Add the following method to your Java code, inside the class declaration and after the “onCreate” method:

public boolean onCreateOptionsMenu(Menu menu) {

	MenuInflater inflater = getMenuInflater();
	inflater.inflate(R.menu.my_options_menu, menu);
	return true;
}

Alter the “my_options_menu” section if you saved your menu XML file with a different name.

Step 7: Detect User Interaction

To respond to user interaction with your menu, you first need to detect it within your Activity class. Add the following method outline after the “onCreateOptionsMenu” method:

public boolean onOptionsItemSelected(MenuItem item) {

	//respond to menu item selection

}

Inside this method, which returns a boolean value, you can add code to respond to each particular item. The system will automatically call the “onOptionsItemSelected” method when the user chooses any of the options menu items.

Step 8: Respond to Menu Item Selection

Before your code can respond appropriately to user interaction with the menu, you need to work out which item was selected. Add a switch statement to your method using the following sample syntax:

switch (item.getItemId()) {
	case R.id.about:
	startActivity(new Intent(this, About.class));
	return true;
	case R.id.help:
	startActivity(new Intent(this, Help.class));
	return true;
	default:
	return super.onOptionsItemSelected(item);
}

Add a case statement for each item in your menu. This sample code starts new Activity screens for each item chosen. If you opt to do this, you will need to add an Activity class for each option in your application Java code as well as in the Manifest file.

Conclusion

Your Activity should now display the options menu when users press their device menu button. The complete Activity code follows, for an options menu used with the main Activity class:

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;

public class GreatAndroidAppActivity extends Activity {

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}

	public boolean onCreateOptionsMenu(Menu menu) {
		MenuInflater inflater = getMenuInflater();
		inflater.inflate(R.menu.my_options_menu, menu);
		return true;
	}

	public boolean onOptionsItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case R.id.about:
		startActivity(new Intent(this, About.class));
		return true;
		case R.id.help:
		startActivity(new Intent(this, Help.class));
		return true;
		default:
		return super.onOptionsItemSelected(item);
		}
	}
}

Eclipse typically adds the import statements automatically as you enter your Java code.

As with any development project, your apps will be more usable if they exploit the type of interaction and functionality users expect as standard. Using the options menu is a good way to achieve this when providing informative sections.

Mobile Flash is Far From Dead: Setting the Record Straight

Joseph Labrecque — Tue, 31 Jan 2012 12:30:39 +0000

In light of recent announcements from Adobe, there has been a lot of confusion over the state of the Flash Platform – specifically in regard to Flash content on mobile devices. This article seeks to clarify many of the misconceptions that exist by addressing the main points of confusion around these announcements regardless of the initial, monumental, and absolutely unbelievable blunders from failed public (and private) relations messaging and general marketing surrounding these announcements.

November 9th, 2011

On this day, Adobe was scheduled to have its regular analyst meeting to talk about how things were going for the company and lay some groundwork for the direction of the year ahead.

A variety of technical publications began declaring “Flash is dead”…

A press release and blog post released that morning stated that Adobe did intend to drop all future mobile browser work on the mobile version of the Flash Player. Even more alarming than this fact was the language used by Adobe, which centered around the dismissal of the mobile Flash Player with statements indicating that HTML was the superior technology. This rightly upset a good number of Adobe’s strongest supporters in the Flash and Flex community.

Later that week Adobe posted more information about their plans for Flex and revealed that the SDK would be contributed to the Apache Foundation and maintained by Spoon, Adobe, and the community at large.

To say that the community was shocked by these statements would be putting it mildly. A variety of technical publications began declaring “Flash is dead”, and then the real PR-nightmare began as those of us with investments in the Flash Platform became flooded with inquiries from publishers, editors, clients, and the general public – all demanding clarity.

Mobile Flash Player in the Browser

So, what really happened that day? What did Adobe really say? Adobe stated that they would be halting development of the mobile web browser version of Flash Player for Android. This effectively places future versions of Android on the same level as iOS regarding Flash Player.

They are doing this as part of a massive company reorganization to shift resources to HTML support and tooling, and to focus mobile Flash efforts to AIR on Android, iOS, and other potential systems like Windows 8 Metro. Overall, this is a good thing and, if presented differently, would not have had nearly the negative impact that it has.

It is important to note that mobile Flash Player 11 is not going away on Android (for now) – but if Android handsets want to continue with new versions, they must license the porting kit from Adobe and compile it for their customers. It will remain available for download and use in the meantime.

Mobile Flash Player source is being licensed to those who wish to compile for their own platforms (like Blackberry does now). So, mobile Flash Player may not be going away at all in some circumstances. It all depends on what the partners want to do.

Apache Flex

With regard to announcements surrounding Flex: the SDK is being donated to the Apache Software Foundation and will receive continued (hopefully invigorated) support by the Spoon project, Adobe itself, and possibly other corporate contributors.

Flex has seen a good deal of adoption by Flash developers for use in mobile AIR-based projects due to increased, near-native performance in recent builds and for the excellent layout and structural resources it provides. Many mobile developers have a large investment in the framework, and are rightly concerned.

Flex is now an Apache “incubator podling”, and is a very active project within Apache. Assuming that the Apache Flex team is able to organize everything enough to put out a release or two (normally achievable over 4-6 months), the project is expected to graduate to full Apache project status – putting it on the same level as ANT, Tomcat, HTTPD, and other well-known, popular projects used worldwide.

Note that PhoneGap (now, Apache Cordova) was also contributed to Apache by Adobe directly after the Nitobi acquisition – so this is by no means a death sentence or dismissal of the framework.

With Flex in the hands of the wider community, there are actually more resources available in light of the number of individual contributors. Even if you are not an Apache contributor yourself, if you have a patch for Flex that would be useful for others – get in touch with a contributor to see whether they might see value in the patch and perform the contribution in your stead.

Don’t forget that a number of contributors are Adobe engineers and the company has stated that although the runtimes are still under their care – they will align releases in light of what is going on at Apache.

Adobe AIR (Mobile Flash Apps)

Adobe is “doubling-down” on AIR for mobile.

As stated, Flash content delivered through mobile AIR on iOS, Android, and Blackberry is going nowhere and is in fact being provided with more resources. This is what most developers have been working with when it comes to mobile– not Flash Player in the browser.

I believe that AIR is still quite valuable for mobile application development and especially valuable for gaming with the upcoming Stage3D support. Buried amid the 11/9 announcements is a repeated statement that Adobe is “doubling-down” on AIR for mobile.

One of the reasons cited for dropping mobile Flash Player in the browser was to divert resources to mobile AIR. Furthermore, Adobe’s new line of Touch Apps for Android are (almost) all built upon AIR for Android. All of these signs, along with continued development of the runtimes, points to an active future on mobile for the Flash Platform.

Closing Thoughts

Recent announcements from Adobe really aren’t nearly as bad for developers with investments in Flash technology as it would seem. Mobile Flash Player in the browser was (and still is) nice to have. Since November 9th, 2011 – Adobe has pushed out a number of updates to both Flash Player 11 and AIR 3 on mobile. They are actively supporting Flash Player 11 on Android 4.0 “Ice Cream Sandwich”.

Publishers like O’Reilly and video2brain have both published materials from myself and others since the announcements. My employer and clients value skilled developers who know how to work with Flash on devices, desktops, and even servers.

Things will even out as the reality of the situation becomes clear and people stop freaking out over the announcements. In fact, Adobe is running a “Flex User Group 2012 Tour” in North America to dispel some of these myths and rebuild trust within the community. Flash definitely has a home on mobile – it just might take a different form than what we initially expected.

References

Win A Free Copy of Android 3.0 Animations: Beginner’s Guide

Mark Hammonds — Mon, 30 Jan 2012 22:37:41 +0000

Readers will be pleased to know that Mobiletuts+ has teamed up with Packt Publishing to organize an Android book giveaway! You could be one of three lucky winners to receive a copy of Android 3.0 Animations: Beginner’s Guide. Keep reading to find out how to enter!

Overview of Android 3.0 Animations: Beginner’s Guide

This book will teach you how to create animated graphics from a set of still images, fade between graphical elements, and dynamically move graphics on the interface. In addition, you’ll also learn how to distort images and generally mess around with parts of your app’s user interface.

Read more about this book and download the free Sample Chapter at the PacktPub web site.

How to Enter?

All you need to do is head over to the book page and look through the product description of this book. Then drop a line via the comments below to let us know what interests you most about this book. It’s that simple!

Competition Rules

Valid entrants must submit a comment on this post listing at least one aspect of the book that they are most interested in.
You may enter only once.
Make sure to enter your real name and a valid e-mail address so that we can contact you if you’re chosen as a winner.
Entries will be accepted until February 13th, 2012.
Once the contest has closed, Packt Publishing will then choose the three winners.
Winners will then be announced and notified via email.
Winners from the U.S. and Europe can either choose a physical copy of the book or the eBook copy. Entrants from other locales are limited to the eBook copy only.