Page Flipping on Android

Question

I must create an animation when the view flipper is called. I have been looking for a way to create an animation that works with TextView but most of them are presented as images from drawable folder or converted to image.

Can someone give me tips to create a page flip animation on a textview similar to animation class?

    public static Animation inFromRightAnimation() {

        Animation inFromRight = new TranslateAnimation(
        Animation.RELATIVE_TO_PARENT,  +1.0f, Animation.RELATIVE_TO_PARENT,  0.0f,
        Animation.RELATIVE_TO_PARENT,  0.0f, Animation.RELATIVE_TO_PARENT,   0.0f
        );
        inFromRight.setDuration(350);
        inFromRight.setInterpolator(new AccelerateInterpolator());
        return inFromRight;
        }

Calling the ViewFlipper as vf

            vf.setInAnimation(AnimationHelper.inFromRightAnimation());
            vf.setOutAnimation(AnimationHelper.outToLeftAnimation());

Answer 1

I use a separate java file that handles the animation like this

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Paint.Style;
import android.util.AttributeSet;
import android.widget.LinearLayout;

 public class TransparentPanel extends LinearLayout 
{ 
private Paint   innerPaint, borderPaint ;

public TransparentPanel(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public TransparentPanel(Context context) {
    super(context);
    init();
}

private void init() {
    innerPaint = new Paint();
    innerPaint.setARGB(225, 75, 75, 75); //gray
    innerPaint.setAntiAlias(true);

    borderPaint = new Paint();
    borderPaint.setARGB(255, 255, 255, 255);
    borderPaint.setAntiAlias(true);
    borderPaint.setStyle(Style.STROKE);
    borderPaint.setStrokeWidth(2);
}

public void setInnerPaint(Paint innerPaint) {
    this.innerPaint = innerPaint;
}

public void setBorderPaint(Paint borderPaint) {
    this.borderPaint = borderPaint;
}

@Override
protected void dispatchDraw(Canvas canvas) {

    RectF drawRect = new RectF();
    drawRect.set(0,0, getMeasuredWidth(), getMeasuredHeight());

    canvas.drawRoundRect(drawRect, 5, 5, innerPaint);
    canvas.drawRoundRect(drawRect, 5, 5, borderPaint);

    super.dispatchDraw(canvas);
}
}

then in your res folder add another one called anim and include this files

popup_hide.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0" android:toYDelta="100%p" android:duration="750"/>
</set>

popup_show.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%p" android:toYDelta="0" android:duration="750"/>
</set>

after this is done you add it to your main.xml or the one you are going to use the animation on like this:

<com.your.app.name.TransparentPanel
        android:id="@+id/popup_view" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="left"
        android:background="@android:color/transparent">
        <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/popup_textview""/>
        <TextView android:id="@+id/textView" 
        android:layout_width="wrap_content" 
        android:text="Periodicos:" 
        android:layout_height="wrap_content" 
        android:textAppearance="?android:attr/textAppearanceMedium"> </TextView>
        <Button android:id="@+id/hide_text_button"
                style="?android:attr/buttonStyleSmall"
                android:textStyle="bold"
                android:text="Close" 
                android:background="@drawable/button"/>
                </LinearLayout>
</com.your.app.name.TransparentPanel>

and in your main activity.java you call the animation using:

before onCreate

private Animation animShow, animHide;

after onCreate

final TransparentPanel g = (TransparentPanel) findViewById(R.id.popup_view);    
animShow = AnimationUtils.loadAnimation( this, R.anim.popup_show);
animHide = AnimationUtils.loadAnimation( this, R.anim.popup_hide);

g.startAnimation( animHide ); //to hide
g.setVisibility(View.GONE);

g.startAnimation( animShow );// to show
g.setVisibility(View.VISIBLE);

long but it works, enjoy.