AdapterViewFlipper in Android with Example
The AdapterViewFlipper class is a subclass of the ViewAnimator class and is used to flip between 2 or more views, such that only one view is displayed at a time. It is commonly used in slides. It is an element of the transition widget which helps to add transitions on the views. It is mainly useful to animate a view on the 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. Below is a preview sample of AdapterViewFlipper.
Difference Between ViewFlipper and AdapterViewFlipper
ViewFlipper and AdapterViewFlipper both are subclasses of ViewAnimator. The ViewFlipper is initially used to display all slide views fixed. This means that views will not be recycled. AdapterViewFlipper uses an Adapter to fill data (similar to ListView / Spinner / RecyclerView etc), so the children are determined on the fly and the views representing the children can be recycled. So AdapterViewFlipper is used to display all child views. So there is room for recycling views and loading views dynamically.
Steps for Creating AdapterViewFlipper
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with activity_main.xml file
Click on Res -> Layout -> activity_main.xml and add a TextView to display a text and the AdapterViewFlipper to display the functionality. Below is the complete code for the activity_main.xml file.
XML
<? 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: Create another Layout file
Now create another XML layouts file by right-clicking on res -> layout -> new -> Layout Resource File and name it as custom_adapter_layout.xml. In this file add an ImageView and TextView to use it in the Adapter. Below is the complete code for the custom_adapter_layout.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> <!--Relative Layout to display all the details--> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:background = "#fff" > <!--Image view to display--> < ImageView android:id = "@+id/image" android:layout_width = "match_parent" android:layout_height = "250dp" android:layout_alignParentTop = "true" /> <!--Text view to display stats coordinate with image--> < TextView android:id = "@+id/name" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_below = "@id/image" android:layout_centerHorizontal = "true" android:layout_marginTop = "5dp" android:textColor = "#000" android:textSize = "20sp" /> </ RelativeLayout > |
Step 4: Working with MainActivity.java file
Open MainActivity and add the below code to initiate the AdapterViewFlipper. Firstly create two arrays one for images and the other for names. After creating, set the adapter to fill the data in the view. Finally set the auto start and flip interval time so that AdapterViewFlipper switch between the views and the current view will go out and the next view will come in after the given time interval. Below is the complete code for the MainActivity.java file. Refer to the comments inside the code to understand the code.
Java
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 adapterViewFlipper; int [] IMAGES = { R.drawable.ldeosai, R.drawable.lakedudipatsar, R.drawable.lrama, R.drawable.lakekachura }; String[] NAMES = { "Deosai National Park" , "Lake Dudipatsar" , "Rama Meadows" , "Lower Kachura Lake" }; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Link those objects with their respective id's // that we have given in .XML file adapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper); CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), NAMES, IMAGES); adapterViewFlipper.setAdapter(customAdapter); adapterViewFlipper.setFlipInterval( 2600 ); adapterViewFlipper.setAutoStart( true ); } } class CustomAdapter extends BaseAdapter { Context context; int [] images; String[] names; LayoutInflater inflater; public CustomAdapter(Context applicationContext, String[] names, int [] images) { this .context = applicationContext; this .images = images; this .names = names; inflater = (LayoutInflater.from(applicationContext)); } @Override public int getCount() { return names.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 = inflater.inflate(R.layout.custom_adapter_layout, null ); // Link those objects with their respective id's // that we have given in .XML file TextView name = (TextView) view.findViewById(R.id.name); ImageView image = (ImageView) view.findViewById(R.id.image); // Set the data in text view name.setText(names[position]); // Set the image in Image view image.setImageResource(images[position]); return view; } } |
Output: Run on Emulator
Now connect your device with a USB cable or an Emulator and launch the application. You will see an Adaptiveflipping of the image will display which will change after a certain millisecond.
Contact Us