Android World: August 2012

Thursday, August 30, 2012

ViewFlipper with Animation

ViewFlipper is a simple ViewAnimator that will animate between two or more views that have been added to it. Only one child is shown at a time. If requested, can automatically flip between each child at a regular interval.

create four XML file for the animation in /res/anim folder

/res/anim/flipinnext.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator">
<translate
   android:fromXDelta="-100%"
   android:toXDelta="0%"
   android:duration="500" />
</set>

/res/anim/flipoutnext.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator">
<translate
   android:fromXDelta="0%"
   android:toXDelta="100%"
   android:duration="500" />
</set>

/res/anim/flipinprevious.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator">
<translate
   android:fromXDelta="100%"
   android:toXDelta="0%"
   android:duration="500" />
</set>

/res/anim/flipoutprevious.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/decelerate_interpolator">
<translate
   android:fromXDelta="0%"
   android:toXDelta="-100%"
   android:duration="500" />
</set>

/res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   >
<TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="@string/hello"
   />
<Button
   android:id="@+id/flipnext"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Flip Next"
   />
<Button
   android:id="@+id/flipprevious"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Flip Previous"
   />
<ViewFlipper
   android:id="@+id/viewflipper"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">
<TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="First Screen"/>
<ImageView
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:src="@drawable/icon"/>
</LinearLayout>
<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">
<TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Second Screen"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:text="Big Big Button"/>
</LinearLayout>
<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical">
<TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Third Screen"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Normal Button"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Normal Button"/>
<Button
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="Normal Button"/>
</LinearLayout>
</ViewFlipper>
</LinearLayout>

main java code

package com.MyViewFlipper;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ViewFlipper;
 
public class MyViewFlipper extends Activity {
 
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       Button buttonFlipNext = (Button)findViewById(R.id.flipnext);
       Button buttonFlipPrevious = (Button)findViewById(R.id.flipprevious);
       
       final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewflipper);
       final Animation animFlipInNext = AnimationUtils.loadAnimation(this, R.anim.flipinnext);
       final Animation animFlipOutNext = AnimationUtils.loadAnimation(this, R.anim.flipoutnext);
       final Animation animFlipInPrevious = AnimationUtils.loadAnimation(this, R.anim.flipinprevious);
       final Animation animFlipOutPrevious = AnimationUtils.loadAnimation(this, R.anim.flipoutprevious);
       
       buttonFlipNext.setOnClickListener(new Button.OnClickListener(){
 
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    viewFlipper.setInAnimation(animFlipInNext);
          viewFlipper.setOutAnimation(animFlipOutNext);
    viewFlipper.showNext();
   }});
       
       buttonFlipPrevious.setOnClickListener(new Button.OnClickListener(){
 
   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    viewFlipper.setInAnimation(animFlipInPrevious);
          viewFlipper.setOutAnimation(animFlipOutPrevious);
    viewFlipper.showPrevious();
   }});
   }
}

Using a Slide Transition with the Android ViewFlipper

Github Repo
If your app only has one View, your app is probably pretty boring. However, if you’re building an interesting app you’ll probably have to switch between multiple Views, maybe go back and forth and have some nice animations. You could write your animations and manually do the transitioning yourself but once you get more than 2 or so Views that’s gonna get tough to keep up with (and messy!). Fortunately the ViewFlipper solves this problem quite nicely.
Step 1.
Let’s start all the way at the beginning, File -> New Android Project. Feel free to use your own Application and Package Names but make sure you tell it to create a MainActivity. This will be the Activity that controls the transition between Views.

Step 2.
Once you get your project set up you’ll need to add a ViewFlipper to main.xml. In this example we’ll also add a couple of buttons that let us go back and forth between our Views.
main.xml

1 <?xml version=”1.0″ encoding=”utf-8″?> 2 <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” 3 android:orientation=”vertical” 4 android:layout_width=”fill_parent” 5 android:layout_height=”fill_parent”> 6 7 <LinearLayout android:orientation=”horizontal” 8 android:layout_width=”fill_parent” 9 android:layout_height=”wrap_content”>10 <Button android:id=”@+id/previousButton”11 android:text=”Previous”12 android:layout_width=”wrap_content”13 android:layout_height=”wrap_content”/>14 <Button android:id=”@+id/nextButton”15 android:text=”Next”16 android:layout_width=”wrap_content”17 android:layout_height=”wrap_content”/>18 </LinearLayout>19 20 <ViewFlipper android:id=”@+id/viewFlipper”21 android:layout_width=”fill_parent”22 android:layout_height=”fill_parent”>23 <TextView android:layout_width=”fill_parent”24 android:layout_height=”wrap_content”25 android:text=”View 1″/>26 <TextView android:layout_width=”fill_parent”27 android:layout_height=”wrap_content”28 android:text=”View 2″/>29 <TextView android:layout_width=”fill_parent”30 android:layout_height=”wrap_content”31 android:text=”View 3″/>32 </ViewFlipper>33 </LinearLayout>34

