Android ViewFlipper Animation example

ViewFlipper is a subclass of ViewAnimator that makes it easy to animate a bunch of views that are added to it. It only displays one child view at a time and you can also set it to rotate the views automatically. Just keep in mind that if you have duration set for your animation alpha then the flipper duration should be greater than that otherwise the view will change even before it completely comes into focus.

Android ViewFlipper Animation example Android ViewFlipper new View Android ViewFlipper auto flip

String Resource - strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">ViewFlipper</string>
    <string name="menu_settings">Settings</string>

    <color name="bisque">#ffe4c4</color>
    <color name="snow">#cdc9c9</color>
    <color name="honeydew">#f0fff0</color>
    
</resources>

Animation Resource - slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate android:duration="5000" android:fromXDelta="-100%" android:toXDelta="0%"/>
    <alpha android:duration="5000" android:fromAlpha="0.0" android:toAlpha="1.0" />
</set>

Animation Resource - slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate android:duration="5000" android:fromXDelta="-100%" android:toXDelta="0%"/>
    <alpha android:duration="5000" android:fromAlpha="0.0" android:toAlpha="1.0" />
</set>

Animation Resource - slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate android:duration="5000" android:fromXDelta="0%" android:toXDelta="-100%"/>
    <alpha android:duration="5000" android:fromAlpha="1.0" android:toAlpha="0.0" />
</set>

Animation Resource - slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate android:duration="5000" android:fromXDelta="0%" android:toXDelta="100%"/>
    <alpha android:duration="5000" android:fromAlpha="1.0" android:toAlpha="0.0" />
</set>

Layout Resource for the Main Activity

<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"
    tools:context=".MainActivity" >

    <RelativeLayout android:id="@+id/topLayout"
  android:layout_width="match_parent" android:layout_height="48dp"
  android:layout_alignParentTop="true">

  <View android:layout_width="match_parent" android:layout_height="2dp"
   android:layout_alignParentBottom="true" android:layout_marginLeft="3dp"
   android:layout_marginRight="3dp" android:background="?android:attr/dividerVertical" />

  
  <Button android:id="@+id/previousView" android:layout_width="wrap_content"
   android:layout_height="wrap_content" android:layout_alignParentLeft="true"
   android:layout_alignParentTop="true" 
   android:text="Previous" android:layout_alignParentBottom="true" />

  <View
      android:id="@+id/viewDivider1"
      android:layout_width="2dp"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentTop="true"
      android:layout_marginBottom="3dp"
      android:layout_marginTop="3dp"
      android:layout_toRightOf="@id/previousView"
      android:background="?android:attr/dividerVertical" />
  
  <Button android:id="@+id/nextView" android:layout_width="wrap_content"
   android:layout_height="match_parent" android:layout_alignParentRight="true"
   android:layout_alignParentTop="true"
   android:text="Next" android:layout_alignParentBottom="true" />
  
  <View
      android:id="@+id/viewDivider2"
      android:layout_width="2dp"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentTop="true"
      android:layout_marginBottom="3dp"
      android:layout_marginTop="3dp"
      android:layout_toLeftOf="@id/nextView"
      android:background="?android:attr/dividerVertical" />
  
  <ToggleButton
      android:id="@+id/toggleButton"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="ToggleButton" 
      android:textOff="Start Flipper"
         android:textOn="Stop Flipper" 
         android:layout_alignParentTop="true"
         android:layout_alignParentBottom="true" 
         android:layout_toRightOf="@+id/viewDivider1" 
         android:layout_toLeftOf="@+id/viewDivider2"/>
  
  

 </RelativeLayout>
 
    <ViewFlipper
        android:id="@+id/myViewFlipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/topLayout">

    <AnalogClock
        android:id="@+id/analogClock1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:background="@color/bisque" />
    
    <AnalogClock
        android:id="@+id/analogClock2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:background="@color/honeydew" />
    
    <AnalogClock
        android:id="@+id/analogClock3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:background="@color/snow" />
    
    </ViewFlipper>
    
</RelativeLayout>

Main Activity

package com.as400samplecode;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ToggleButton;
import android.widget.ViewFlipper;

public class MainActivity extends Activity implements OnClickListener{

 private ToggleButton myToggleButton;
 private Button previousView, nextView;
 private Animation slide_in_left, slide_in_right, slide_out_left, slide_out_right;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //get references to our buttons and toogle button
        myToggleButton = (ToggleButton) findViewById(R.id.toggleButton);
        previousView = (Button) findViewById(R.id.previousView);
        nextView = (Button) findViewById(R.id.nextView);
        
        //attach onClick listeners to the buttons
        myToggleButton.setOnClickListener(this);
        previousView.setOnClickListener(this);
        nextView.setOnClickListener(this);
        
        //create animations
        slide_in_left = AnimationUtils.loadAnimation(this, R.anim.slide_in_left);
        slide_in_right = AnimationUtils.loadAnimation(this, R.anim.slide_in_right);
        slide_out_left = AnimationUtils.loadAnimation(this, R.anim.slide_out_left);
        slide_out_right = AnimationUtils.loadAnimation(this, R.anim.slide_out_right);
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

 @Override
 public void onClick(View v) {
  
  //get reference to the view flipper
  ViewFlipper myViewFlipper = (ViewFlipper) findViewById(R.id.myViewFlipper);
  //set the animation for the view that enters the screen
  myViewFlipper.setInAnimation(slide_in_right);
  //set the animation for the view leaving th screen
  myViewFlipper.setOutAnimation(slide_out_left);
  
  switch (v.getId()) {
  case R.id.nextView:
   //show the next view
   myViewFlipper.showNext();
   break;
   
  case R.id.previousView:
   //show the next view
   myViewFlipper.setInAnimation(slide_in_left);
   myViewFlipper.setOutAnimation(slide_out_right);
   myViewFlipper.showNext();
   break;
   
  case R.id.toggleButton:
   
   if(myToggleButton.isChecked()){
    //set flipper interval
    myViewFlipper.setFlipInterval(6000);
    //start flipping the views
    myViewFlipper.startFlipping();
         }
         else{
          //stop flipping the views
          myViewFlipper.stopFlipping();
         }
   break;
   
  }
 }
    
}

Reference

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.