AdapterViewFlipper in Android with Example

The AdapterViewFlipper class, a subclass of the ViewAnimator class, is what we use to switch from two or multiple views when only one is present at a time. The AdapterViewFlipper is frequently used in presentations. It is a transition widget element that allows us to create transitions to our views. It is mainly used for animating a screen display AdapterViewFlipper provides a technique for moving from one view to another with suitable animations for easy transitions between two or more views ( ImageView, TextView, or any Layout).

Difference of AdapterViewFlipper and ViewFlipper

ViewFlipper and AdapterViewFlipper both belong to the same ViewAnimator subclasses. Initially, the ViewFlipper is used to display all fixed slide views. As a result, views will not be recycled. AdapterViewFlipper populates the data with an Adapter (similar to ListView / Spinner / RecyclerView, for example), so the children are decided on the fly, and the views representing the children may be recycled. To display all child views, AdapterViewFlipper is utilised. As a result, there is the possibility of dynamically recycling and loading views.

XML code for the basic AdapterViewFlipper

<AdapterViewFlipper
android:id = "@+id/simpAdapterViewFlipper"
android:layout_width = "match_parent"
android:layout_height = "wrap_content" >
< !--   Adding View’s Here -- >
</ AdapterViewFlipper >

Important AdapterViewFlipper Methods

Let's go through some essential AdapterViewFlipper methods that may be used to control the AdapterViewFlipper.

1. setAdapter(Adapter adapter)

This method specifies the data adapter as well as the views that will be used to show the data in this widget. We have several Adapters to choose from when setting data in AdapterViewFlipper. As the BaseAdapter is the parent adapter, that's why it can be utilized for additional view customization. It is used to fill the data in AdapterViewFlipper.

Following is the code to set the adapter for an AdapterViewFlipper.

AdapterViewFlipper  simAdapterViewFlipper  =  ( AdapterViewFlipper ) findViewById ( R.id.simAdapterViewFlipper ) ;  
// getting the AdapterViewFlipper reference
simAdapterViewFlipper.setAdapter( adapter ) ; 
// AdapterViewFlipper adapter setting .The adapter is the object of custom adapter in //this case.

2. startFlipping()

This function starts a timer that cycles over the child’s views. When we have to start the flipping of views based on a click or another event, we should use this method.

Here, this code begins the timer for cycling through the child view of AdapterViewFlipper.

AdapterViewFlipper  simAdapterViewFlipper   = ( AdapterViewFlipper ) findViewById ( R.id.simAdapterViewFliper ) ;
 // getting the reference of AdapterViewFlipper
simAdapterViewFlipper.startFlipping() ; 
// starting the flipping of views

3. stopFlipping()

We are using this method for stopping the timer, which means there are zero flips left. Sometimes we must stop the flipping on click or another event. The procedure is then used to disable the view flipping.

We are attempting to prevent the timer from cycling through the child view of AdapterViewFlipper in this code.

AdapterViewFlipper  simAdapterViewFlipper  =  ( AdapterViewFlipper ) findViewById ( R.id.simAdapterViewFlipper ) ; 
// getting the reference of AdapterViewFlipper
simAdapterViewFlipper.stopFlipping() ; 
// stopping the flipping of views

4. setFlipInterval(int milliseconds)

We apply this function or method to identify how long it takes to wait before it switches to the next view in milliseconds.

We set the interval time to 5 seconds below to indicate how long to wait before switching to the next display.

AdapterViewFlipper simAdapterViewFlipper  =  (AdapterViewFlipper) findViewById    ( R.id.simAdapterViewFlipper ) ; 
// getting the reference of AdapterViewFlipper
simAdapterViewFlipper.setFlipInterval( 5000 ) ; 
// setting 5 seconds for interval time

5. getFlipInterval()

This method or function returns the flip interval time in milliseconds, allowing us to know how long it will take to flip to the next view.

The flip interval time, which displays how long to wait before flipping to the next view, is shown below.

AdapterViewFlipper  simpleAdapterViewFlipper   = ( AdapterViewFlipper ) findViewById ( R.id.simpleViewFlipper ) ; 
// getting the reference of AdapterViewFlipper
int flipIntervals = simAdapterViewFlipper.getFlipInterval() ; 
// getting interval time of the flip

