Sunday, June 27, 2010

How to add Google Adsense Ads to your Android App

After I got a taste of how is to build apps for Android on mobile, I wanted to go further and insert ads into my apps. Other apps that I previously downloaded had that and it wasn't that annoying seeing ads at the bottom of my screen and I felt good that free apps can get people's support through Adsense mechanism.

I read a little bit on the Google's Adsense Setup page that you can "Unlock the revenue potential of your mobile site with targeted Google ads." This sounded so good that I wanted to try.
But wait, Google is talking about my mobile sites where I can put Google ads, while I'm trying to add these ads to my android apps. How can I do that ? You'll see that is not that complicated and in fact is very simple .

And here is how I succeeded adding Google Adsense Ads to my android apps: "World Cup Goal Scream" and "World Cup Red Vuvuzela". You can download these apps from android market to get a feeling of what I'm talking about.

The following is a step by step guide for you and for me. Yes for me too, because we always forget stuff and thank God to the internet that we have a place to come back and save the day.

Ok, let's go

Step 1:
Create a Google account, if you don't have one, and log in to the Google Adsense site (https://www.google.com/adsense)

Step 2:
Select "Adsense Setup" from the menu

Step 3:
Select "AdSense for Mobile Content New high-end devices!" and follow the wizard steps to customize you ads.

Step 4:
Get "Your AdSense code" and save it to an empty html page

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="www.flyloopproject.com">
<title>World Cup Goal Scream Ads</title>
</head>
<body marginwidth="0" marginheight="0 leftmargin="0"
topmargin="0" style="background-color: black">
.....insert your Adsense Code here.........
</body>
</html>

And save the page, for example call it myads.html

Step 5:
Upload this page to your website, oh you need a place on the internet where you can upload stuff

Step 6:
Test the page on your mobile phone by opening the page that you just upload.
Note!: it won't display any content if you open the page from your computer's web browser. You have to test it on your mobile web browser. Check out my ads page: http://flyloopproject.com/myads.html

Step 7:
Now that you have this page, you probably ask yourself "How the hack do I add it to my app ?"
Well don't worry you are on track to do this.
Take a deep breath of fresh air and proceed with the next step.

Step 8:
Open your Android project and edit the View where you want to add your ads.
For example you can add ads to your main.xml where you'll place a WebView component.

<LinearLayout android:id="@+id/adsHolder"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical" android:layout_alignParentBottom="true"
android:layout_centerInParent="true" android:paddingTop="5px">
<WebView android:id="@+id/adsDisplay" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>

Step 9:
All you have to do now is to wire up the WebView component that you just add to your web page created in Step 4

public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
...............
WebView adsDisplay = (WebView) findViewById(R.id.adsDisplay);
adsDisplay.getSettings().setJavaScriptEnabled(true);
adsDisplay.loadUrl("http://flyloopproject.com/myads.html");
...............
}
}

Step 10:
Add user INTERNET permission to your app by editing the AndroidManifest.xml file

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

Step 11:
You're done, test it by building your app and run it with your emulator or on your mobile phone and you should see your ads at the bottom of your screen.

A quick overview of the steps
Step 1 : Log in to the Google Adsense site https://www.google.com/adsense
Step 2-3 : Get Your Adsense Code
Step 4 : Save it to an empty web page (example: http://flyloopproject.com/myads.html)
Step 5 : Upload the page to your website
Step 6 : Test it on your mobile
Step 7 : Fresh air
Step 8 : Add a WebView component to a view in your android project
Step 9 : Wire up the component to display you web page that you just created in Step 4
Step 10 : Add INTERNET permission to your app
Step 11 : FINISH (check your heart rate :) )

That's pretty much it.

I hope that you find this posting useful and don't stop building free apps and get support for your development using Google Adsense for mobile.

If you find this blog entry useful don't stop sharing with your friends and CLICK MY ADS to support my development and I'll get you more tutorials

O Canada - my first app for Android

Today I was able to publish my very first app for Android


It all started with a friend telling me about the Google's new smartphone, Nexus One, how awesome it is and how easy it is to develop apps for it. One thing was catchy, you can build your app using Java language and Eclipse as IDE, that's cool since I'm working with Java and Eclipse every day.


Soon I found out that Google's Android team did a really good job building a website for developers: http://developer.android.com that helped me getting started and the best thing of all was that they provide a plugin for Eclipse, Android Development Tools (ADT), including an emulator where you can test your apps without even having a real phone, it's all software. I know that others used emulators but it is nice to see that this trend is helping developers to jump building apps in no time.


I did my research about the phone and discovered that the phone is compatible with my cell phone carrier and that I can order it online and got it shipped in Canada. Now they stopped selling through the Google's website, but it will be available through other retail chains, so no worries. Anyway, at that time it was available and I got it.


Ok, so everything was set and then what? What app should I build?


I got around all my ideas by focusing on the simplest, easiest and useful aspect of an app. Then EVRIKA, (church choir singing), O Canada, the Canadian Anthem that every Canadian citizen should know it. Since I'm a Canadian citizen to be and still not knowing all the lyrics, even though I heard the anthem a lot during the Vancouver's 2010 Olimpics, I though that it will be a good idea to have the anthem's song and lyrics with me all the time. And the rest is just work and fun.


Now that's finished and published all I can hope that you'll install it and find it the simplest, easiest and useful app.


In order to install it, use your phone and search the android market for "O Canada"


have fun