AdapterViewFlipper Tutorial With Example In Android Studio

In Android, AdapterViewFlipper is same as ViewFlipper that are used for switching between views. It is an element of transition widget which helps us to add transitions on the views. It is mainly useful to animate a view on screen. AdapterViewFlipper switches smoothly between two or more views (TextView, ImageView or any layout) and thus provides a way of transitioning from one view to another through appropriate animations. You can create views for a AdapterViewFlipper widget either adding them on your own layout or by set an adapter of items.

Important Note: ViewFlipper and AdapterViewFlipper both are sub classes of ViewAnimator. The only difference is ViewFlipper we typically declare all children up front, and there is no recycling concept but in AdapterViewFlipper, we use an Adapter to fill data (as we used in ListView, Spinner, etc), so the children are determined on the fly and the views representing the children can be recycled.

Basic AdapterViewFlipper XML code:

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

Important Methods Of AdapterViewFlipper:

Let’s we discuss some important methods of AdapterViewFlipper that may be called in order to manage the AdapterViewFlipper.

1. setAdapter(Adapter adapter): This method is used to set the adapter that provides the data and the views to represent the data in this widget. For setting data in AdapterViewFlipper we have multiple choices for Adapters. Basically we use BaseAdapter to fill the data in AdapterViewFlipper because BaseAdapter is the parent adapter and is used for more customization of views.

Below we set the adapter for a AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.setAdapter(adapter); // set adapter for AdapterViewFlipper. Here adapter is object of custom adapter

2. startFlipping(): This method is used to start a timer to cycle through the child views. Sometime we need to start the flipping on click or any other event then we use this method to start the flipping of views.

Below we start the timer to cycle through the child view of AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFliper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.startFlipping(); // start the flipping of views

3. stopFlipping(): This method is used to stop the timer means there is no more flips. Sometime we need to stop the flipping on click or any other event then we use this method to stop the flipping of views.

Below we stop the timer to cycle through the child view of AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.stopFlipping(); // stop the flipping of views

4. setFlipInterval(int milliseconds): This method is used to set the interval time in milliseconds for how long to wait before flipping to the next view.

Below we set the 4 seconds for interval time that shows how long to wait before flipping to next view.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.setFlipInterval(4000); // set 4 seconds for interval time

5. getFlipInterval(): This method returns the flip interval time in milliseconds for how long to wait before flipping to the next view.

Below we get the flip interval time that shows how long to wait before flipping to the next view.

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

6. setAutoStart(boolean autoStart): This method is used to auto start the flipping between views. This method set if this view automatically callsstartFlipping() when it becomes attached to a window.

Below we set then true value for auto start the flipping of views.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.setAutoStart(true); // set true value for auto start the flipping between views

7. isAutoStart(): This method is used to check whether the views automatically start flipping or not. This method returns a Boolean type value either true or false. It returns true if this view automatically calls startFlipping() when it becomes attached to a window and return false if it is not.

Below we check whether the views are automatically flipping or not.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewSwitcher); // get the reference of AdapterViewFlipper
Boolean isAutoStart = simpleAdapterViewFlipper.isAutoStart();  // checks whether the views are automatically start flipping or not.

8. isFlipping(): This method is used to check whether the views are flipping or not. This method returns a Boolean value either true or false. It returns true if the child views are flipping and return false if they are not.

Below we check whether the views are currently flipping or not.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewSwitcher); // get the reference of AdapterViewFlipper
Boolean isFlipping= simpleAdapterViewFlipper.isFlipping();  // check whether the views are flipping or not

9. showNext(): This method is used to show the next view of AdapterViewFlipper. As we discussed earlier AdapterViewFlipper 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.

Below we perform click event on button and call showNext() method to show the next view in AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper

Button btnNext=(Button) findViewById(R.id.buttonNext); // get the reference of Button
// set Click event on next button
btnNext.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
// show the next view of ViewFlipper
simpleAdapterViewFlipper.showNext();
}
});

10. showPrevious(): This method is used to show the Previous view of AdapterViewFlipper. As we discussed earlier AdapterViewFlipper can have two or more child views of which only one is shown at a time so this method is used to show the Previous views.

Below we perform click event on button and call showPrevious() method to show the previous view in AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper

Button btnPrevious=(Button) findViewById(R.id.buttonPrevious); // get the reference of Button
// set Click event on next button
btnPrevious.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
// TODO Auto-generated method stub
// show the next view of ViewFlipper
simpleAdapterViewFlippper.showPrevious();
}
});

Attributes of AdapterViewFlipper:

Now let’s we discuss some common attributes of a AdapterViewFlipper that helps us to configure it in our layout (xml).

1. id: id attribute is used to uniquely identify a AdapterViewFlipper.

Below we set the id of the AdapterViewFlipper that is used to uniquely identify it.

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

2. autoStart: This property is used to automatically start animating/flipping between views. You can also automatically start flipping programmatically by using setAutoStart() method.

Below we set the true value for the autoStart property of AdapterViewFlipper which will automatically start animating between views.

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

3. flipInterval: 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.

Below we set the 3 seconds for the interval time for flipping between views.

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