6. setAutoStart(boolean autoStart)

This approach is used to automatically transition between views. This function specifies whether or not this view calls startFlipping () when it is connected to a window.

We set the true value for auto-starting view switching below.

AdapterViewFlipper  simAdapterViewFlipper  =  ( AdapterViewFlipper ) findViewById  ( R.id.simAdapterViewFlipper ) ; 
// get the reference of AdapterViewFlipper
simAdapterViewFlipper.setAutoStart( true ); 
// setting true value to auto start the flipping between the views

7. isAutoStart()

We use this approach to determine whether the views begin switching automatically or not. This method returns Boolean results, either true or false. When this view automatically runs startFlipping() when connected to a window, it returns true; otherwise, it is false.

We'll see if the perspectives are automatically switching or not farther down.

AdapterViewFlipper simAdapterViewFlipper  =  ( AdapterViewFlipper ) findViewById        ( R.id.simAdapterViewSwitcher ) ;
 // getting the reference of AdapterViewFlipper
Boolean isAutoStarting  =  simAdapterViewFlipper.isAutoStart() ;  
// checks whether the views are starting flipping automatically or not.

8. isFlipping()

This approach is being used to determine whether or not the views are flipping as a consequence, this method returns either true or false as a Boolean value. It returns true if the child views are flipping; otherwise, it returns false.

Below, we analyze if the views are actually flipping or not.

AdapterViewFlipper  simpAdapterViewFlipper  =  ( AdapterViewFlipper ) findViewById 
( R.id.simpAdapterViewSwitcher ) ; 
// getting the reference of AdapterViewFlipper
Boolean isFlipped = simpAdapterViewFlipper.isFlipping() ; 
 // checks if the views are actively flipping or not flipping

9. showNext()

The next view of AdapterViewFlipper is displayed by this method or function AdapterViewFlipper, as previously stated, can have two or more child views, but only one can be shown at a time. As a consequence, the following views are displayed using this way.

In AdapterViewFlipper, we trigger a click event on the button and execute the showNext() function to display the next view.

AdapterViewFlipper simpAdapterViewFlipper  =  (AdapterViewFlipper) findViewById
 ( R.id.simpAdapterViewFlipper ) ;
 // getting the reference of AdapterViewFlipper
Button btNext=(Button) findViewById ( R.id.btNext) ; 
// getting Button’s reference
// sets the Click event on next button
btNext.setOnClickListener ( new View.OnClickListener ()  {


public void onClick ( View views )  {
// Auto-generating the method stub
// showing the ViewFlipper’s next view
simpAdapterViewFlipper.showNext () ;
}
} )  ;

10. showPrevious()

This method shows the Previous view of AdapterViewFlipper. As previously described, AdapterViewFlipper can have many child views where only one child is shown at a time. This is why the Previous views are displayed using this manner.

Here is the code for performing the button click event and calling the showPrevious() function to display the previous view in AdapterViewFlipper.

AdapterViewFlipper simpAdapterViewFlipper = ( AdapterViewFlipper ) findViewById
 ( R.id.simpAdapterViewFlipper) ; 
// getting the reference of AdapterViewFlipper
Button bttnPrevious = ( Button ) findViewById ( R.id.bttnPrevious ) ; 
// getting Button’s reference
// sets the Click event on next button
bttnPrevious.setOnClickListener ( new View.OnClickListener ()  {
public void onClick ( View view )  {
//Auto-generating the method stub
// showing the ViewFlipper’s next view
simpAdapterViewFlippper.showPrevious () ;
}
} ) ;

AdapterViewFlipper properties

Now let us talk about some basic attributes of an AdapterViewFlipper that will help us to set up it in our layout (XML).

1. id

The id property is used to distinguish an AdapterViewFlipper.

To uniquely identify the AdapterViewFlipper, its id is stated below.

< AdapterViewFlipper
android:id = "@+id/simAdapterViewFlipper"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"  >
</ AdapterViewFlipper  >

2. autoStart

This attribute is used to start animating/flipping between views automatically. You may also programmatically start flipping by using the setAutoStart() function.