Step 3.
Next in MainActivity ‘s onCreate method, wire up ClickHandlers to the Buttons and use the ViewFlipper’s showNext() and showPrevious() methods to move between Views.
MainActivity

Step 4.
Now, if all you wanted was a simple transition between Views you could stop now. However, that would be… boring and we can do a heck of a lot better by adding a nice slide transition. To make this work we’ll use the 4 animations below. These allow us to slide in and out from either direction depending on whether we’re going forward or backward and they also add a very subtle alpha fade in and fade out. If you’re interested in checking out other types of animations look no further than your Android SDK directory: Android_SDK\Platform\android-{version}\samples\ApiDemos\res\anim
view_transition_in_left.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”100%p” android:toXDelta=”0″ android:duration=”300″/>4 <alpha android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”300″/>5 </set>6

view_transition_in_right.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”-100%p” android:toXDelta=”0″ android:duration=”300″/>4 <alpha android:fromAlpha=”0.0″ android:toAlpha=”1.0″ android:duration=”300″/>5 </set>

view_transition_out_left.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”0″ android:toXDelta=”-100%p” android:duration=”300″/>4 <alpha android:fromAlpha=”1.0″ android:toAlpha=”0.0″ android:duration=”300″/>5 </set>

view_transition_out_right.xml

1 <?xml version=”1.0″ encoding=”utf-8″?>2 <set xmlns:android=”http://schemas.android.com/apk/res/android”>3 <translate android:fromXDelta=”0″ android:toXDelta=”100%p” android:duration=”300″/>4 <alpha android:fromAlpha=”1.0″ android:toAlpha=”0.0″ android:duration=”300″/>5 </set>6

Step 5.
Finally, we need to update MainActivity to set the ViewFlipper’s inAnimation and outAnimation properties. We’ll use a slide in from the left when the user clicks “Next” and we’ll slide in from the right when the user clicks “Previous”.

1 publicvoid onCreate(Bundle savedInstanceState) { 2 super.onCreate(savedInstanceState); 3 setContentView(R.layout.main); 4 5 final ViewFlipper viewFlipper = (ViewFlipper)findViewById(R.id.viewFlipper); 6 7 Button nextButton = (Button) this.findViewById(R.id.nextButton); 8 nextButton.setOnClickListener(new OnClickListener() 9 { 10 11 @Override 12 publicvoid onClick(View v) { 13 viewFlipper.setInAnimation(MainActivity.this, R.anim.view_transition_in_left); 14 viewFlipper.setOutAnimation(MainActivity.this, R.anim.view_transition_out_left); 15 viewFlipper.showNext(); 16 } 17 18 }); 19 20 Button previousButton = (Button) this.findViewById(R.id.previousButton); 21 previousButton.setOnClickListener(new OnClickListener() 22 { 23 24 @Override 25 publicvoid onClick(View v) { 26 viewFlipper.setInAnimation(MainActivity.this, R.anim.view_transition_in_right); 27 viewFlipper.setOutAnimation(MainActivity.this, R.anim.view_transition_out_right); 28 viewFlipper.showPrevious(); 29 } 30 31 }); 32 33 }

Finally, run your app and behold the wonder that is the ViewFlipper sliding your Views in and out!

Monday, August 13, 2012

Use AppLaud to Create a Web App Project, Run it on a Device or Simulator

*Primer tutorial for MDS AppLaud 1.2 Eclipse Plugin for PhoneGap for Android

AppLaud Plugin Intro Video

The first Two-Minute Tutorial (TMT0) presents in detail the steps to create a new project, understand project and file contents, enable and review JSLint settings, and run the app on a device or simulator. Users who have already run a PhoneGap app from Eclipse may prefer to skip to TMT1. The MDS AppLaud Plugin includes 5 demo projects ready to run out-of-box.

This tutorial uses the basic PhoneGap demo. See all 5 demo apps included with AppLaud.
Prerequisites

Installation of the latest MDS AppLaud plugin fromhttp://www.mobiledevelopersolutions.com/
If you have not successfully installed Eclipse and the plugin (Eclipse Helios, ADT, etc) see instructions here:http://www.mobiledevelopersolutions.com/home/start
If you encountered problems during installation or have questions, please join the google group and post any questions or comments: http://groups.google.com/group/eclipse-plugin-for-phonegap

Part 1 Use Project Creation Wizard to create new Web App Project

1. The image below shows a pristine Eclipse workspace, after installing the AppLaud Plugin (and restarting as directed) and before creating any projects.

The PhoneGap icon launches the PhoneGap Project Creation Wizard
Notice the current Java perspective in the upper right corner (will be JavaScript after project creation)
Action: Click on the Project Creation Wizard icon

Note: Most widgets/items include hints in hover text - make use of them to learn Eclipse quickly

Note: The equivalent menu path for new project creation is File -> New -> Project... -> PhoneGap for Android Project

2. Use the Wizard to create a new Project

