Episode 3 - Analyse This

Programming Tutorial - “Money Maker” + “Analyse This”

• Third Party/External Libraries (JAR Files)

• Source Code: Ads And Analytics

  • http://www.codinggreenrobots.com/downloads/open-source-projects/AdsAndAnalytics.zip

• AdMob - http://www.admob.com/

  • Sign up for an account, it’s FREE!

  • Create a new site/app in the publisher dashboard

  • Follow the instructions and download the JAR file used to implement the ads

  • You will also need your Publisher ID

  • Follow the impementation instructrions here: http://code.google.com/mobile/ads/docs/android/fundamentals.html

    • You may also just follow the code in AdsAndAnalytics available under the Downloads section of the CGR Website.

• Flurry Analytics - http://www.flurry.com/

  • Sign up for an account, it’s also FREE!

  • Create a new application

  • Follow the instructions and download the files it gives to you

    • Included in the files are the library, implementation instructions, and your Flurry API Key

  • Implement the analytics as explained in the instructions or refer to AdsAndAnalytics available under the Downloads section of the CGR Website.

Analytics:

1. Amount of new users is great for knowing whether current marketing techniques are working.

2. Error Reporting, Flurry will let you know if an error occured while it was in use and what type of an error it was, but it won’t give you any other details, so be sure to watch for large amounts of errors.

3. User Map, knowing where your users live is useful in many ways, especially if you were considering making your application available in more languages.

4. Technical, Flurry will tell you what type of devices and firmware versions are accessing your application, which for Android is extremely useful. Maybe a different device configuration is using your application, maybe you should check that your app runs properly on that type of device. Maybe tablets are using your app, maybe you should consider making a tablet version of your app.

Design Tutorial - “Sexy Ads Make Sexy Money”:

Designing mobile ads for your application is just as important as selecting the right types of ads and where to display them. Here are some tips to consider when developing your mobile ad strategies.

1) Always put the user in control

• Skip buttons are mandatory

• Add exclusive content - movies, games, tv shows

• Allow the user to “interact” with your ad

• Design HTML5 or Flash ads with multimedia to engage your users

2) Design for the mobile space not the desktop

• You have access to GPS - get the users location to display relevant data

• Smaller area to work with - use that space effectively

• Develop configurations screens where users can build/design products (cars)

• Instead of “more screens”  use overlays & context menus for more content

3) Watch your load times for bigger ads

• Network speeds are key - are they in Edge, 3G, 4G?

• Consider your runtimes - Adobe Flash 10.2 - only runs on +2.2 Froyo

• Optimize your graphics for mobile - PNG , small JPG

• Preload data and content - use % or progress bars

• Use your real estate effectively - menus, buttons, colors

4) Provide Value & clear Call to Actions

• Offer product discounts or coupons - free music or apps

• Allow users to send gifts or mobile coupons to friends

• Provide details about local info - store locations - howto videos

• Design the Call to Action button large and colorful

• Enable ways for users to submit feedback about the app/products

5) Testing & Optimizing your Ads

• Test the ads for bugs - touch areas - go through the UI extensively

• Track where the user exits your ad - (more in Analytics)

• Create multiple ad formats and sizes - change what doesn’t work

• Remember there are multiple resolutions and densities on Android

Episode 2 - Feed Me!

Java 101

Java is a platform independent language that runs compiled code on a Java Virtual Machine(JVM).

Object-oriented with some procedural elements, similar to:

• C++, C#, VB, Python

Object-Oriented-Programming: An object is an entity that represents either a real world object or and abstract concept. Objects have both data and behaviour. Example, A Book object would carry data like the author, titile, and publisher. At the same time it would have behaviours like getTitle that would tell you the books title.

Java has type checking, meaning that all data must have a type, for example text must be of the String type or numbers must be an integer, float, etc.

Memory Management is a feature of Java that you can safely ignore for the first little while. When you create an object it is given a place in memory, when it is no longer needed, the Evil Java Garbage Collector comes along and repossesses it.

Java Syntax Example:

1 public class MeaningOfLife {
2
3 public int getMeaningOfLife() {
4
5 int meaning_of_life = 40 + 2;
6
7 return meaning_of_life;
8 }
9 }

Java Keywords: public, private, return, class, etc...

Declaration Statements(Variables): String example = “Hello Android!”;

Primitive/Wrapped and Reference Types

Great Books To Buy!