Below we are setting the true value for the autoStart attribute of AdapterViewFlipper, which automatically causes the animation between views to begin.

< AdapterViewFlipper
android:id = "@+id/simAdapterViewFlipper"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:autoStart = "true"  > < !-- set Auto Start to true  -->
< !--   Add Views Here  -->
</ AdapterViewFlipper  >

3. flipInterval

This attribute is used to define how long it will take before switching to the next view in milliseconds. We may also set the interval time programmatically by using the setFlipInterval() function in a Java class.

We set the interval time for flicking between views to 3 seconds below.

< AdapterViewFlipper
android:id = "@+id/simAdapterViewFlipper"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:flipInterval = "3000>  < !--  set interval time for flipping the views -->
< !--   Add Views Here  -->
</ AdapterViewFlipper  >

4. Padding

We are using this attribute to provide the padding from an AdapterViewFlipper's left, right, top, or bottom side.

• Padding Right: This property is used when we have to set the padding from an adapterViewFlipper's right side.
• Padding Left: we have to use this property to provide the padding from the left of an AdapterViewFlipper.
• Padding Top: The padding from the top side of an AdapterViewFlipper is given by this property.
• Padding Bottom: This property is needed to specify the padding from an AdapterViewFlipper's bottom side.
• Padding: It is used to set the paddings from all of the sides of an AdapterViewFlipper.

In the below, we are setting an example for 10dp padding from all the sides of a ViewFlipper.

< AdapterViewFlipper
android:id = "@+id/simpAdapterViewFlipper"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:padding = "10dp">
< !-- setting 10 dp padding from all sides of ViewFlipper  -->
< !--   Add View’s Here -- >
</ AdapterViewFlipper >

5. background

We can specify the background of an AdapterViewFlipper using this attribute. In the background, we can place a colour or a drawable.

The code for setting the blue colour for the background of an AdapterViewFlipper is supplied below, along with an explanation.

< AdapterViewFlipper
android:id = "@+id/simpleViewFlipper"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:background = "#00f">  < !—setting the blue color in background of the ViewFlipper  -->
< !--   Add View’s Here -- >
</ AdapterViewFlipper >

Adjusting the background in the Java class AdapterViewFlipper

AdapterViewFlipper simpAdapterViewFlipper = ( AdapterViewFlipper ) findViewById 
( R.id. simpAdapterViewFlipper ) ;
 // getting AdapterViewFlipper’s reference
simpAdapterViewFlipper.setBackgroundColor( Color.BLUE ) ; 
// setting the blue color in the ImageFlipper’s background.

Example of AdapterViewFlipper In Android Studio

Here we can see that the below example of AdapterViewFlipper shows how to display an AdapterViewFlipper and configure the views in it using BaseAdapter. To begin, we set up two arrays, one for fruit photos and the other for fruit names. We set the Adapter to complete the data in views once we have created it. At last, we have to specify the auto start and flip interval times such that the AdapterViewFlipper switches between views and the current view exits, and the new view enters after the time period.

Step 1: Begin a New Project.

Please see How to Create/Start a New Project in Android Studio for instructions on how to do so. Take note that Java should be chosen as the programming language.

Step 2: Interacting with the activity main.xml file

Add a TextView to display text and an AdapterViewFlipper to display functionality to Res -> Layout -> activity main.xml. The whole code for the activity main.xml file is shown below.

The XML code for this example:

<? xml version = "1.0" encoding = "utf-8"? >
< RelativeLayout
    xmlns:android = "http://schemas.android.com/apk/res/android"
    xmlns:tools = "http://schemas.android.com/tools"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent"
    android:background = "#fff"
    tools:context = ".MainActivity" >
    < !--Text view to display Global stats -->
    < TextView
        android:id = "@+id/heading"
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"
        android:text = "The North"
        android:textSize = "28sp"
        android:textAlignment = "center"
        android:textColor = "#000"
        android:textStyle = "bold" />
    < !--AdapterViewFlipper to display the functionality -->
    < AdapterViewFlipper
        android:id = "@+id/adapterViewFlipper"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_below = "@id/heading"
        android:layout_marginTop = "10dp"
        android:layout_centerHorizontal = "true">
    </ AdapterViewFlipper >
  
</ RelativeLayout >

