How to add ViewFlipper in android?

This article is about the implementation of ViewFipper in android. It is an extension of the ViewAnimator class which helps to animate between views added to it. ViewFlipper makes it easy to switch view. To control over flipping between views ViewFlipper provides two methods startFlipping() and stopFlipping(). To automatically switch between views, add the autoStart tag and set its value to true.To give more control to user, add views dynamically in the ViewFlipper. A ViewFlipper can be used in the gallery app to navigate between the images or videos.

Approach:

  1. Create a new Android Resource Directory. Right-click on res folder and select Android Resource Directory. Make sure to select resource type as anim.
  2. Now create a new slide_left.xml file in the anim directory and add the following code. This is the animation that will be used in switching views.

    slide_left.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

          
    <?xml version="1.0" encoding="utf-8"?>
        <translate
            android:duration="@android:integer/config_mediumAnimTime"
            android:fromXDelta="0"
            android:toXDelta="-50%p" />
        <alpha
            android:duration="@android:integer/config_mediumAnimTime"
            android:fromAlpha="1.0"
            android:toAlpha="0.0" />
    </set>     

    chevron_right

    
    

  3. Now create a new slide_right.xml file in the anim directory and add the following code. This is the animation that will be used be used in switching views.

    slide_right.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

          
    <?xml version="1.0" encoding="utf-8"?>
        <translate
            android:duration="@android:integer/config_mediumAnimTime"
            android:fromXDelta="50%p"
            android:toXDelta="0" />
        <alpha
            android:duration="@android:integer/config_mediumAnimTime"
            android:fromAlpha="0.0"
            android:toAlpha="1.0" />
    </set>

    chevron_right

    
    

  4. Add the following code in the activity_main.xml file. In this file, ViewFlipper is added to the layout. All the widgets that are added in the view flipper will act as different views. Two buttons next and previous are also added.

    activity_main.xml



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

          
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="MainActivity">
      
        <ViewFlipper
      
            android:id="@+id/view_flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inAnimation="@android:anim/slide_in_left"
            android:outAnimation="@android:anim/slide_out_right">
      
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/gfg" />
      
            <TextView
                android:layout_gravity="center"
                android:textStyle="bold"
                android:textColor="#219806"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GeeksForGeeks"
                android:textSize="20sp"
            />
      
            <Button
                android:textColor="#219806"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Open Website" />
        </ViewFlipper>
      
        <Button
            android:id="@+id/prev_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:layout_margin="16dp"
            android:text="Previous" />
      
        <Button
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_margin="16dp"
            android:text="Next" />
      
    </RelativeLayout>

    chevron_right

    
    

  5. Now add the following code in the MainActivity.java file. Previous and Next buttons will help us to switch between the views. In previous button, for in animation slide_right is used and for out animation slide_left is used and vice versa for next button.

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package org.geeksforgeeks.gfgviewflipper;
      
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.ViewFlipper;
    import androidx.appcompat.app.AppCompatActivity;
      
    public class MainActivity extends AppCompatActivity {
        ViewFlipper flipper;
        Button prev_Button, next_Button;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      
            flipper = findViewById(R.id.view_flipper);
            prev_Button = findViewById(R.id.prev_button);
            next_Button = findViewById(R.id.next_button);
      
            prev_Button.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v)
                    {
                        // It is used to set the in and out
                        // animation of View flipper.
                        flipper.setInAnimation(MainActivity.this,
                                               R.anim.slide_right);
                        flipper.setOutAnimation(MainActivity.this,
                                                R.anim.slide_left);
      
                        // It shows previous item.
                        flipper.showPrevious();
                    }
                });
      
            next_Button.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v)
                    {
                        // It is used to set the in and out
                        // animation of View flipper.
                        flipper.setInAnimation(MainActivity.this,
                                               android.R.anim.slide_left);
                        flipper.setOutAnimation(MainActivity.this,
                                                android.R.anim.slide_right);
      
                        // It shows next item.
                        flipper.showNext();
                    }
                });
        }
    }

    chevron_right

    
    

Output:

Add autoStart tag in ViewFlipper and set its value to true. Then it will work like this.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.