- Head First Java -
http://oreilly.com/catalog/9780596004651
- Android Application Development - 24hrs - Conder & Darcy - http://www.amazon.com/dp/0321673352?tag=mamlambo-20
- Android Wireless Application Development -
http://www.amazon.com/Android-Wireless-Application-Development-Conder/dp/0321627091
- Professional Android 2 Application Development -
http://www.amazon.com/gp/product/0470565527?ie=UTF8
- Learn Java for Android Development -
http://www.amazon.com/Learn-Java-Android-Development-Friesen/dp/1430231564/ref=pd_sim_b_5


Feed Me! - Parsing XML/RSS Feed Data Tutorial

1. Add Internet Permission to AndroidManifest.xml as we will be downloading an xml file from the internet.

2. Create a layout that includes a ListView to display the RSS Feed information. ListViews are a great way to display itemized data.

3. Create an Activity (MainActivity.java) to handle the UI layout and to fill the ListView with data once it is parsed.

4. Use an ASyncTask thread to handle downloading and parsing the RSS Feed in the background so we avoid locking up the UI thread.

5. Create a custom object to represent our items, in this case “Episodes”. The episode class must include all properties that we will be pulling out of our RSS feed and must have Getters and Setters to access them.

6. Create a class to handle parsing the RSS XML Feed (XmlFeedParser.java). We will be using the Android class XmlPullParser to parse our content. There are many different parsers available but this one is easiest to understand.

7. Create a layout xml file for our row items for the ListView (episode_row.xml).

8. Once our feed is parsed and we have returned an ArrayList of Episodes, we can display the information in the ListView. This is done with a ListAdapter with the type ArrayAdapter. Fill out the constructor with a Context, row layout file, TextView ID, and ArrayList of titles.

Greg Gets Fancy - Custom ListViews

http://www.androidpatterns.com/uap_category/dealing-with-data

Designing a custom ListView is always a good idea - it will keep your application fresh and not plain like others - stay away from the black/gray schemes.

• For the RSS feed data - it’s good to design the ListViews with the same color scheme as the app itself

• A suggestion is to alternate colors in the list - usually a light & darker ones

• Keep the size of the ListView not too big - font appropriate - do some testing to get it right

• Create thumbnails for the RSS feed - small - give them some space

• You can design a small mask around the thumbnails for style

• Designing a nice background will help make your lists stand out