Step 3: Make a new Layout file.

Create a new XML layouts file called custom adapter layout.xml by right-clicking on      res -> layout -> new -> Layout Resource File and naming it custom adapter layout.xml.

Add an ImageView and a TextView to this file so they can be used in the Adapter.

The whole code for the custom adapter layout.xml file is shown below.

The XML code for this example:

<?xml version="1.0" encoding="utf-8"?>
<!--Relative Layout for displaying all the details-->
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="#fff">
    < !--Image view to show -->
    < ImageView
        android:id = "@+id/images"
        android:layout_width = "match_parent"
        android:layout_height = "225dp"
        android:layout_alignParentTop = "true" />
    < !--Text view for displaying stats coordinate with the images -->
    < TextView
        android:id = "@+id/names"
        android:layout_width = "wrap_content"
        android:layout_height = "wrap_content"
        android:layout_below = "@id/images"
        android:layout_centerHorizontal = "true"
        android:layout_marginTop = "10dp"
        android:textColor = "#000"
        android:textSize = "25sp" />
</ RelativeLayout >

Step 4: Using the MainActivity.java file

To start the AdapterViewFlipper, open MainActivity and add the following code. First, make two arrays: one for photos and one for names. Set the adapter to fill up the data in the view when we created it. Finally, specify the auto start and flip interval times such that AdapterViewFlipper switches between views and the current view exits, and the new view enters after the period. The MainActivity.java file's whole code is shown below. To understand the code, read the comments.

Java code:

import android.content.Context ;
import android.os.Bundle ;
import android.view.LayoutInflater ;
import android.view.View ;
import android.view.ViewGroup ;
import android.widget.AdapterViewFlipper ;
import android.widget.BaseAdapter ;
import android.widget.ImageView ;
import android.widget.TextView ;
import androidx.appcompat.app.AppCompatActivity ;
public class MainActivity extends AppCompatActivity {
    AdapterViewFlipper adaptViewFlipper ;
    int[] IMAGES = {
            R.drawable.lmage1,
            R.drawable.Image2,
            R.drawable.lmage3,
            R.drawable.Image4
    };  
    String[] NAMES = {
            "Carrot",
            "Potato",
            "Eggplant",
            "Onion"
    };  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate( savedInstanceState ) ;
        setContentView( R.layout.activity_main ) ;  
        // Linking the objects with their corresponding id's
        // that we gave earlier in .XML file
        adaptViewFlipper = ( AdapterViewFlipper ) findViewById
( R.id.adaptViewFlipper ) ;
        CustomAdapter customAdapt = new CustomAdapter( getApplicationContext () , NAMES, IMAGES);
        adaptViewFlipper.setAdapter( customAdapt ) ;
        adaptViewFlipper.setFlipInterval ( 3000 ) ;
        adaptViewFlipper.setAutoStart ( true ) ;
    }
}
class CustomAdapter extends BaseAdapter {
    Context context1 ;
    int[] image ;
    String[] name ;
    LayoutInflater inflate ;
    public CustomAdapter ( Context applicationContext, String[] name, int[] image) {
        this.context = applicationContext ;
        this.images = image ;
        this.names = name ;
        inflate = ( LayoutInflater.from( applicationContext ) ) ;
    }
    @Override
    public int getCount () {
        return name.length ;
    }
    @Override
    public Object getallItems ( int pos ) {
        return null ;
    }
    @Override
    public long getallItemsId ( int pos ) {
        return 0 ;
    }
    @Override
    public View getallView ( int position, View views, ViewGroup parent ) {
        views = inflate.inflate ( R.layout.custom_adapter_layout, null ) ;
        // Linking the objects with their corresponding id's
        // that we gave earlier in .XML file
        TextView names = ( TextView) view.findViewById ( R.id.names );
        ImageView images = (ImageView) view.findViewById ( R.id.images );
        // Setting the data in text view
        names.setText ( name [pos] ) ;      
        // Setting the image in Image view
        images.setImageResource ( image [pos] ) ;
        return view ;
    }
}

Output: Use an Emulator

Connect your device to the computer via a USB connection or an emulator, and then run the program. You will notice an adaptive flipping of the picture that will change after a particular millisecond.