The first page of the wizard is shown below.

Action: Select the auto-inclusion of PhoneGap
Action: Select the PhoneGap example source for the app
Action: Select Next

Note: TMT1 will use a UI Framework (jQuery Mobile). This demo keeps it simple!

Note: For alternate version of PhoneGap, download it to your host and select Enter path to installed PhoneGap, follow instructions from there.

3a. Android Project Config (SDK Tools 14 and later)

Assign name to project in the first window:

Click Next twice (we'll come back)

Update Application Info:

Assign package name
Set minimum SDK to the minimum Android Version to support

Click Back
Select the latest Target as your Build Target
Note that PhoneGap is designed to work with recent Build Targets and support old versions with minSDK

Choosing a Target Name < 2.3 will require you to later remove from AndroidManifest.xml : android:xlargeScreens="true"

Continue to Step 4.

3b. Android Project Config (Only For SDK Tools 13 and earlier)

The second and last page of the wizard is shown below.

Action: Enter a project name ( becomes top level directory for project)
Leave selections in Content area as they are

Note: Changes to Content area is not supported

Action: Select the build target (targets vary by SDK installation)

Choose the latest available Target (use Min SDK to specify the minimum target you need to support)

Action: Enter an Application name (the app name that will show on your phone)
Action: Enter a package name (e.g. com.[company-or-group].appname),
Action: Enter an Activity class (no spaces)
Action: Enter the Min SDK corresponding to the minimum Android version you need to support

PhoneGap 1.0 and later do not support earlier versions than Android 2.1 (Min SDK <- 7)
Ignore the Eclipse warning about different versions

Action: Click Finish to complete project creation

Note: A known issue exists regarding the unchecking of Use default location. Please leave this checked.

4. Review of PhoneGap Project Structure

Upon project creation, Eclipse will look similar to the image below.

To take you straight into editing your web app, the MDS AppLaud Plugin automatically:

loads index.html into the editor
opens the assets/www directory
sets the perspective to Javascript (click icon to left of JavaScript to see other perspectives)

Note the contents of assets/www directory:

index.html - required, and the launch point of the web app
phonegap-<version>.js file - required, the PhoneGap javascript API
apis - directory containing javascript code for this project: PhoneGap APIs
index.css - the css for this project (as we are not using a UI Framework)

Typically all web app sources live in assets/www: html, javascript, css, plugins, frameworks, images, etc.

5. Enable JSLint on the new project

JSLint with option modifications is integrated with the MDS AppLaud plugin, and can be enabled for any project to help you write "more correct" javascript code (meaning: less time with coding errors and debugging them).

Action: Right click on the top level directory of your project (the project name) and select Enable jslint4java.
Action: Review the default preferences in the Window -> Preferences window, select jslint4java in the left panel (repeat the last two actions to toggle jslint4java off)

The default preferences are as shown below.

Example of strict setting: if a semicolon is required by javascript, a warning message will appear in the left margin of the editor at that line of code
It is possible to exclude files or directories from jslint4java, which may be useful when including javascript not written by you (plugins, frameworks, etc)
Action: Close the jslint4java window to return to the editor
Action: Project -> Clean to see any changes

6. Add the Console to the Javascript perspective

It is useful to use the console for debugging your setup and app.

Action: Window -> Show View -> Console
When deploying your app to a device or AVD, the status of loading, installing and starting the activity is displayed in the console

The image below shows example console output from a successful app deployment on a device

Note: The Console view (Eclipse) described above is not to be confused with the Android SDK's LogCat window in the DDMS (debugging) Perspective and the use of console.log(). Links to DDMS documentation and AppLaud User Tips for DDMS here.

Part 2 Run the App on a Device or Simulator (AVD)

7. The demo projects need no editing and are ready to run on your device.

7a. Running the app on the simulator (Android Virtual Device)

Action: Select your project at the top level in the Project Explorer
Action: From the menu bar select Run -> Run Configurations
Action: Select the Target tab (between Android and Common tabs)
The Run Configurations window should look similar to the image below

Action: Verify your project is selected under Android Application, and in the Name field at the top
Action: Select Automatic or Manual (Automatic recommended for AVD)
Action: Select the AVD in the list of virtual devices
If AVD list is empty, see Android documentation on AVD setup
Action: Select Run to launch the simulator
Wait patiently for the AVD to start up, unlock the screen, wait for app to run!

7b. Running an app on a real device

Action: Attach the Android device to your development host, confirm USB and debugging are enabled on your device
Action: Select your project at the top level in the Project Explorer
Action: From the top menu bar select Run -> Run Configurations
The Run Configurations window should look similar to the image in AVD section above
Action: Verify your project is selected under Android Application, and in the Name field at the top
Action: Select the Target tab (between Android and Common tabs)
Action: Select Manual (as opposed to the Automatic selection in AVD instructions)
Action: Select Run to get to the next window, as shown below
If your device is not listed, see Android documentation on vendor id