• An option is to make your lists transparent so the background will show through - (AndroidTO twitter keyword feed) (Background+CacheColorHint+ListSelector=#00000000,

• Keep the highlight color (onPress) a contrasting color to the bg color (ListSelector in XML Properties)

• Tab Bars - it’s good to design custom tabs & icons for your app (Twitter)

• Always give the user a notification that data is loading - small animation (ProgressBar) (talk about both kinds)

• Use animations to drill down into the data - slide to the right (LayoutAnimationController)

Episode 1 - >You Are Here<

Android is a software stack for mobile devices that includes an operating system, middleware and key applications. The Android SDK provides the tools and APIs necessary to begin developing applications on the Android platform using the Java programming language.

• Application framework: enabling reuse and replacement of components

• Dalvik virtual machine: optimized for mobile devices

• Integrated browser: based on the open source WebKit engine

• Optimized graphics: powered by a custom 2D graphics library; 3D graphics based on the OpenGL ES 1.0 specification (hardware acceleration optional)

• SQLite: for structured data storage

• Media support: for common audio, video, and still image formats (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF)

• GSM Telephony: (hardware dependent)

• Bluetooth, EDGE, 3G, and WiFi: (hardware dependent)

• Camera, GPS, compass, and accelerometer: (hardware dependent)

• Rich development environment: including a device emulator, tools for debugging, memory and performance profiling, and a plugin for the Eclipse IDE

Definitions to KNOW!

• Activity - An activity presents a visual user interface for one focused endeavor the user can undertake.

• Service - A service doesn't have a visual user interface, but rather runs in the background for an indefinite period of time.

• Broadcast Receiver - A broadcast receiver is a component that does nothing but receive and react to broadcast announcements.

• Intent - An intent is an Intent object that holds the content of the message, a set of instructions.

• Android Manifest - Before Android can start an application component, it must learn that the component exists. Therefore, applications declare their components in a manifest file

• Thread - Threads allow you to complete operations in the background so that the user interface does not lock up while those tasks are being completed.

• Method - A block of statements that can be executed from some other place in your code, also known as a function in other programming languages.

Activity Lifecycle
http://developer.android.com/images/activity_lifecycle.png

• onCreate()

• onStart()

• onRestart()

• onResume()[

• onPause()

• onStop()

• onDestroy()

How things work on Android

1. Home Button presses pause your application and retain its state for a period of time

2. Back Button presses exit and destroy the activity that the user is currently viewing

3. Going to another app (ie. multi-tasking) pauses your application and retains its state for a period of time
   
   
   

   Setting up for efficient Android Development:

1. Start by downloading the SDK Installer: http://dl.google.com/android/installer_r09-windows.exe

2. The installer will install the SDK on your computer and detect whether or not you have the JAVA SE Development Kit installed. If you do not then you can download it from https://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD/ViewProductDetail-Start?ProductRef=jdk-6u24-oth-JPR@CDS-CDS_Developer

3. After the installer completes it will launch the SDK and AVD Manager. Install the recommended components that it displays. This will take a little while.

4. Download the Eclipse IDE (It’s not the only option but it is the easiest as Google has developed a plug-in for it) http://www.eclipse.org/downloads/packages/eclipse-ide-java-developers/heliossr1

5. Installing the ADT Plugin for Eclipse:

1. Start Eclipse, then select Help > Install New Software....

2. Click Add, in the top-right corner.

3. In the Add Repository dialog that appears, enter "ADT Plugin" for the Name and the following URL for the Location:

4. https://dl-ssl.google.com/android/eclipse/

5. Note: If you have trouble acquiring the plugin, try using "http" in the Location URL, instead of "https" (https is preferred for security reasons).

6. Click OK.

7. In the Available Software dialog, select the checkbox next to Developer Tools and click Next.

8. In the next window, you'll see a list of the tools to be downloaded. Click Next.

9. Read and accept the license agreements, then click Finish.

10. When the installation completes, restart Eclipse.

1. Configure the plugin

1. Select Window > Preferences... to open the Preferences panel (Mac OS X: Eclipse > Preferences).

2. Select Android from the left panel.

3. For the SDK Location in the main panel, click Browse... and locate your downloaded SDK directory.

4. Click Apply, then OK.

Set up a project

1. After Eclipse starts and you select your workspace, if a splash screen appears, click “Go To Workbench”

2. Click File>New>Other then under the Android folder select Android Project

3. Add a project name (note: this is not necessarily the name of your app)

4. Select a Build target. The higher the target the more API’s available to you. The lower the target the more devices you will be able to support. Refer to http://developer.android.com/resources/dashboard/platform-versions.html for help with this decision.

5. Fill in an application name. Fill in a package name, make this a unique namespace as it needs to be different from all other applications both on a users device and on the Android Market. Mobicartel example: “ca.mobicartel.{appname}”

6. Fill in a name for your first Activity (note: Activity names must start with a capital)

7. Select a min SDK version. Selecting a lower min SDK than your build target allows for more device support but can cause problems if you use API’s unavailable for lower SDK version.

8. Click Finish.

Layouts and Views

1. View - the basic units of user interface, the base class for widgets(eg, buttons, lists, galleries, textboxes, etc.)

2. Layout - A container that holds Views

Photoshop CS5 & other generic graphics software

• Setting up your design templates

Open up Photoshop -
Create new document - 480X800 - 240dpi for HDPI devices
320X480 - 160dpi for MDPI devices

• Explaining differences in resolution & densities
  Smartphones - 3.5” - 4.5” devices - medium & high densities
  Tablets - 5” (Dell Streak) - 7” Samsung Tab - 10” Motorola Xoom
  Tablets resolution - 1024X600 & 1280X800

• Gathering Assets - vector & raster - clipart.com - photos.com

Design your assets with clean lines & edges - minimal glows & drop shadows
Use Masks to be able to redefine alpha channels & touch up assets without affecting the rest of the layer
Optimize the output - PNG file format - 24bit

• Build your layouts - decide main areas of the app - content & such

Make some wireframes of the main app screens (about, info, contact)
Test your dimensions in the emulator or output to your testing device

• Navigation is key - explain different types - tabs, buttons, swipes

Design overall look of the navigation - colors - clear text - shape
Make all the mouseovers for navigation tabs - contrasting colors
Context menus can be your friend to add additional content

• Designing Assets for the Market - screenshots - promo - icons - video

Grab screenshots from your device - DDMS or ShootMe to post as screenies
320 x 480, 480 x 800, or 480 x 854
24 bit PNG or JPEG (no alpha)
Full bleed, no border in art

Promo graphic - 180w x 120h
24 bit PNG or JPEG (no alpha)

High Resolution Application Icon:
512w x 512h
32 bit PNG or JPEG

Promotional Video: Enter YouTube URL



Pilot Episode - Painting the Roses Red

Live Wallpapers
Live wallpapers are rich, animated, and interactive backgrounds. You can think of it like an application because it has access to the same resources. That means 2D and 3D graphics, GPS, Accelerometer, and network access/internet. Live Wallpapers are a combination of a Canvas and a Service. A canvas is like a real canvas except you will be drawing on it using bitmaps, colours, paint, and text. A service is a long running operation that happens outside of an application's context, in this case it handles updating our canvas. It should be noted though that Live Wallpapers are only available as of Android 2.1 (Eclair)(90% of Android devices are on 2.1 and above).

Demo Project: https://market.android.com/details?id=ca.mobicartel.valentinelwp
Source Code: http://www.codinggreenrobots.com/downloads/open-source-projects/ValentineLWP.zip

Optimization
Optimize your code and make it lean! Use the least amount of memory possible because the user will not be expecting a wallpaper to slow down their device and drain the battery. For those of you who don’t know how to use less memory, here’s some quick tips:

• Custom objects are expensive, use them sparingly
• Do costly tasks in advance and store them in an instance variable
• Use primitive over wrapped types

Start by creating a project. Feel free to skip creating an activity with it. Create a class that extends WallpaperService. After that you will have to create an Engine that will handle the lifecycle and drawing of the wallpaper. (Engine has to be nested)

Engine

• onCreate()
  • Get the display size
  • Initialize variables and set up resources needed for scene
• Initialization of scene
  • set background based on screen size, this helps deal with the HDPI and HDPI854 issue
  • create ArrayList of hearts in advance, so we don’t have to create new bitmaps on the fly
  • Create Cupid and the Paint we will use to draw the text.
• Visibility Changes
  • We need to make sure that when the wallpaper is not visible that we stop drawing new frames. This will ensure we save on processing power when it is not needed
• Offset Changes, Scrolling
  • We need to grab the offset changes and apply them to an instance variable to be used later for drawing
• drawFrame()
  • Get a canvas to draw on from the Wallpaper Engine
  • Update the physics and then draw the scene
  • Start the thread handler, delay it to a reasonable frame rate so that we can give the CPU time to rest before the next frame
• updatePhsyics()
  • Get the time since the last update so we can move objects at the same velocity every frame
  • Use Iterators instead of For-Each Loops, this way you don’t create copies and you are referencing the actual object in memory
  • We move each heart based on the last update interval
  • Use if statements to run blocks of code when you want them to
  • When the arrow_activated boolean is true, we can move the arrow just like we did with the hearts
  • Make sure you reset objects or get rid of objects when they leave the visible display area.
• drawScene()
  • Everything in your scene needs to be redrawn with every new frame
  • Make sure you draw things in the order you want them to appear starting with the background moving towards the foreground
  • Draw the background, use the offset as the “x” value so that when the user scrolls the background moves. This is a common thing to do with wallpapers, but if you wish you can also make you background static and just use 0 for x
  • Draw the “i love you” text using the paint created earlier
  • Draw each of the hearts, once again use an iterator
  • Only draw the arrow if its been activated
  • Finally draw cupid
  • If you wish to have images stay with the background and not move on each scroll of the screen, just add the offset to its “x” value
• String Resources
  • Put your app name and app description in your string resources
• LWP Configuration File
  • Add pointers to your Live Wallpapers thumbnail and description
• Android Manifest
  • Add your wallpaper service to the manifest using a “Service” tag
  • Give it an “android.permission.BIND_WALLPAPER” permission
  • Intent Filter, “android.service.wallpaper.WallpaperService”
  • Meta Data, pointer to configuration file
  • Add a “uses live_wallpaper” line so that only live wallpaper compatible devices will see your app in the market.

Using Photoshop CS5 - Designing Graphical Assets

• Brainstorm LWP Concepts
• Download graphical ideas - (clipart.com - istockphoto.com)
• Find digital patterns - textures for backgrounds
• HDPI - High Density 240dpi - 480 X 800
• MDPI Medium Desity 160dpi - 320 X 480
• Multiple Layers - Background - Static Assets
• Blending Options - Vector Images - Smart Objects
• Extracting Assets from Demo - Assets - Export
• Export as .PNG - 24bit - w/ transparency enabled
• Dropbox - Sync - Explain our workflow - folder structure
• Demo of all Valentine’s Day Web Market
• Review all assets upload to Developer publishing account