Click here to Skip to main content
13,291,257 members (61,126 online)
Click here to Skip to main content
Add your own
alternative version


39 bookmarked
Posted 30 Mar 2010

Android: ViewFlipper Touch Animation like News & Weather

Rate this:
Please Sign up or sign in to vote.
Android: ViewFlipper Touch Animation like News & Weather


In thie tutorial we can learn how to solve a common problem in Android project, to have more info regarding Android project I suggest to you to download the ADT Android Pluglins and Eclipse. Let's start with a little basics around Android development.


To begin the android develompent you need tree important thins: The Android Sdk (you can download it here), A Project Editor (i suggest eclipse) and the Android eclipse plugin.

When you have the environment ready you can start with this tutorial.

When you open for the first time the Android SDK you need to create a virtual device, I suggest to create a common device using as Target the Android 1.6 Api Level 4 and then you need to add the hardware features that you need in your environment, for example: SD Card Support, Accellerometer, Camera Support etc. if you need help to start up an android virtual device follow this link.

Start the Ecplise Project

Follow these simple step to create an Android Project in eclipse:

  1. Select File > New > Project.
  2. Select Android > Android Project, and click Next.
  3. Select the contents for the project:
    • Enter a Project Name. This will be the name of the folder where your project is created.
    • Under Contents, select Create new project in workspace. Select your project workspace location.
    • Under Target, select an Android target to be used as the project's Build Target. The Build Target specifies which Android platform you'd like your application built against.

      Unless you know that you'll be using new APIs introduced in the latest SDK, you should select a target with the lowest platform version possible, such as Android 1.6.

      Note: You can change your the Build Target for your project at any time: Right-click the project in the Package Explorer, select Properties, select Android and then check the desired Project Target.

    • Under Properties, fill in all necessary fields.
      • Enter an Application name. This is the human-readable title for your application — the name that will appear on the Android device.
      • Enter a Package name. This is the package namespace (following the same rules as for packages in the Java programming language) where all your source code will reside.
      • Select Create Activity (optional, of course, but common) and enter a name for your main Activity class.
      • Enter a Min SDK Version. This is an integer that indicates the minimum API Level required to properly run your application. Entering this here automatically sets the minSdkVersion attribute in the <uses-sdk> of your Android Manifest file. If you're unsure of the appropriate API Level to use, copy the API Level listed for the Build Target you selected in the Target tab.
  4. Click Finish.
when you are ready the ADT creates for you the following folders and files:
  • src/: Includes any Activity Java file. All other Java files for your application go here.
  • <Android Version>: Includes the android.jar file that your application will build against. This is determined by the build target that you have chosen in the New Project Wizard
  • gen/: This contains the Java files generated by ADT, such as your file and interfaces created from AIDL files (this is an automatic class)..
  • assets/: This is empty. You can use it to store raw asset files.
  • res/: A folder for your application resources, such as drawable files, layout files, string values, etc.
  • AndroidManifest.xml: The Android Manifest for your project.
  • This file contains project settings, such as the build target. This files is integral to the project, as such, it should be maintained in a Source Revision Control system. It should never be edited manually — to edit project properties, right-click the project folder and select "Properties".

In this tutorial we use only two folder: src/ and res/, now start with the sample solution to the common problem

How to Slide Two (or more) Layout like the News & Weather by Touch Event

Now that you are ready with Android, one of the first things we try to in Android development is to emulate the graphics effect that have the best applications. So, one of the animations/events mostly used and highly effective is the sliding window from one activity to another by using the fing. To do this we need a little bit of java code and some tips in our XML layout.

Begin from the XML Layout File

Open from res/layout/ the main.xml (or some other layout file) and put this lines: 











            android:text="my first panel"



            android:textStyle="bold" >






            android:text="my second panel"



            android:textStyle="bold" >

As you can see, I add one ViewFlipper, two LinearLayout and for each inner layout a simpletextview, this first step is ncessary to create a proper switching layout, after you can customize as you want the style of the two inner layout and if you want add a toolbar to switch around the inner layout.

Second step: Java Code (Switch Layout by Touch) 

Now open your main class from src/<yout package name> and in the begin of the class declare these two variables: 

private ViewFlipper vf;
private float oldTouchValue;

The first Variable (VF) is needed to constrol the ViewFlipper and the second one is needed to the touch event, now attach the viewflipper to the class :

