Android: Switching screens in an Activity with animations (using ViewFlipper)

Posted May 26th @ 11:48 pm by Boyan Tsolov

Advertisement

In this post I’ll show you how to add animations when trying to switch between screens. Usually when you switch between screens it’s a direct “poof” and the new screen appears in a very un-graceful way. The SDK offers a bunch of easy-to-use animations, and I’ll show you how to use them here.

I tried doing animations on the opening and closing of activities, but I haven’t figured that out yet fully. So instead, I will show you how to use animations when switching on objects/layers inside the same activity. It will still look like you are switching screens, but all the layout data will be in one single XML. If we were to switch between activities, each activity would have had (usually) its own layout XML.

And in the post coming after this one, I’ll show you how to start this animation and switch the screen while dragging your fingers on the touch screen. Let me be a little more precise: while dragging one finger on the touch screen. I’m not sure if the OS handles multi-touch right now – or if that’s something the device has to enable – or both.

Back to the topic: how to switch between layers using animations to make it look like you are changing screens… we will be using a ViewFlipper widget in the layout XML.

1. Create a new Android project, unless you already have one

01 new project

2. Create a new Activity class that extends android.app.Activity.

02 new class

3. Create a new directory under the /res directory and call it anim

03 res directory

4. Right-click on the new directory called anim and Import all the XML files from: Android_SDK\Platform\android-1.5\samples\ApiDemos\res\anim.

These are animations created using XML. The same animations can be created in code, but these are ready for us to use in XML.

04 anim directory

5. Open res\layout\main.xml and copy/paste the following in:

<?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"
    android:background="#ffffff"
    >

    <ViewFlipper android:id="@+id/details"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">  

        <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff">

            <TextView android:id="@+id/tv_country"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="18px"
            android:text="Country" >
            </TextView>
            <Spinner android:text=""
            android:id="@+id/spinner_country"
            android:layout_width="200px"
            android:layout_height="55px">
            </Spinner>
            <Button android:text="Next"
            android:id="@+id/Button_next"
            android:layout_width="250px"
                android:textSize="18px"
            android:layout_height="55px">
        </Button>
        </LinearLayout> 

        <LinearLayout
               android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff">

            <TextView android:id="@+id/tv_income"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textColor="#000000"
            android:textStyle="bold"
            android:textSize="18px"
            android:text="Income" >
            </TextView>
            <EditText android:text=""
            android:id="@+id/et_income"
            android:layout_width="200px"
            android:layout_height="55px">
            </EditText>
            <Button android:text="Previous"
            android:id="@+id/Button_previous"
            android:layout_width="250px"
                android:textSize="18px"
            android:layout_height="55px">
            </Button>
        </LinearLayout> 

    </ViewFlipper>        

</LinearLayout>

This is a little long, let’s inspect it more closely.

  • The outmost layer is a LinearLayout.
  • It contains only one inner layer: ViewFlipper
  • The first-level layers inside ViewFlipper will be the screens!
      • ViewFlipper contains 2 LinearLayouts. Each LinearLayout is 1 screen.
  • The first LinearLayout contains a label, a spinner (a dropdown), and a button
  • The second LinearLayout contains a label, an edit view (input box), and a button

6. Here is what Activity1.cs looks like:

package com.warriorpoint.taxman3;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.ViewFlipper;

public class Activity1 extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set main.XML as the layout for this Activity
        setContentView(R.layout.main);

        // Add a few countries to the spinner
        Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
        ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
                    android.R.layout.simple_spinner_dropdown_item,
                    new String[] { "Canada", "USA" });
        spinnerCountries.setAdapter(countryArrayAdapter);

        // Set the listener for Button_Next, a quick and dirty way to create a listener
        Button buttonNext = (Button) findViewById(R.id.Button_next);
        buttonNext.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                // Get the ViewFlipper from the layout
                ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);

                // Set an animation from res/anim: I pick push left in
                vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
                vf.showNext();
        }
        });

        // Set the listener for Button_Previous, a quick and dirty way to create a listener
        Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
        buttonPrevious.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {
                // Get the ViewFlipper from the layout
                ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
                // Set an animation from res/anim: I pick push left out
                vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
                vf.showPrevious();
        }

        });        

    }
}

Let’s try and decipher the code:

  • First I set the main.xml to be the layout for this Activity
  • I input Canada and USA as the values in my dropdown (the Spinner object)
  • Then I create two listeners for the two buttons that I have Button_next and Button_previous
  • Each button does the following:
      • Gets a reference to the ViewFlipper
      • Sets an animation by passing it the context of this class and an animation from a res/anim XML file
      • showNext() or showPrevious() is called – which literally flips between the LinearLayouts in the ViewFlipper widget in the main.xml either forwards or backwards

That’s it! Run it!

Look at that fancy Spinner!

05 spinner

Click Next and watch it flow!

06 animation

Disclaimer: There is a problem with the back animation when you press “Previous”. It flickers a little and doesn’t flow properly backwards. I still have to figure out why. If anyone knows why, drop me a comment below!

Next up: Removing the “Next” and “Previous” buttons and switching screens by using your finger to drag on the touch screen.



4 Trackbacks/Pingbacks

  1. Pingback: Android: Switching screens by dragging over the touch screen | Warrior Point - Latest News on SaaS & Tutorials for On-demand Software on May 29, 2009
  2. Pingback: Android GUI examples on June 3, 2010
  3. Pingback: Animaciones para cambiar entre actividades | | AndroideityAndroideity on December 17, 2011
  4. Pingback: Sliding Image in imageView Android | Android Development tutorial | Android Development tutorial on September 28, 2012

37 Comments

  1. stephen
    June 6, 2009 at 04:16

    Hi for the disclaimer.. try using another animation R.anim.slide_right instead of push_left_out . thanks for the tutorial it’s really great!

  2. Boyan
    June 7, 2009 at 15:56

    Thanks Stephen, I’ll try it out!

  3. StarHan
    June 29, 2009 at 03:42

    why i can’t rotate an acitivity with y axle but it works well when a view rotates? Is there any difference between an acitivity and a view when they are appled rotateanimation which rotated with y axle?
    thanks for your help!

  4. jong10
    November 5, 2009 at 22:06

    Thank you! It’s great!!

  5. shining
    November 5, 2009 at 22:08

    WOW!!!! VERY NICE TIP!

    I have found this for a loooooooooooooong time!

    Thank you.

  6. tse
    January 26, 2010 at 01:57

    R.anim.push_left_in error

  7. tse
    January 26, 2010 at 01:57

    help me

  8. drne
    February 19, 2010 at 11:57

    In my case it just flicks, not animates, so it may be something with emulator. I have not tried it on the device.

  9. Tom
    March 3, 2010 at 15:44

    for the diclaimer, try to set 4 different animations

    next screen:
    vf.setInAnimation() … 100 -> 0 in the animation xml
    vf.setOutAnimation() … 0 -> -100 in the animation xml

    previous direction:
    vf.setInAnimation() … -100 -> 0 in the animation xml
    vf.setOutAnimation() … 0 -> 100 in the animation xml

  10. John
    April 6, 2010 at 04:54

    Hi all i am new to android .
    i want to develop calendar application in android.
    but i dont know how to start,if any one have examples related to android plz do mail me .

    Thanks and Regards
    john

  11. Somedude
    June 6, 2010 at 06:25

    In step 6 you wrote Activity1.cs instead of Activity1.java!!! Come on man :P Thanks anyhow for the great tutorial.. Keep it up!

  12. Matt
    July 8, 2010 at 15:22

    LOL, I can tell you’re an old C# developer; it’s not Activity1.cs, it’s Activity1.java :)

  13. rosebeat
    September 19, 2010 at 05:17

    Whenever I click on Next, I get the error “Application stopped unexpectedly” and I have to force close it. Why is that? Please help me. I have tried other examples of switching between the activites and the same thing happened. Whenever i click on next it gives me runtime error.
    Anyone has any idea why is it so?

  14. and
    September 23, 2010 at 06:17

    Have u kept the following code in AndroidManifest file

    hope this should work for you

  15. and
    September 23, 2010 at 06:17

    @rosebeat
    Have u kept the following code in AndroidManifest file

    hope this should work for you

  16. and
    September 23, 2010 at 06:21

    @rosebeat
    did u kept the foll code in AndroidManifest file

    hope this should work for you

  17. Baluk
    December 6, 2010 at 11:06

    Thanks for the helpful tutorial. I want to switch between activities by clicking a button through animate. This tutorials tells about multiple screens in one activity. So can any one tell me how to work with 2 with this animate file.

    Thank You,
    Baluk

  18. Sticker Printing Los Angeles CA
    December 23, 2010 at 02:47

    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.

  19. Praveen
    December 24, 2010 at 03:46

    Hello John, I’m new to android and I also tried developing a simple calendar and I could do it. please tell me ur mail id I shall send u the sorce code, u can go thro it and understand.

    Hello Everybody,
    I need to change the layout view in my calendar application from month view to week view and day view as well. Here I should do it without changing the activity. Please someone help me in doing this with single activity.

    Thanks,
    Praveen.

  20. Shaiful
    February 8, 2011 at 04:15

    Can I get the source code for the animations?

  21. premsagar
    February 11, 2011 at 07:43

    how can i get animation of paper folding…?
    can i get source code for that?

  22. premsagar
    February 16, 2011 at 01:03

    Dear Sir,

    I’m new coming in Graphic development. And I need to compose a animation of Paper folding in Android.

    Anyone have tutorial or sample code for my reference?

  23. Appliance Repair Memphis TN
    February 25, 2011 at 02:42

    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.

  24. beginner
    April 6, 2011 at 18:41

    Please provide a zipped file, that should make it less frustrating.

  25. Alex
    October 3, 2011 at 11:49

    This is the right blog for anyone who wants to find out about this topic. Great stuff, just great!

    Best regards Alex

  26. plo
    December 11, 2011 at 13:31

    my previous button is not working …force close is error

  27. Art
    March 3, 2012 at 14:09

    Can Anybody Help me????? Is it possible to drag between XML files????

  28. Luiz Verçosa
    March 22, 2012 at 17:52

    Very good! It helped me. Thanks!!!

  29. Brazilian dude
    May 23, 2012 at 18:19

    Thanks, dude… I was getting crazy with it. God bless you!

  30. Ashish
    June 5, 2012 at 07:10

    It really helps man, thanks allot for your contribution

  31. Davidson
    June 9, 2012 at 08:45

    I have got a lot problem getting my emulator to connect the connection breaks and it doe not display my project but it works fine I use windows xp please help me

  32. Olzhas
    June 26, 2012 at 01:53

    It’s possible to create animation between class or activities? If yes, how i can do it?

  33. Olzhas
    June 26, 2012 at 01:57

    It’s possible to create animation between class or activities? If yes, how i can do it?in class i use andengine, and i want switching class of andengine

  34. Sahar.b
    July 26, 2012 at 17:29

    I’m getting white screen before the slide animation..
    what should I do?

    Thnx!

  35. Andhika
    October 15, 2012 at 03:55

    Very good tutor, thanx !!
    I’am start create new project android now..

  36. Gezim
    March 6, 2013 at 04:24

    Hi guys, thanks for this post, I’m new here and I don’t know what is anim.push_left_in on this line vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
    In my R.java class I have no “anim” and I don’t know what should contains this anim, can anyone help me?

  37. gry komputerowe w biedronce
    April 13, 2014 at 05:38

    What i don’t understood is in truth how you are now not actually a lot more smartly-liked than you might be right now. You are so intelligent. You know thus considerably when it comes to this subject, made me in my opinion believe it from numerous varied angles. Its like women and men don’t seem to be involved until it’s something to accomplish with Girl gaga! Your own stuffs excellent. Always maintain it up!

