{"id":12542,"date":"2014-08-05T11:00:53","date_gmt":"2014-08-05T08:00:53","guid":{"rendered":"http:\/\/examples.javacodegeeks.com\/?p=12542"},"modified":"2019-04-24T16:04:49","modified_gmt":"2019-04-24T13:04:49","slug":"android-viewflipper-example","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/android\/core\/widget\/viewflipper\/android-viewflipper-example\/","title":{"rendered":"Android ViewFlipper Example"},"content":{"rendered":"

ViewFlipper<\/code> is an extension class of ViewAnimator<\/code>, which animates between two or more views that have been added to it. Specfically, only one child is shown at a time.<\/p>\n

To get a better understanding, suppose that we have two TextViews that will be used in our app, but we want only one to be displayed at a time. That is, here is the most popular use case that ViewFlipper<\/code><\/a> fits in.<\/p>\n

What we are going to implement in this example, is rendering two simple screens using ViewFlipper. We ‘ll also try to create a basic animation while navigating between them. Let’s go!<\/p>\n

For the need of this example, we will use the following tools in a Windows 64-bit platform:
\n <\/p>\n

    \n
  1. JDK 1.7<\/li>\n
  2. Eclipse 4.4 Luna<\/li>\n
  3. Android SDK 4.4<\/li>\n<\/ol>\n
    Tip<\/strong>
    \nYou may skip project creation and jump directly to the     beginning of the example<\/strong><\/a> below.<\/div>\n<\/p>\n

    1. Creating a New Android Application Project<\/h2>\n

    Open Eclipse IDE and go to File \u2192 New \u2192 Project \u2192 Android Application Project.<\/p>\n

    Fill in the name of the application, the project and the package in the appropriate fields and then click Next.<\/p>\n

    \"Figure<\/a>
    Figure 1. Create a new Android application<\/figcaption><\/figure><\/p>\n

    In the next window, the \u201cCreate Activity\u201d option should be checked. The new created activity will be the main activity of your project. Then press Next button.<\/p>\n

    \"Figure<\/a>
    Figure 2. Configure the project<\/figcaption><\/figure><\/p>\n

    In \u201cConfigure Launcher Icon\u201d window you should choose the icon you want to have in your app. We will use the default icon of android, so click Next button.<\/p>\n

    Select the \u201cBlank Activity\u201d option and press Next.<\/p>\n

    \"Figure<\/a>
    Figure 3. Create the activity and select its type<\/figcaption><\/figure><\/p>\n

    You then have to specify a name for the new Activity and a name for the layout description of your app. The .xml files for the layout will automatically be created in the res\/layout<\/code> folder. Finally, press Finish.<\/p>\n

    \"Figure<\/a>
    Figure 4. Create a new blank activity<\/figcaption><\/figure><\/p>\n

    Here is the very final structure of the project, just in case you ‘ll miss something, while developing:<\/p>\n

    \"Figure<\/a>
    Figure 5. The final structure of the project<\/figcaption><\/figure><\/p>\n

    2. Creating the layout of the Main Activity<\/span><\/h2>\n

    Let’s do it by opening res\/layout\/activity_main.xml<\/code> and navigating to the respective xml tab and paste the following.<\/p>\n

    activity_main.xml<\/code><\/i>
    \n<\/span><\/p>\n

    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\nandroid:layout_width=\"fill_parent\"\nandroid:layout_height=\"fill_parent\"\nandroid:orientation=\"vertical\"\nandroid:background=\"#f5f5f5\" >\n\n        <ViewFlipper\n            android:id=\"@+id\/viewflipper\"\n            android:layout_width=\"fill_parent\"\n            android:layout_height=\"fill_parent\"\n            android:layout_margin=\"6dp\" >\n            \n \t    \n            <LinearLayout\n                android:layout_width=\"fill_parent\"\n                android:layout_height=\"fill_parent\"\n                android:gravity=\"center\"\n                android:orientation=\"vertical\" >\n\n                <TextView\n                \tandroid:layout_width=\"wrap_content\"\n                    android:layout_height=\"wrap_content\"\n                    android:layout_marginTop=\"15dp\"\n                    android:text=\"Windows PC\"\n                    android:textColor=\"#b7102f\"\n                    android:textSize=\"25dp\">\n                <\/TextView>\n\n                <ImageView\n                \tandroid:layout_marginTop=\"15dp\"\n                    android:id=\"@+id\/imageView1\"\n                    android:layout_width=\"wrap_content\"\n                    android:layout_height=\"wrap_content\"\n                    android:src=\"@drawable\/windows_pc\" \/>\n            <\/LinearLayout>\n            \n \t    \n        \t<LinearLayout\n        \t    android:layout_width=\"fill_parent\"\n                android:layout_height=\"fill_parent\"\n                android:gravity=\"center\"\n                android:orientation=\"vertical\" >\n\n                <TextView\n                    android:layout_marginTop=\"15dp\"\n                    android:layout_width=\"wrap_content\"\n                    android:layout_height=\"wrap_content\"\n                    android:text=\"Ubuntu PC\"\n                    android:textColor=\"#191975\"\n                    android:textSize=\"25dp\"\n                    android:textStyle=\"italic\" >\n                <\/TextView>\n\n                <ImageView\n                    android:layout_marginTop=\"15dp\"\n                    android:id=\"@+id\/imageView2\"\n                    android:layout_width=\"wrap_content\"\n                    android:layout_height=\"wrap_content\"\n                    android:src=\"@drawable\/ubuntu_pc\" \/>\n                    \n        \t<\/LinearLayout>\n        <\/ViewFlipper>\n<\/LinearLayout>\n<\/pre>\n
    So, we selected a LinearLayout<\/code> to hold our app’s UI and inside it a ViewFlipper<\/code> element (lines 8-63), which has two children. We ‘ll follow the LinearLayout<\/code> guidelines for the childrens’ design, too, so each one of them will be declared into a linear layout.
     
    <\/div> <\/div><\/p>\n
    What we want our separate screens (ViewFlipper’s children) contain is an image and a corresponding TextView<\/code>, declaring what the child has to do with.<\/p>\n
    So, let’s associate our children with two operating systems that I mostly use, windows and ubuntu linux. What these children will hold, is the operating system’s ImageView<\/code><\/a> and a TextView<\/code> that will make the animated navigation clearer.<\/p>\n
    Simple as that, windows child is presented in lines 15-36, while ubuntu linux child, in lines 39-62.<\/p>\n
    3. Coding the Main Activity<\/h2>\n
    Let’s first navigate to src\/com.javacodegeeks.android.textviewtest\/MainActivity.java<\/code>. Next, complete the class like this:<\/p>\n
    MainActivity.java<\/code><\/i><\/span><\/p>\n
    package com.javacodegeeks.android.viewflipperapp;\n\nimport android.app.Activity;\nimport android.os.Bundle;\nimport android.view.MotionEvent;\nimport android.widget.ViewFlipper;\n\npublic class MainActivity extends Activity {\n\tprivate ViewFlipper viewFlipper;\n    private float lastX;\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n    \tsuper.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);\n    }\n\n    \/\/ Using the following method, we will handle all screen swaps.\n    public boolean onTouchEvent(MotionEvent touchevent) {\n    \tswitch (touchevent.getAction()) {\n        \n        case MotionEvent.ACTION_DOWN: \n        \tlastX = touchevent.getX();\n            break;\n        case MotionEvent.ACTION_UP: \n            float currentX = touchevent.getX();\n            \n            \/\/ Handling left to right screen swap.\n            if (lastX < currentX) {\n            \t\n            \t\/\/ If there aren't any other children, just break.\n                if (viewFlipper.getDisplayedChild() == 0)\n                \tbreak;\n                \n                \/\/ Next screen comes in from left.\n                viewFlipper.setInAnimation(this, R.anim.slide_in_from_left);\n                \/\/ Current screen goes out from right. \n                viewFlipper.setOutAnimation(this, R.anim.slide_out_to_right);\n                \n                \/\/ Display next screen.\n                viewFlipper.showNext();\n             }\n                                     \n            \/\/ Handling right to left screen swap.\n             if (lastX > currentX) {\n            \t \n            \t \/\/ If there is a child (to the left), kust break.\n            \t if (viewFlipper.getDisplayedChild() == 1)\n            \t\t break;\n    \n            \t \/\/ Next screen comes in from right.\n            \t viewFlipper.setInAnimation(this, R.anim.slide_in_from_right);\n            \t\/\/ Current screen goes out from left. \n            \t viewFlipper.setOutAnimation(this, R.anim.slide_out_to_left);\n                 \n            \t\/\/ Display previous screen.\n                 viewFlipper.showPrevious();\n             }\n             break;\n    \t }\n         return false;\n    }\n}\n<\/pre>\n
    We first define lastX<\/code> variable, which will be our guide, in order to manipulate easier the transaction between the available screens. How could we “fire” the beginning of such a transaction? I thought of a tab layout and a swype event, when I first asked myself this qusetion, so let’s give it a try to the second one, which is more user-friendly.[ulp id=’Ja8Orb5oPKdShcXt’]<\/p>\n
    To get our ViewFlipper<\/code>‘s transactions done through swype event, we have to use MotionEvent<\/code><\/a> class. Obviously, this is the specific part of our case, so let’s have a look at the standard one, too: onTouchEvent<\/code><\/a> is what we want to handle touch actions between our app and the user.<\/p>\n
    The actual constants that we need from MotionEvent<\/code> class, in order to implement the swype animation for our ViewFlipper<\/code> element, are ACTION_DOWN<\/code> and ACTION_UP<\/code>. The first one indicates the initial starting location, while the second one, the final release location.<\/p>\n
    According to the fore-mentioned words, we start tracking the location of a gesture using line 24. Nevertheless,  things get somehow more complicated when we have to code the ACTION_UP<\/code> case, because we have to partition whether we have to do with a left-to-right gesture (lines 30-43) or with a right-to-left gesture (lines 46-59). Obviously, in each case we have to handle carefully the inherited  setInAnimation<\/code> and setOutAnimation<\/code> methods (we ‘ll talk in detail for the animation files attached on them, in the next section).<\/p>\n
    4. Coding the animations<\/h2>\n
    This is how it goes:<\/p>\n