{"id":1749,"date":"2016-05-05T08:22:19","date_gmt":"2016-05-05T08:22:19","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=1749"},"modified":"2019-06-12T11:56:52","modified_gmt":"2019-06-12T11:56:52","slug":"viewflipper","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/viewflipper","title":{"rendered":"ViewFlipper Tutorial With Example In Android Studio"},"content":{"rendered":"<p>In Android, ViewFlipper is a subclass of ViewAnimator which\u00a0is used for switching between views. It is an element of transition widget which helps us to add transition on the views (i.e. changing from one view to another). It is mainly useful to animate a view on screen.<\/p>\n<p>ViewFlipper switches smoothly between two or more views (like TextView, ImageView or any layout) and thus provides a way of transitioning from one view to another through\u00a0appropriate animations. You can create views for a ViewFlipper widget either using a\u00a0factory\u00a0or by adding them on your own.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1812 size-full\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/ViewFlipper-in-Android.gif\" alt=\"ViewFlipper in Android\" width=\"302\" height=\"476\" \/><\/p>\n<p><span style=\"color: #ff0000;\"><strong>Important Note:<\/strong><\/span> \u00a0ViewFlipper and ViewSwitcher\u00a0both are sub classes of\u00a0ViewAnimator and does the same task. The main\u00a0difference between the two is ViewSwitcher can hold\u00a0only two\u00a0child views but\u00a0ViewFlipper can holds two or more child views and show one at a time.<\/p>\n<hr \/>\n<h4><strong>Basic ViewFlipper XML Code:<\/strong><\/h4>\n<pre>&lt;ViewFlipper\r\nandroid:id=\"@+id\/simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"&gt;\r\n\r\n&lt;!--\u00a0\u00a0 Add View\u2019s Here Which You Want to Flip -- &gt;\r\n&lt;!--We created two textview which will Flip--&gt;\r\n\r\n&lt;TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:text=\"First TextView\" \/&gt;\r\n\r\n &lt;TextView\r\n android:layout_width=\"wrap_content\"\r\n android:layout_height=\"wrap_content\"\r\n android:layout_marginTop=\"20dp\"\r\n android:text=\"Second TextView\" \/&gt;\r\n\r\n&lt;\/ ViewFlipper &gt;\r\n<\/pre>\n<hr \/>\n<h4><strong>Steps for Implementation of ViewFlipper:<\/strong><\/h4>\n<ol>\n<li>Get the reference of ViewFlipper in class using findViewById() method, or you can also create an object dynamically.<\/li>\n<li>Set a factory using switcherid.setFactory()<\/li>\n<li>Set an in-animation using switcherid.setInAnimation()<\/li>\n<li>Set an out-animation using switcherid.setOutAnimation()<\/li>\n<\/ol>\n<hr \/>\n<h4><strong>Important Methods Of ViewFlipper:<\/strong><\/h4>\n<p>Let\u2019s we discuss some important methods of ViewFlipper that may be called in order to manage the ViewFlipper.<\/p>\n<p><span style=\"color: #008000;\"><strong>1. startFlipping():<\/strong><\/span> This method is used to start a timer to cycle through the child views. Sometime when we need to start the flipping on Button click or any other event then we use this method to start the flipping of views.<\/p>\n<p>Below we start the timer to cycle through the child view of ViewFlipper.<\/p>\n<pre>ViewFlipper\u00a0 simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\nsimpleViewFlipper.startFlipping(); \/\/ start the flipping of views\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>2. stopFlipping():<\/strong><\/span> This method is used to stop the timer means there is no more flips. Sometime we need to stop the flipping on Button click or any other event then we use this method to stop the flipping of views.<\/p>\n<p>Below we stop the timer to cycle through the child view of ViewFlipper.<\/p>\n<pre>ViewFlipper\u00a0 simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\nsimpleViewFlipper.stopFlipping(); \/\/ stop the flipping of views\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>3. setFlipInterval(int milliseconds):<\/strong><\/span> This method is used to set the interval time in milliseconds for how long to wait before flipping to the next view.<\/p>\n<p>Below we set the 1\u00a0seconds for interval time that shows how long to wait before flipping to next view.<\/p>\n<pre>ViewFlipper\u00a0 simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\nsimpleViewFlipper.setFlipInterval(1000); \/\/set 1 seconds for interval time\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1814\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/setFlipInterval-in-ViewFlipper-Android.gif\" alt=\"setFlipInterval in ViewFlipper Android\" width=\"302\" height=\"257\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>4. setAutoStart(boolean autoStart):<\/strong> <\/span>This method is used to auto start the flipping between views. This method automatically call startFlipping() method to start Flipping when it becomes attached to a window.<\/p>\n<p>Below we set true value for auto start the flipping of views.<\/p>\n<pre>ViewFlipper\u00a0 simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\nsimpleViewFlipper.setAutoStart(true); \/\/ set true value for auto start the flipping between views\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>5. isAutoStart():<\/strong><\/span> This method is used to check whether the views are automatically start flipping or not. This method return a Boolean type value either\u00a0true or false. It return true if this view automatically calls\u00a0startFlipping()\u00a0when it becomes attached to a window and return false if it is not.<\/p>\n<p>Below we check whether the views are automatically flipping or not.<\/p>\n<pre>ViewFlipper\u00a0 simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\nBoolean isAutoStart = simpleViewFlipper.isAutoStart();\u00a0 \/\/ checks whether the views are automatically start flipping or not.\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>6. isFlipping():<\/strong> <\/span>This method is used to check whether the views are flipping or not. This method also return a Boolean value i.e.\u00a0either\u00a0true or false. It returns true if the child views are flipping and return false if they are not.<\/p>\n<p>Below we check whether the views are currently flipping or not.<\/p>\n<pre>ViewFlipper\u00a0 simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\nBoolean isFlipping= simpleViewFlipper.isFlipping();\u00a0 \/\/ check whether the views are flipping or not\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>7. showNext():<\/strong><\/span> This method is used to show the next view of ViewFlipper. As we discussed earlier ViewFlipper can have two or more child views of which only one is shown at a time so this method is used to show the next views.<\/p>\n<p>Below we perform click event on button and call showNext() method to show the next view in ViewFlipper.<\/p>\n<pre>ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\n\r\nButton btnNext=(Button) findViewById(R.id.buttonNext); \/\/ get the reference of Button\r\n\/\/ set Click event on next button\r\nbtnNext.setOnClickListener(new View.OnClickListener() {\r\n\r\npublic void onClick(View v) {\r\n\/\/ TODO Auto-generated method stub\r\n\/\/ show the next view of ViewFlipper\r\nsimpleViewFlipper.showNext();\r\n}\r\n});\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>8. showPrevious():<\/strong><\/span> This method is used to show the Previous view of ViewFlipper. As we discussed earlier ViewFlipper can have two or more child views of which only one is shown at a time. To show previous view this method is used.<\/p>\n<p>Below we perform click event on button and call showPrevious() method to show the previous view in ViewFlipper.<\/p>\n<pre>ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\n\r\nButton btnPrevious=(Button) findViewById(R.id.buttonPrevious); \/\/ get the reference of Button\r\n\/\/ set Click event on next button\r\nbtnPrevious.setOnClickListener(new View.OnClickListener() {\r\n\r\npublic void onClick(View v) {\r\n\/\/ TODO Auto-generated method stub\r\n\/\/ show the next view of ViewFlipper\r\nsimpleViewFlippper.showPrevious();\r\n}\r\n});\r\n<\/pre>\n<p><strong><span style=\"color: #008000;\">9. loadAnimation(Context context, int id):<\/span><\/strong> This method is used whenever we need to define an object of Animation class through AnimationUtilities class by calling a static method loadAnimation.<\/p>\n<p>Below we create an object of Animation class and load an animation by using AnimationUtils class.<\/p>\n<pre>\/\/ Declare in and out animations and loading them using AnimationUtils class\r\n Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);\r\n Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>10. setInAnimation(in):<\/strong><\/span> This method is used to sets the animation of the appearance of the object on the screen.<\/p>\n<p>Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the Animation on ViewFlipper.<\/p>\n<pre>ViewFlipper simpleViewFlipper =(ViewFlipper)findViewById(R.id.simpleViewFlipper); \/\/ initiate a ViewFlipper\r\nAnimation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); \/\/ load an animation\r\nsimpleViewFlipper.setInAnimation(in); \/\/ set in Animation for ViewFlipper\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>11. setOutAnimation(out):<\/strong><\/span> This method does the opposite of setInAnimation().<\/p>\n<p>whenever we use show the next view, it first removes the old view using an animation set with the setOutAnimation() method, and then places the new one using the animation set by the setInAnimation() method.<\/p>\n<p>Below we create an object of Animation class and load an animation by using AnimationUtils class and then set the out Animation on ViewFlipper<\/p>\n<pre>ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper); \/\/ get reference of ViewFlipper\r\nAnimation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); \/\/ load an animation\r\nsimpleViewFlipper.setOutAnimation(out); \/\/ set out Animation for ViewSwitcher\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>12. addView(View child):<\/strong><\/span> This method is used to add the child view at run time in the ViewFlipper.<\/p>\n<p>Below we create a new view i.e ImageView and then add that view in our ViewFlipper.<\/p>\n<pre>ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper);\/\/ get reference of ViewFlipper\r\n\r\nImageView imageView = new ImageView(this);\/\/ create a ImageView\r\nimageView.setImageResource(R.drawable.image);\/\/ set resource image in ImageView\r\nsimpleViewSwitcher.addView(imageView);\/\/ add the ImageView in ViewFlipper\r\n<\/pre>\n<hr \/>\n<h4><strong>Attributes of ViewFlipper In Android:<\/strong><\/h4>\n<p>Now let\u2019s we discuss some common attributes of a ViewFlipper that helps us to configure it in our layout (xml).<\/p>\n<p><strong><span style=\"color: #008000;\">1. Id:<\/span>\u00a0<\/strong>id attribute is used to uniquely identify a ViewFlipper.<\/p>\n<pre>&lt; ViewFlipper\r\nandroid:id=\"@+id\/simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\" &gt;\r\n\r\n&lt;!--\u00a0\u00a0 Add View\u2019s Here -- &gt;\r\n\r\n&lt;\/ ViewFlipper &gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>2. autoStart: <\/strong><\/span>This property is used to automatically start animating\/flipping between views. You can also automatically start flipping programmatically by using setAutoStart() method.<\/p>\n<p>Below we set the true value for the autoStart property of ViewFlipper that wiil automatically start animating between views.<\/p>\n<pre>&lt;ViewFlipper\r\nandroid:id=\"@+id\/simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:autoStart=\"true\"&gt; &lt;!\u2014set auto start property to true--&gt;\r\n\r\n&lt;!--\u00a0\u00a0 Add View\u2019s Here -- &gt;\r\n\r\n&lt;\/ViewFlipper&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>3. flipInterval: <\/strong><\/span>This property is used to set the interval time in milliseconds for how long to wait before flipping to the next view. You can also set interval time programmatically means in java class using setFlipInterval() method.<\/p>\n<p>Below we set the 3 seconds for the interval time for flipping between views.<\/p>\n<pre>&lt;ViewFlipper\r\nandroid:id=\"@+id\/ simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:flipInterval=\"3000\"&gt; &lt;!--\u00a0 set interval time for flipping the views --&gt;\r\n\r\n&lt;!--Add View\u2019s Here--&gt;\r\n\r\n&lt;\/ViewFlipper&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>4. padding: <\/strong><\/span>This attribute is used to set the padding from left, right, top or bottom side of a ViewFlipper.<\/p>\n<ul>\n<li><strong>paddingRight: <\/strong>This attribute is used to set the padding from the right side of a ViewFlipper<strong>.<\/strong><\/li>\n<li><strong>paddingLeft: <\/strong>This attribute is used to set the padding from the left side of a ViewFlipper<strong>.<\/strong><\/li>\n<li><strong>paddingTop: <\/strong>This attribute is used to set the padding from the top side of a ViewFlipper<strong>.<\/strong><\/li>\n<li><strong>paddingBottom: <\/strong>This attribute is used to set the padding from the bottom side of a ViewFlipper<strong>.<\/strong><\/li>\n<li><strong>Padding: <\/strong>This attribute is used to set the padding from the all the side\u2019s of a ViewFlipper<strong>.<\/strong><\/li>\n<\/ul>\n<p>Below we set the 10dp padding from all the sides of a ViewFlipper<\/p>\n<pre>&lt;ViewFlipper\r\nandroid:id=\"@+id\/simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:padding=\"10dp\"&gt; &lt;!-- set 10 dp padding from all the sides of ViewFlipper --&gt;\r\n\r\n&lt;!--\u00a0\u00a0 Add View\u2019s Here -- &gt;\r\n\r\n&lt;\/ViewFlipper&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>5. background:<\/strong><\/span> This attribute is used to set the background of a ViewFlipper. We can set a color or a drawable in the background of a background: This attribute is used to set the background of a ViewFlipper.<\/p>\n<p>Below is the example code with explanation included in which we set the red color for the background of a ViewFlipper.<\/p>\n<pre>&lt;ViewFlipper\r\nandroid:id=\"@+id\/simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:background=\"#f00\"&gt; &lt;!-- set red color in the background of ViewFlipper --&gt;\r\n\r\n&lt;!--\u00a0\u00a0 Add View\u2019s Here -- &gt;\r\n\r\n&lt;\/ViewFlipper&gt;\r\n<\/pre>\n<p><strong>Setting background in ViewFlipper In Java class:<\/strong><\/p>\n<pre>ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper); \/\/ get reference of ViewFlipper\r\nsimpleViewFlipper.setBackgroundColor(Color.RED);\/\/ set red color in the background of ImageFlipper.\r\n<\/pre>\n<hr \/>\n<h4><strong>ViewFlipper Example In Android Studio:<\/strong><\/h4>\n<p><span style=\"color: #008000;\"><strong>Example 1 Of ViewFlipper: <span style=\"color: #ff0000;\">(Don&#8217;t Miss ViewFlipper Example 2 after this)<\/span><\/strong><\/span><\/p>\n<p>Below is the example of ViewFlipper in which we display a ViewFlipper with three views first is ImageView, second is a layout in which we have a two TextView\u2019s and third is also a layout in which we have two Button\u2019s.<\/p>\n<p>In this example we also use one Button for switching the views of ViewFlipper. Firstly we load and set slide in left and slide in right animation and finally whenever a user click on next button, ViewFlipper switch between the views and the <em>current view will go out and next view will come in with specified animation.<\/em><\/p>\n<p>Below you can download complete project code, see final output and step by step explanation of the ViewFlipper example:<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"https:\/\/github.com\/abhisheksaini4\/ViewFlipperExample\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ? <\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1818\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/ViewFlipper-Example-in-Android-Studio.gif\" alt=\"ViewFlipper Example in Android Studio\" width=\"300\" height=\"439\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 1<\/strong><\/span><strong><span style=\"color: #008000;\">:<\/span>\u00a0<\/strong>Create a new project and name it <strong>ViewFlipperExample<\/strong><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2:<\/strong><\/span><strong>\u00a0<\/strong>Open <strong>res -&gt; layout -&gt;activity_main.xml (or) main.xml<\/strong> and add following code :<\/p>\n<p>In this step we open an xml file and add the code for displaying a Button and a ViewFlipper with three child views.<\/p>\n<pre>&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"&gt;\r\n\r\n    &lt;!-- ViewSwitcher with three views first is ImageView, second is a layout in which we have two TextView's\r\n     and third is a layout in which we have two Button's --&gt;\r\n    &lt;ViewFlipper\r\n        android:id=\"@+id\/simpleViewFlipper\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"&gt;\r\n\r\n        &lt;ImageView\r\n            android:layout_width=\"wrap_content\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_gravity=\"center\"\r\n            android:src=\"@drawable\/image\" \/&gt;\r\n\r\n        &lt;LinearLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:gravity=\"center\"\r\n            android:orientation=\"vertical\"&gt;\r\n\r\n            &lt;TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:text=\"First TextView\" \/&gt;\r\n\r\n            &lt;TextView\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_marginTop=\"20dp\"\r\n                android:text=\"Second TextView\" \/&gt;\r\n\r\n\r\n        &lt;\/LinearLayout&gt;\r\n\r\n        &lt;LinearLayout\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:gravity=\"center\"\r\n            android:orientation=\"vertical\"&gt;\r\n\r\n\r\n            &lt;Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:text=\"First Button\" \/&gt;\r\n\r\n            &lt;Button\r\n                android:layout_width=\"wrap_content\"\r\n                android:layout_height=\"wrap_content\"\r\n                android:layout_marginTop=\"20dp\"\r\n                android:text=\"Second Button\" \/&gt;\r\n\r\n\r\n        &lt;\/LinearLayout&gt;\r\n    &lt;\/ViewFlipper&gt;\r\n\r\n\r\n    &lt;Button\r\n        android:id=\"@+id\/buttonNext\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_gravity=\"center\"\r\n        android:layout_marginTop=\"150dp\"\r\n        android:background=\"#005\"\r\n        android:text=\"NEXT\"\r\n        android:textColor=\"#fff\"\r\n        android:textStyle=\"bold\" \/&gt;\r\n\r\n&lt;\/LinearLayout&gt;<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><\/span><strong>\u00a0<\/strong>Open <strong>src -&gt; package -&gt; MainActivity.java<\/strong><\/p>\n<p>In this step we open\u00a0MainActivity\u00a0and\u00a0add the code for initiate the ViewFlipper and Button. In this Firstly we load and set slide in left and slide in right animation and finally whenever a user click on next button, ViewFlipper switch between the views and the current view will go out and next view will come in with specified animation.<\/p>\n<pre>package com.example.ip_d.viewflipperexample;\r\n\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.View;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ViewFlipper;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    private ViewFlipper simpleViewFlipper;\r\n    Button btnNext;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n\r\n        setContentView(R.layout.activity_main);\r\n\r\n        \/\/ get The references of Button and ViewFlipper\r\n        btnNext = (Button) findViewById(R.id.buttonNext);\r\n        simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\n        \/\/ Declare in and out animations and load them using AnimationUtils class\r\n        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);\r\n        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);\r\n\r\n        \/\/ set the animation type to ViewFlipper\r\n        simpleViewFlipper.setInAnimation(in);\r\n        simpleViewFlipper.setOutAnimation(out);\r\n\r\n        \/\/ ClickListener for NEXT button\r\n        \/\/ When clicked on Button ViewFlipper will switch between views\r\n        \/\/ The current view will go out and next view will come in with specified animation\r\n        btnNext.setOnClickListener(new View.OnClickListener() {\r\n\r\n            public void onClick(View v) {\r\n                \/\/ TODO Auto-generated method stub\r\n                \/\/ show the next view of ViewFlipper\r\n                simpleViewFlipper.showNext();\r\n            }\r\n        });\r\n\r\n    }\r\n\r\n}\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Now run the App and you will see cat image on screen. Now click on next Button to Flip the views.<\/p>\n<hr \/>\n<h4><span style=\"color: #008000;\"><strong>ViewFlipper Example 2 In Android Studio:<\/strong><\/span><\/h4>\n<p>In the 2nd\u00a0example of ViewFlipper we display a ViewFlipper with 5 ImageView\u2019s. In this example we create ImageView\u2019s at run time and then add the views in the ViewFlipper using addView() method. After adding we load and set slide in left and slide in right animation and finally set the auto start and flip interval time so that ViewFlipper switch between the views and the <em>current view will go out and next view will come in with specified animation after the given time interval.<\/em><\/p>\n<p>Below you can download complete project code, see final output and step by step explanation of ViewFlipper example.<\/p>\n<p style=\"text-align: center;\"><a class=\"download\" href=\"https:\/\/github.com\/abhisheksaini4\/ViewFlipperExample\" target=\"_blank\" rel=\"nofollow\">Download Code<\/a><a class=\"help\" title=\"Learn How To Download Code And Import In Android Studio\" href=\"\/androidstudio\/download-code-abhiandroid\" target=\"_blank\" rel=\"nofollow\"> ? <\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1822\" src=\"\/ui\/wp-content\/uploads\/2016\/05\/ViewFlipper-Example-2-in-Android-Studio.gif\" alt=\"ViewFlipper Example 2 in Android Studio\" width=\"306\" height=\"390\" \/><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 1<\/strong><strong>:\u00a0<\/strong><\/span>Create a new project and name it <strong>ViewFlipperExample<\/strong><\/p>\n<p><span style=\"color: #008000;\"><strong>Step 2:<\/strong><\/span><strong>\u00a0<\/strong>Open <strong>res -&gt; layout -&gt;activity_main.xml (or) main.xml<\/strong> and add following code :<\/p>\n<p>In this step we open an xml file and add the code for displaying a Button and a ViewFlipper with three child views.<\/p>\n<pre>&lt;LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\"&gt;\r\n\r\n&lt;ViewFlipper\r\nandroid:id=\"@+id\/simpleViewFlipper\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"&gt;\r\n\r\n&lt;\/ViewFlipper&gt;\r\n&lt;\/LinearLayout&gt;\r\n<\/pre>\n<p><span style=\"color: #008000;\"><strong>Step 3:<\/strong><strong>\u00a0<\/strong><\/span>Open <strong>src -&gt; package -&gt; MainActivity.java<\/strong><\/p>\n<p>In this step we open\u00a0MainActivity\u00a0and\u00a0add the code to\u00a0initiate the ViewFlipper . In this firstly we create ImageView and then add the views in the ViewFlipper using addView() method. After adding we load and set slide in left and slide in right animation and finally set the auto start and flip interval time so that ViewFlipper switch between the views and the current view will go out and next view will come in with specified animation after the 3 second\u00a0time interval.<\/p>\n<pre>package com.example.ip_d.viewflipperexample;\r\n\r\nimport android.os.Bundle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.ImageView;\r\nimport android.widget.ViewFlipper;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    private ViewFlipper simpleViewFlipper;\r\n    int[] images = {R.drawable.apple, R.drawable.pineapple, R.drawable.litchi, R.drawable.mango, R.drawable.banana};     \/\/ array of images\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n\r\n        setContentView(R.layout.activity_main);\r\n\r\n        \/\/ get The references of ViewFlipper\r\n        simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); \/\/ get the reference of ViewFlipper\r\n\r\n        \/\/ loop for creating ImageView's\r\n        for (int i = 0; i &lt; images.length; i++) {\r\n            \/\/ create the object of ImageView\r\n            ImageView imageView = new ImageView(this);\r\n            imageView.setImageResource(images[i]); \/\/ set image in ImageView\r\n            simpleViewFlipper.addView(imageView); \/\/ add the created ImageView in ViewFlipper\r\n        }\r\n        \/\/ Declare in and out animations and load them using AnimationUtils class\r\n        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);\r\n        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);\r\n        \/\/ set the animation type's to ViewFlipper\r\n        simpleViewFlipper.setInAnimation(in);\r\n        simpleViewFlipper.setOutAnimation(out);\r\n        \/\/ set interval time for flipping between views\r\n        simpleViewFlipper.setFlipInterval(3000);\r\n        \/\/ set auto start for flipping between views\r\n        simpleViewFlipper.setAutoStart(true);\r\n    }\r\n}\r\n\r\n\r\n<\/pre>\n<p><strong>Output:<\/strong><\/p>\n<p>Now run the App and\u00a0you will see different Fruits image will start flipping after an interval of 3 seconds. This we created using ViewFlipper in Android.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Android, ViewFlipper is a subclass of ViewAnimator which\u00a0is used for switching between views. It is an element of transition widget which helps us to add transition on the views (i.e. changing from one view to another). It is mainly useful to animate a view on screen. ViewFlipper switches smoothly between two or more views &hellip; <a href=\"https:\/\/abhiandroid.com\/ui\/viewflipper\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">ViewFlipper Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1749","page","type-page","status-publish","hentry"],"acf":[],"psp_head":"<title>ViewFlipper Tutorial With Example In Android Studio \u2013 Abhi Android<\/title>\r\n<meta name=\"description\" content=\"Tutorial on ViewFlipper with 2 examples in Android Studio. Also learn ViewFlipper methods and attributes used in switching between views.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/ui\/viewflipper\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/comments?post=1749"}],"version-history":[{"count":3,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1749\/revisions"}],"predecessor-version":[{"id":2809,"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/pages\/1749\/revisions\/2809"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/ui\/wp-json\/wp\/v2\/media?parent=1749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}