public void onCreate(Bundle savedInstanceState) {
   vf = (ViewFlipper) findViewById(;

Now we have a declared viewflipper and can proceed to the last step of this simple tutorial.

The Touch Event

One of the most important feature of this new mobile phone is the Touch Screen system and like iPhone apps or other touching device the user prefer to switch among the activies by their fingers. In Android develpment to attach a touch event you can do two things "implement the touchlistener" or declare am onTouchEvent by overriding the main method.

In this sample we use the second case, take a look of the following code and then to the explaination:

public boolean onTouchEvent(MotionEvent touchevent) {
    switch (touchevent.getAction())
        case MotionEvent.ACTION_DOWN:
            oldTouchValue = touchevent.getX();
        case MotionEvent.ACTION_UP:
            if(this.searchOk==false) return false;
            float currentX = touchevent.getX();
            if (oldTouchValue < currentX)
            if (oldTouchValue > currentX)
    return false;

As you can see, when the user touch for the first time the device a fill the float variable (oldTouchValue) with the X position of his finger, then when the user release his finger I check the new position of the event to decide if the user want to go next or previous ( oldTouchValue < currentX, oldTouchValue > currentX). To change the layout the code is the same but I use different animation if the user want to go next or previous, for more explaining about the animation and the AnimationHelper I put this sample code:

//for the previous movement
public static Animation inFromRightAnimation() {

    Animation inFromRight = new TranslateAnimation(
    Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
    Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    inFromRight.setInterpolator(new AccelerateInterpolator());
    return inFromRight;
public static Animation outToLeftAnimation() {
    Animation outtoLeft = new TranslateAnimation(
     Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  -1.0f,
     Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    outtoLeft.setInterpolator(new AccelerateInterpolator());
    return outtoLeft;
// for the next movement
public static Animation inFromLeftAnimation() {
    Animation inFromLeft = new TranslateAnimation(
    Animation.RELATIVE_TO_PARENT,  -1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
    Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    inFromLeft.setInterpolator(new AccelerateInterpolator());
    return inFromLeft;
public static Animation outToRightAnimation() {
    Animation outtoRight = new TranslateAnimation(
     Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,  +1.0f,
     Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
    outtoRight.setInterpolator(new AccelerateInterpolator());
    return outtoRight;

You can decide to put these method in a static class (like me) or to declare they in your class.


Now you have the base class and the event to catch the touch movement from right to left ( show.previous) and from left to right (, a simple code that explain the four animation movement amd a simple layout to try this. I would suggest to do further testing with more than two layout and with more complex content. This is only a sample of the Android ability, but I think that you can find more powerful solutions!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Francesco Lo Truglio (FLT.lab)
Web Developer FLT.lab
Italy Italy
Web Developer and Project Manager, founder of FLT.lab
Google Developer Certified on JsMaps Api

You may also be interested in...


Comments and Discussions

QuestionVery Nice! Pin
From X20-Oct-11 20:08
memberFrom X20-Oct-11 20:08 
GeneralMy vote of 5 Pin
gourav vaidya14-Jun-11 1:51
membergourav vaidya14-Jun-11 1:51 
GeneralMy vote of 3 Pin
gourav vaidya13-Jun-11 22:52
membergourav vaidya13-Jun-11 22:52 
Generalsorry but.. Pin
paradoxxl6-Jun-11 3:50
memberparadoxxl6-Jun-11 3:50 
GeneralMy vote of 1 Pin
Member 77440476-Apr-11 14:14
memberMember 77440476-Apr-11 14:14 
GeneralRe: My vote of 1 Pin
Francesco Lo Truglio (FLT.lab)6-Apr-11 16:59
memberFrancesco Lo Truglio (FLT.lab)6-Apr-11 16:59 
GeneralCode is not complete, clear Pin
Member 77440476-Apr-11 14:12
memberMember 77440476-Apr-11 14:12 
GeneralRe: Code is not complete, clear Pin
Francesco Lo Truglio (FLT.lab)6-Apr-11 16:59
memberFrancesco Lo Truglio (FLT.lab)6-Apr-11 16:59 
Question[My vote of 2] missing code Pin
etbetz17-Nov-10 12:14
memberetbetz17-Nov-10 12:14 
AnswerRe: [My vote of 2] missing code Pin
Francesco Lo Truglio (FLT.lab)6-Apr-11 16:58
memberFrancesco Lo Truglio (FLT.lab)6-Apr-11 16:58 
GeneralTHX Pin
csshuai12-Nov-10 22:28
membercsshuai12-Nov-10 22:28 
GeneralRe: THX Pin
Member 77440476-Apr-11 14:13
memberMember 77440476-Apr-11 14:13 
GeneralRe: THX Pin
Francesco Lo Truglio (FLT.lab)6-Apr-11 16:58
memberFrancesco Lo Truglio (FLT.lab)6-Apr-11 16:58 
GeneralMy vote of 3 Pin
JoeSox19-Aug-10 5:08
memberJoeSox19-Aug-10 5:08 
GeneralRe: My vote of 3 Pin
Francesco Lo Truglio (FLT.lab)6-Apr-11 16:57
memberFrancesco Lo Truglio (FLT.lab)6-Apr-11 16:57 
GeneralSuggestion Pin
JoeSox19-Aug-10 5:07
memberJoeSox19-Aug-10 5:07 
GeneralRe: Suggestion Pin
Francesco Lo Truglio (FLT.lab)6-Apr-11 16:56
memberFrancesco Lo Truglio (FLT.lab)6-Apr-11 16:56 
GeneralThank you! Pin
azusa7go15-Aug-10 12:47
memberazusa7go15-Aug-10 12:47 
GeneralRe: Thank you! Pin
Member 77440476-Apr-11 14:12
memberMember 77440476-Apr-11 14:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171207.1 | Last Updated 30 Mar 2010
Article Copyright 2010 by Francesco Lo Truglio (FLT.lab)
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid