Changing screen with ViewFlipper and Animation
Hello guys, today we are going to see how to change the screen with viewflipper and put animation in it. First of all we create the animation files. The animation files reside in the anim folder in the "res" directory.
in_from_left.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="-100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400" />
</set>
in_from_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate
android:fromXDelta="100%" android:toXDelta="0%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400" />
</set>
out_to_left.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0%" android:toXDelta="-100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"/>
</set>
out_to_right.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<translate android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="1400"/>
</set>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ViewFlipper
android:id="@+id/view_flipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- The child Views/Layout to flip -->
<!-- Layout 1 for 1st Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:text="This Is Screen 1"
android:textColor="#191975"
android:textSize="25dp"
android:textStyle="bold" >
</TextView>
<ImageView
android:id="@+id/imageView1"
android:layout_width="350dp"
android:layout_height="350dp"
android:scaleType="fitXY"
android:src="@drawable/image1" />
</LinearLayout>
<!-- Layout 2 for 2nd Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:text="This Is Screen 2"
android:textColor="#191975"
android:textSize="25dp"
android:textStyle="bold" >
</TextView>
<ImageView
android:id="@+id/imageView3"
android:layout_width="350dp"
android:layout_height="350dp"
android:scaleType="fitXY"
android:src="@drawable/image2" />
</LinearLayout>
<!-- Layout 3 for 1st Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:text="This Is Screen 3"
android:textColor="#191975"
android:textSize="25dp"
android:textStyle="bold" >
</TextView>
<ImageView
android:id="@+id/imageView3"
android:layout_width="350dp"
android:layout_height="350dp"
android:scaleType="fitXY"
android:src="@drawable/image3" />
</LinearLayout>
<!-- Layout 4 for 1st Screen -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:text="This Is Screen 4"
android:textColor="#191975"
android:textSize="25dp"
android:textStyle="bold" >
</TextView>
<ImageView
android:id="@+id/imageView3"
android:layout_width="350dp"
android:layout_height="350dp"
android:scaleType="fitXY"
android:src="@drawable/image4" />
</LinearLayout>
</ViewFlipper>
</LinearLayout>MainActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ViewFlipper;
public class MainActivity extends Activity {
private ViewFlipper viewFlipper;
private float lastX;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewFlipper = (ViewFlipper) findViewById(R.id.view_flipper);
}
public boolean onTouchEvent(MotionEvent touchevent) {
switch (touchevent.getAction()) {
case MotionEvent.ACTION_DOWN: {
lastX = touchevent.getX();
break;
}
case MotionEvent.ACTION_UP: {
float currentX = touchevent.getX();
if (lastX < currentX) {
if (viewFlipper.getDisplayedChild() == 0)
break;
viewFlipper.setInAnimation(this, R.anim.in_from_left);
viewFlipper.setOutAnimation(this, R.anim.out_to_right);
// Show The Previous Screen
viewFlipper.showPrevious();
}
// if right to left swipe on screen
if (lastX > currentX) {
if (viewFlipper.getDisplayedChild() == 3)
break;
viewFlipper.setInAnimation(this, R.anim.in_from_right);
viewFlipper.setOutAnimation(this, R.anim.out_to_left);
// Show the next Screen
viewFlipper.showNext();
}
break;
}
}
return false;
}
}
Comments
Post a Comment