4. padding: This attribute is used to set the padding from left, right, top or bottom side of a AdapterViewFlipper.

• paddingRight: This attribute is used to set the padding from the right side of a AdapterViewFlipper.
• paddingLeft: This attribute is used to set the padding from the left side of a AdapterViewFlipper.
• paddingTop: This attribute is used to set the padding from the top side of a AdapterViewFlipper.
• paddingBottom: This attribute is used to set the padding from the bottom side of a AdapterViewFlipper.
• Padding: This attribute is used to set the padding from the all the side’s of a AdapterViewFlipper.

Below we set the 10dp padding from all the sides of a ViewFlipper

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"> <!-- set 10 dp padding from all the sides of ViewFlipper -->

<!--   Add View’s Here -- >

</AdapterViewFlipper >

5. background: This attribute is used to set the background of a AdapterViewFlipper. We can set a color or a drawable in the background of a background: This attribute is used to set the background of a AdapterViewFlipper.

Below is the example code with explanation included in which we set the blue color for the background of a AdapterViewFlipper.

<AdapterViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00f"> <!-- set blue color in the background of ViewFlipper -->

<!--   Add View’s Here -- >

</AdapterViewFlipper >

Setting Background In AdapterViewFlipper In Java class:

AdapterViewFlipper simpleAdapterViewFlipper=(AdapterViewFlipper)findViewById(R.id. simpleAdapterViewFlipper); // get reference of AdapterViewFlipper
simpleAdapterViewFlipper.setBackgroundColor(Color.BLUE);// set blue color in the background of ImageFlipper.

AdapterViewFlipper Example In Android Studio:

Below is the example of AdapterViewFlipper in which we display a AdapterViewFlipper and set the views in that by using BaseAdapter. Firstly we create two arrays one for fruit images and other for fruit names. After creating, we set the Adapter to fill the data in views. Finally set the auto start and flip interval time so that AdapterViewFlipper switch between the views and the current view will go out and next view  will come in after the given time interval.

Below you can download complete project code, see final output and step by step explanation of example:

Download Code ?

Step 1: Create a new project and name it AdapterViewFlipperExample

Step 2: Open res -> layout ->activity_main.xml (or) main.xml and add following code :

In this step we open an xml file and add the code for displaying a AdapterViewFlipper by using its different attributes.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">

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

</AdapterViewFlipper>

</LinearLayout>

Step 3: Now create another XML layout. In our case, we name it as list_item.xml. Add the below code in it.

In this step we add one ImageView and one TextView in or xml file to use it in the adapter.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/fruitImage"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_gravity="center" />

<TextView
android:id="@+id/fruitName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="2dp"
android:textColor="#000" />
</LinearLayout>

Step 4: Open   src -> package -> MainActivity.java

In this step we open MainActivity and add the code for initiate the AdapterViewFlipper. Firstly we create two arrays one for fruit images and other for fruit names. After creating, we set the adapter to fill the data in views. finally set the auto start and flip interval time so that AdapterViewFlipper switch between the views and the current view will go out and next view  will come in after the given time interval.

package com.example.ip_d.viewflipperexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.AdapterViewFlipper;

public class MainActivity extends AppCompatActivity {

private AdapterViewFlipper simpleAdapterViewFlipper;
int[] fruitImages = {R.drawable.apple, R.drawable.pineapple, R.drawable.litchi, R.drawable.mango, R.drawable.banana};     // array of images
String fruitNames[] = {"Apple", "Pine Apple", "Litchi", "Mango", "Banana"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
// Custom Adapter for setting the data in Views
CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), fruitNames, fruitImages);
simpleAdapterViewFlipper.setAdapter(customAdapter); // set adapter for AdapterViewFlipper
// set interval time for flipping between views
simpleAdapterViewFlipper.setFlipInterval(3000);
// set auto start for flipping between views
simpleAdapterViewFlipper.setAutoStart(true);
}
}

Step 5: Create new class CustomAdapter.java and add following code In this step we create a custom adapter class and extends the BaseAdapter in that. In this we set the data in the views.

package com.example.ip_d.viewflipperexample;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {
Context context;
int[] fruitImages;
String[] fruitNames;
LayoutInflater inflter;

public CustomAdapter(Context applicationContext, String[] fruitNames, int[] fruitImages) {
this.context = applicationContext;
this.fruitImages = fruitImages;
this.fruitNames = fruitNames;
inflter = (LayoutInflater.from(applicationContext));

}

@Override
public int getCount() {
return fruitNames.length;
}

@Override
public Object getItem(int position) {
return null;
}

@Override
public long getItemId(int position) {
return 0;
}

@Override
public View getView(int position, View view, ViewGroup parent) {
view = inflter.inflate(R.layout.list_item, null);
TextView fruitName = (TextView) view.findViewById(R.id.fruitName);
ImageView fruitImage = (ImageView) view.findViewById(R.id.fruitImage);
fruitName.setText(fruitNames[position]);
fruitImage.setImageResource(fruitImages[position]);
return view;
}
}

Output:

Now run the App and you will see different fruit images sliding on screen after an time gap of 3 seconds.

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>