Slide In and Slide Out animation for a layout

Question

I have a LinearLayout, I am dynamically adding TextView, ImageView to that LinearLayout, now I have added OnClickListener to these TextViews and ImageViews.

I have an arraylist which has 10 items in it, using a for loop I am getting each value and displaying, since it's quiz app I have next and previous buttons, when I click on that I am displaying items one by one from the arraylist.Now I need slide In and slide Out animation to apply to this Linear Layout.

I have seen this :

Link 1

Link 2

and also I have tried this

slideIn = new TranslateAnimation(
    TranslateAnimation.RELATIVE_TO_PARENT, 1.0f,
    TranslateAnimation.RELATIVE_TO_PARENT, 0.0f,
    TranslateAnimation.RELATIVE_TO_PARENT, 0.0f,
    TranslateAnimation.RELATIVE_TO_PARENT, 0.0f);

slideIn.setDuration(500);
slideOut = new TranslateAnimation(
    TranslateAnimation.RELATIVE_TO_PARENT, 0.0f,
    TranslateAnimation.RELATIVE_TO_PARENT, -1.0f,
    TranslateAnimation.RELATIVE_TO_PARENT, 0.0f,
    TranslateAnimation.RELATIVE_TO_PARENT, 0.0f);

slideOut.setDuration(500);

But not working please help on this.

EDIT:

Problem: I have applied this to the linear layout but what happens is that when i click on next button current question will slide left and a blank screen then it will slide in and display next question, but I want as soon as the current question slides out it should be followed by next question.

Seymour

How you applied this animation to your view? – Carlinecarling

yes buddy i have applied this to the linear layout but what happens is that when i click on next current question will slide left and a blank screen then it will slide in and display next question, but i want as soon as the current question slides out it should be followed by next question – Seymour

What about using a viewflipper and using inanimation and out animation? – Carlinecarling

@PassionateAndroiden i have tried that but since i have 10 or n no of items in the arraylist i cannot use viewflipper – Seymour

How many activities are you using? Just one or more than one? – Scotland

Use only two layouts in flipper and dynamically change contents of the currently invisible layout. When user clicks next, populate invisible layout and load it to front with animation. – Carlinecarling

@PassionateAndroiden if you dont mind ,can you give me any example ... – Seymour

Answer 1

If your layouts are having identical content, create two layouts inside a view flipper. Load first view with data and show it. When user clicks next or previous, load next view with data and keep a flag to show that 2nd view is now visible and show it with animation.

Now onwards load the appropriate views with data based on the flag values and call shownext().

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mainFlipper = (ViewFlipper) findViewById(R.id.flipper);
    firstLayout = (LinearLayout) findViewById(R.id.layout1);
    secondLayout = (LinearLayout) findViewById(R.id.layout2);


    findViewById(R.id.btnPrevious).setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            showPrevious();
        }
    });

    findViewById(R.id.btnNext).setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            showNext();
        }
    });

}

private void showNext() {
    mainFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_in_left));
    mainFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_out_right));
    flip();
}

private void showPrevious() {
    mainFlipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_in_right));
    mainFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.slide_out_left));
    flip();
}

private void flip() {
    if(isFirstVisible) {
        isFirstVisible = false;
        secondLayout.removeAllViews();
        secondLayout.addView(getTextView("Second"));
    } else {
        isFirstVisible = true;
        firstLayout.removeAllViews();
        firstLayout.addView(getTextView("First"));
    }
    mainFlipper.showNext();
}

private TextView getTextView(String txt) {
    TextView txtView = new TextView(this);
    txtView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
    txtView.setText(txt);
    return txtView;
}

Carlinecarling

hey i tried in the way which you have told but now i am not able to remove view which i am dynamically adding, if i use removeallviews() then animation will not work.. – Seymour

yes yes finally after trying i have acheived it with View flipper ... thanks a lot.Now the question is how to increase the speed of animation that is slide in and slide out? – Seymour

speed of animation can be increased by decreasing duration value in animation xml. Do you mean that? – Carlinecarling

Answer 2

Use this xml in res/anim/

leftright.xml
This is for left to right animation:

  <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="700"/>
   </set>

use this in your java code

Handler handler = new Handler();
Runnable runnable = new Runnable(){
{
   public void run()
 {
   item[i].setInAnimation(AnimationUtils.loadAnimation(this,R.anim.leftright.xml));
   i=i+1;
   handler.postDelayed(this,5000);
 }
};handler.postDelayed(runnable,5000);

Jeopardize

how will i apply the animation to a layout ? i cannot apply the animation to single item as it has to first get the values from the arraylist and then display – Seymour

on next click setContentView(R.layout.View2) then do this inside your class Intent iSecondLayout = new Intent(Activity.this,Activity.class); Activity.this.startActivity(iSecondLayout); Activity.this.overridePendingTransition(R.anim.lefttoright, R.anim.righttoleft); – Jeopardize

call that activity again with changing layout on next button click.See the code.I am calling the same class again and again. – Jeopardize

or as one guy said you can use viewflipper. – Jeopardize

i can use view flipper but problem is the item to load from arraylist and also the i dont know how to manage with 2 layouts – Seymour

just send me a screenshot of what you are trying to do and I can see what I can do – Jeopardize