Create A ViewFlipper App In Android Application Using Android Studio

Introduction

In this article you will learn how to develop a ViewFlipper app in an Android application using Android Studio.

Requirements

  • Android Studio 2.1.3.

If you want to create ViewFlipper Android app, it should follow the given steps.

Step 1

Now, open Android Studio and you can choose the File and subsequently New. Afterwards, choose the New Project.

Android

Step 2

Here, you can create your application name and choose where your project should be stored on the location and click Next button.

Android

Now, we can select the version of Android, which is  Target Android Devices.

Android

Step 3

Here, we can add the activity and click Next button.

Android

Now, we can write the activity name and click Finish button.

Android

Step 4

Now, open your project and you will go to activity_main.xml. Afterwards, you will build the design, which should be chosen with the toolbox and if you want some option like (ViewFlipper), it is possible with the help of the drag and drop method. Now, you will add the image on Drawable folder.

Android

Here, we can see the image in the Drawable folder.

Android

Now, we can see the Graphical User Interface design.



Step 5

Here, you will build on the design and write the .XML code.

Activity_mai.xml code

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:paddingBottom="@dimen/activity_vertical_margin"  
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  8.     android:paddingRight="@dimen/activity_horizontal_margin"  
  9.     android:paddingTop="@dimen/activity_vertical_margin"  
  10.     tools:context="xyz.rvconstructions.www.viewflipper.MainActivity">  
  11.   
  12.     <ViewFlipper  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:id="@+id/viewFlipper"  
  16.         android:layout_alignParentTop="true"  
  17.         android:layout_centerHorizontal="true"  
  18.         android:layout_marginTop="128dp" >  
  19.   
  20.         <TextView  
  21.             android:layout_width="wrap_content"  
  22.             android:layout_height="wrap_content"  
  23.             android:text="TexViewPage"  
  24.             android:id="@+id/textView"  
  25.             android:layout_centerVertical="true"  
  26.             android:layout_alignParentRight="true"  
  27.             android:layout_alignParentEnd="true" />  
  28.         <Button  
  29.             android:layout_width="wrap_content"  
  30.             android:layout_height="wrap_content"  
  31.             android:text="buttonpage"  
  32.             android:id="@+id/button"  
  33.             android:layout_centerVertical="true"  
  34.             android:layout_alignLeft="@+id/viewFlipper"  
  35.             android:layout_alignStart="@+id/viewFlipper" />  
  36.   
  37.   
  38.     </ViewFlipper>  
  39.   
  40.   
  41.   
  42. </RelativeLayout>  
Step 6

Now, you will go to the MainActivity.java page and build the Java code.

First, you need to declare a file, which is an extension file.

Android

Now, we can see MainActivity.java code.
  1. package xyz.rvconstructions.www.viewflipper;  
  2. import android.support.v7.app.AppCompatActivity;  
  3. import android.os.Bundle;  
  4. import android.view.animation.Animation;  
  5. import android.view.animation.AnimationUtils;  
  6. import android.widget.ImageView;  
  7. import android.widget.ViewFlipper;  
  8. public class MainActivity extends AppCompatActivity {  
  9.     private ViewFlipper ViewFlipper1;  
  10.     int[] images = {  
  11.         R.drawable.apple,  
  12.         R.drawable.straw,  
  13.         R.drawable.banana  
  14.     };  
  15.     @Override  
  16.     protected void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.activity_main);  
  19.         ViewFlipper1 = (ViewFlipper) findViewById(R.id.viewFlipper);  
  20.         for (int i = 0; i < images.length; i++) {  
  21.             ImageView imageView = new ImageView(this);  
  22.             imageView.setImageResource(images[i]);  
  23.             ViewFlipper1.addView(imageView);  
  24.         }  
  25.         Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);  
  26.         Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);  
  27.   
  28.         ViewFlipper1.setInAnimation( in );  
  29.         ViewFlipper1.setOutAnimation(out);  
  30.         ViewFlipper1.setFlipInterval(3000);  
  31.   
  32.         ViewFlipper1.setAutoStart(true);  
  33.     }  
  34. }  
Step 7

Here, you will go to run and select run app option.

Android

Here, you will choose the Emulator or the device, which is Nokia Nokia _X.

Android

Step 8

Here, you can see the output, as shown below.

Android

The ViewFlipper automatically makes changes to the image.

Android

 Now, you can see that button view page. 

Up Next
    Ebook Download
    View all
    Learn
    View all