Leave a comment

Standard Login

Options:

Colors

  • Sex xxx asian
  • free african pussy pics
  • Bhumika chawla sex scene
  • only lovely mature naked wives
  • girl videos sex teen
  • pretty young models xxx
  • young boys mature mom
  • young skinny erotic models
  • young pretty women erotic sex
  • granny boy hardcore pics
  • erotic massage and prostate videos
  • seducing my neighbors wife videos
  • nipple orgasm porn
  • sex ed online videos
  • borodin alexander petite suite
  • free teen pornstar videos
  • man with penises fuck video
  • black dick penetrated in park
  • free beautiful teens pussy
  • ass sluts thumb galleries
  • asian lesbian pussies
  • young and younger sex
  • Oman sex girls
  • black pussy white cockfuck videos
  • naked scandinavian college girls
  • Teen dildo fucking
  • licking boy ass movies free
  • white pussy africa
  • japanese girls cum swapping
  • black girl loves cum
  • crazy dumper black finger pussy
  • mother and son fuck forum porn
  • teen hardcore photo galleries
  • fuck the wifes freinds
  • free cock pussy fuck
  • free young girls make sex images
  • free movies sex sites
  • free threesome porn videos
  • young girls are my weakness
  • Miss sexy girl
  • wife world free videos
  • africa sex porn vagina movies
  • girls fingering each other pics
  • Lesbians having sex in the kitchen
  • lesbian servant porn
  • girls bak naked
  • amateur model porn
  • Chubby nude teen
  • bkk fuck train porn
  • asian teens having sex mpegs
  • teen girls in the bath
  • wife fuck rottweiller
  • black fuck asian girls
  • Hot nude college girls
  • funny base japanese girl
  • asian hand jobs free galleries
  • Public ass fucking
  • free full lenght anal sex films
  • photographer galleries topless
  • watch full length porn movie
  • movies of black fat
  • movies hard porn free
  • anal fuck hard
  • Jamie chung nude photos
  • anal sex start up kit
  • deep in teen ass movie
  • mom young girl sex tube
  • selfsuck porn taboo video gallery
  • ebony dicks ivory chicks
  • young girl mature couple
  • daughter fuck at night videos
  • video amateur coquin
  • big natural tits lesbian sex amateur
  • xxx sex ticket
  • lesbian eyeglass sex
  • are black women better at sex
  • free video wife stripped outside
  • mature lesbian homemade tube
  • nude black teen males
  • free big tits clamped pictures
  • jelena jensen new hardcore webcam video
  • auntie likes my pussy
  • Tamil lesbian movies
  • Wet pussy squirt
  • youngest little teen porn
  • free homemade husband wife fuck movies
  • hardcore free porn to wach online
  • face fuck ebony teen
  • amateur reality porn orgy
  • homeade hardcore threesome porn
  • amateur party girls
  • little girl cannot take massive dick
  • free video gapeing anal
  • girl fucks for porn interview
  • Hot lesbians movies
  • sexy mature greek women
  • scarlett johansen topless pics
  • vx sex pics
  • very young latina girl sex
  • erotic belly dancing topless nude video
  • smell latin ass video
  • videos of girls pissing in pants
  • mom handjob movie
  • roadside blowjob videos
  • multiple orgasm free movies
  • glamour gallery couples porn
  • young free teen
  • Ot another teen movie
  • Masturbation how to video
  • naked wife on porn tube
  • excalibur party pit girls pics
  • free movie stars porn movie
  • mature granny models pics
  • Hawas sex scene
  • watch free hardcore videos
  • blonde lesbins using dildos
  • homegrown big breast amateur girls
  • reality shows for and younger
  • s daughter fuck school videos
  • vanessa villela naked pics
  • Lesbian teens poetry
  • ebony dreams free pics
  • kendra wilkinson porn pictures
  • Pictures of public sex
  • slutload pussy machine licking
  • petite hardcore movies
  • indian white interracial porn
  • glamour housewives pictures
  • latina big butt anal
  • my first mature videos
  • perfect snatch petite
  • free young hot teen movies
  • granny shows pussy
  • gangbang teen anal
  • reflex girls black paw print watch
  • oscar lusth foursome video
  • free hardcore public fucking videos
  • naked teen picture exchange
  • ts girls i want to fuck
  • somali girl sex
  • erotic picture hosting
  • japan torrii gates pictures
  • bikini girl butt lickers
  • xxx couples seduce teens
  • olympics girls sand volleyball team
  • Sexy girl taking a shit
  • batman batgirl porn
  • muscular girls fuck
  • wife sluts black
  • romantic erotic softcore video trailers
  • girl caught letting lick pussy
  • hard gysytle fuck videos
  • pictures of unusual facial shapes
  • sexy naked boys with girls
  • free pictures og group sex
  • free pussy doctor porn videos
  • hot ass teen girls
  • shaven mature pics
  • amature naked wifes
  • light skin black girl fucked hard
  • Pussy stretched wide open
  • Good girl fuck
  • aaliyah naked pictures
  • Hot girl with big boob
  • shaved hardcore movies
  • How to fuck ass
  • anal fingering masturbating
  • anal movie story free
  • Early teen nude model webring
  • hot sexy babes free
  • perfect matrue pussy
  • sex my wife black
  • sucking boobs of girlfriend
  • hot beach babes pics
  • black porn facial
  • oral sex tips vagina taste
  • big breasts black
  • made at home deep throat videos
  • sexual intercourse old couples
  • Erotic outdoor sex
  • Natural big tits teen
  • Sex with sister teen frend
  • amateur beach bikini pics
  • young black xxx teen
  • big boobs for girls busty tube
  • Lea thompson sex scene
  • nude beach amateur videos
  • young anal cum babes
  • Reese witherspoon sex scene video
  • leaked amateur sex vids
  • free midget interracial amature porn
  • free pics of girls in pantyhose
  • fat wife not sexually attractive
  • teen fucks after party
  • wife sluts for big dicks
  • czech amateur auditions porn free
  • Black chick lesbian
  • pussy pics free gallery
  • redhead anal fuck machine cumshot
  • tiny little petite asian
  • chines hardcore movies
  • gilmore girls wore rose movie
  • Big boobs old
  • reshma boobs sucking videos
  • sex old babes
  • black boys videos free
  • kerala girls nude pics
  • free giant boobed anime chicks movies
  • sexy older woman sex videos
  • sex offenders dateline videos
  • pornstar with the hottest butt
  • wet female sex videos
  • pakistani sex videos real
  • mature pose pics
  • asian girls fusking
  • free ebony daughter mother boyfriend movies
  • what movie shows sex penetration
  • bills pics nude teens
  • free sex door videos
  • suck fuck cunt movies teen young
  • interracial creampie vids
  • free anime porn big tit videos
  • girl next door porn site
  • fitness babes xxx
  • hot teen vids free
  • mature amteurs outside pics
  • anime bondage butt sex
  • videos x gratuit amateur
  • chubby teen chicks
  • young thai girls fuck
  • black chritmas full length movie
  • licking her own pussy
  • teen topenga nude pics
  • Fuck girl video
  • young teens gallery
  • concerts gone wrong with pussydolls flashing
  • fuck teen girls videos free
  • neeru bajwa naked pics
  • sex videos with g straps
  • shaved pussy cumshot fucking
  • naked black girls shaking there ass
  • hardcore young teen
  • vintage retro porn movies
  • never seen before pussy insertions
  • sexy asian message
  • shemale handjob galleries
  • girls slumber party
  • black fat ass porn
  • femdom handjob videos free
  • free videos of naked bbw
  • guys with guys having anal sex
  • alicia loren anal hardcore
  • Sexy teen socks
  • olympics butts sprinters
  • interracial cheating wives videos
  • mature pussy galleries
  • wife swap long video
  • hot mature women galleries
  • pretty black nude college girls video
  • young girls cum swallow
  • pure blond pussy
  • adult cont video free porn
  • party boat girls nude
  • black emmanuel video
  • wife sex show
  • amateur girl porn sites
  • sexy hard japan
  • Sex yang hot
  • porn videos young cute
  • carat porn girls
  • amateur xxx family
  • plump open pussy
  • sunny leone licking pussy
  • stream real wife sex
  • free hardcore indian sex video
  • my teenage son is a girl
  • ebony bbw free movies
  • Sexy girl shit
  • teen gf fuck
  • Shilpa shetty nude sex
  • fuck girls in sharjah
  • mature seduces teen sex
  • sex tapes of first time anal
  • Teen beach nude
  • free sex movies downloads no membership
  • lesbians nipple fuck
  • two couples videos
  • sexy girl from celebrity rehab
  • asian brother sister sex
  • heidi pratt naked pictures playboy
  • wwe mickey james pussy
  • white shemale loves black
  • black rhino interracial sex clib
  • blonde teacher sexual
  • amateur hien cam sex tapes
  • flashig pussy outdoors
  • fat ebony pussy
  • pinky pornstar blowjob
  • you tube videos asian sexy women
  • lick my teen ass galleries
  • male bi blowjob movies
  • messy facial pictures
  • xxx too young
  • naked ex girl friends
  • Porn sex anal
  • supergirl sex fanfic
  • oral fucking sex
  • free xxx wide pussy videos
  • Dita von teese lesbian sex video
  • deep anal wife sex
  • asian suck movies
  • women with brazilian bikini wax pictures
  • Home made masturbator
  • hot bleach pussy
  • teen swinger vids
  • free full length lingerie anal movies
  • interracial free sex video
  • sex videos of big butt girls
  • Trixie teen sex with boyfriend
  • Farrah fawcett nude photos
  • amateur wifes tits
  • sites like teen pics
  • free black on white sex tpg
  • miget women showing tits and pussy
  • ffm free movie post
  • girls nude with sweet wet pussy
  • camping men sex pics
  • free asian adult porn
  • nude chicks video
  • blonde fucked by blacks
  • lesbian eating pussy gallery
  • Lesbians having sex with strap on
  • why asian girl
  • young girls near bikini
  • sexey nuresing girl
  • free sexy emo chicks porn
  • materbating orgasm video
  • bob anal sex
  • sister porn videos
  • forced pussy licking story
  • jill kelley porn pics
  • group sex home movie
  • asian lesbians sucking tits
  • little asian kitty pics
  • Girl and monkey sex
  • crys pussy stuffed
  • young twin girls fucking
  • couples crossdress sex
  • huge dick in her ass scream
  • vintage german threesome porn
  • british model sex movies