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.

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 — Goofy, Dec 25 '12 at 05:26
What about using a viewflipper and using inanimation and out animation? — Passionate Androiden, Dec 25 '12 at 05:31
@PassionateAndroiden i have tried that but since i have 10 or n no of items in the arraylist i cannot use viewflipper — Goofy, Dec 25 '12 at 05:33
How many activities are you using? Just one or more than one? — Yauraw Gadav, Dec 25 '12 at 05:34
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. — Passionate Androiden, Dec 25 '12 at 05:38
@PassionateAndroiden if you dont mind ,can you give me any example ... — Goofy, Dec 25 '12 at 05:40

score 4 · Answer 1 · answered Dec 25 '12 at 05:24

4

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);

answered Dec 25 '12 at 05:24

mihirjoshi

12,161
7
47
78

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 – Goofy Dec 25 '12 at 05:32
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);` – mihirjoshi Dec 25 '12 at 05:40
call that activity again with changing layout on next button click.See the code.I am calling the same class again and again. – mihirjoshi Dec 25 '12 at 05:42
or as one guy said you can use viewflipper. – mihirjoshi Dec 25 '12 at 05:48
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 – Goofy Dec 25 '12 at 05:50
just send me a screenshot of what you are trying to do and I can see what I can do – mihirjoshi Dec 25 '12 at 06:26

Passionate Androiden · Accepted Answer · 2012-12-25T18:34:11.797

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;
}

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.. — Goofy, Dec 25 '12 at 08:16
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? — Goofy, Dec 26 '12 at 05:30
speed of animation can be increased by decreasing duration value in animation xml. Do you mean that? — Passionate Androiden, Dec 26 '12 at 16:56

Slide In and Slide Out animation for a layout

2 Answers2