Android Layout Animations from bottom to top and top to bottom on ImageView click

Question

I have created a view in Android and I need to animate it from bottom to top and vice-versa. when I clicked on ImageView I need to animate the complete RelativeLayout from bottom to top and it is succeeded. But when I click again on ImageView and it is not moving down. Also, when I click on its original place, when I click the original position of the ImageView animation runs but the RelativeLayout moves down from the original position not a top to bottom.

This is my code:

ImageView iv_header;  RelativeLayout rl_footer;  boolean isBottom = true;  @Override protected void onCreate(Bundle savedInstanceState) {     // TODO Auto-generated method stub     super.onCreate(savedInstanceState);     setContentView(R.layout.rateus_layout);     rl_footer = (RelativeLayout) findViewById(R.id.rl_footer);     iv_header = (ImageView) findViewById(R.id.iv_up_arrow);      iv_header.setOnClickListener(new OnClickListener() {          @Override         public void onClick(View v) {             // TODO Auto-generated method stub             if (isBottom) {                 FooterAnimation();                 isBottom = false;             } else {                 headerAnimation();                 isBottom = true;             }          }     }); }  public void FooterAnimation() {     Animation hide = AnimationUtils.loadAnimation(this, R.anim.move);     rl_footer.startAnimation(hide); }  public void headerAnimation() {     Animation hide = AnimationUtils.loadAnimation(this, R.anim.footer);     rl_footer.startAnimation(hide); } 

The animation file from bottom to top(Complete Relative Layout is moved from bottom to Top):

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

The animation file from Top to bottom(i want again Relative Layout is moved from Top to Bottom):

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

The Xml File:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rl_main" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/autograph_bg" >  <RelativeLayout     android:id="@+id/rl_footer"     android:layout_width="fill_parent"     android:layout_height="70dp"     android:layout_alignParentBottom="true"     android:background="@drawable/down_manu_bar1" >      <ImageView         android:id="@+id/iv_new_file"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignParentLeft="true"         android:layout_centerVertical="true"         android:layout_marginLeft="18dp"         android:onClick="onNewFileClick"         android:src="@drawable/file_icon" />      <TextView         android:id="@+id/tv_new_file"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/iv_new_file"         android:layout_below="@+id/iv_new_file"         android:text="New"         android:textColor="#ffffff" />      <ImageView         android:id="@+id/iv_insert"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignTop="@+id/iv_new_file"         android:layout_marginLeft="30dp"         android:layout_toRightOf="@+id/iv_new_file"         android:src="@drawable/insert_icon" />      <TextView         android:id="@+id/tv_insert"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/iv_insert"         android:layout_below="@+id/iv_insert"         android:text="Insert"         android:textColor="#ffffff" />      <ImageView         android:id="@+id/iv_up_arrow"         android:layout_width="45dp"         android:layout_height="45dp"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:paddingBottom="10dp"         android:src="@drawable/up_arrow" />      <ImageView         android:id="@+id/iv_down_arrow"         android:layout_width="45dp"         android:layout_height="45dp"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:background="@drawable/down_arrow"         android:paddingBottom="10dp"         android:visibility="gone" />      <ImageView         android:id="@+id/iv_save"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignTop="@+id/iv_insert"         android:layout_marginLeft="30dp"         android:layout_toRightOf="@+id/iv_up_arrow"         android:src="@drawable/save" />      <TextView         android:id="@+id/tv_save"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/iv_save"         android:layout_alignParentBottom="true"         android:text="Save"         android:textColor="#ffffff" />      <ImageView         android:id="@+id/iv_settings"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignTop="@+id/iv_save"         android:layout_marginLeft="27dp"         android:layout_toRightOf="@+id/tv_save"         android:paddingTop="2dp"         android:src="@drawable/icon_settings" />      <TextView         android:id="@+id/tv_settings"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_marginLeft="260dp"         android:text="Settings"         android:textColor="#ffffff" />   </RelativeLayout>  </RelativeLayout> 

Answer 1

Try this :

Create anim folder inside your res folder and copy this four files :

slide_in_bottom.xml :

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

slide_out_bottom.xml :

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta="0"  android:duration="@android:integer/config_longAnimTime" />  

slide_in_top.xml :

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

slide_out_top.xml :

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

When you click on image view call:

overridePendingTransition(R.anim.slide_in_bottom, R.anim.slide_out_bottom); 

When you click on original place call:

overridePendingTransition(R.anim.slide_in_top, R.anim.slide_out_top); 

Main Activity :

package com.example.animationtest;  import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;  public class MainActivity extends Activity {  Button btn1;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     btn1 = (Button) findViewById(R.id.btn1);       btn1.setOnClickListener(new OnClickListener() {          @Override         public void onClick(View v) {             startActivity(new Intent(MainActivity.this, test.class));          }     });   }     } 

activity_main.xml :

<LinearLayout 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" >  <Button     android:id="@+id/btn1"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="Button1" />   </LinearLayout> 

test.java :

package com.example.animationtest;  import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button;  public class test extends Activity {  Button btn1;  @Override protected void onCreate(Bundle savedInstanceState) {     // TODO Auto-generated method stub     super.onCreate(savedInstanceState);     setContentView(R.layout.test);     btn1 = (Button) findViewById(R.id.btn1);      overridePendingTransition(R.anim.slide_in_left, R.anim.slide_out_left);      btn1.setOnClickListener(new OnClickListener() {          @Override         public void onClick(View v) {          finish();             overridePendingTransition(R.anim.slide_in_right,                     R.anim.slide_out_right);             startActivity(new Intent(test.this, MainActivity.class));           }     }); }      } 

test.xml :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >  <Button     android:id="@+id/btn1"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="Button1" />   </LinearLayout> 

Hope this helps.

Answer 2

I have solved my issue and now my animation works fine :) if anyone needed just copy my code and xml file and have a happy coding :)

My Activity MainActivity:

import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; import android.widget.RelativeLayout;  public class MainActivity extends Activity {  RelativeLayout rl_footer; ImageView iv_header; boolean isBottom = true; Button btn1;  @Override protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     rl_footer = (RelativeLayout) findViewById(R.id.rl_footer);     iv_header = (ImageView) findViewById(R.id.iv_up_arrow);     iv_header.setOnClickListener(new OnClickListener() {          @Override         public void onClick(View v) {             // TODO Auto-generated method stub             iv_header.setImageResource(R.drawable.down_arrow);             iv_header.setPadding(0, 10, 0, 0);              rl_footer.setBackgroundResource(R.drawable.up_manu_bar);             if (isBottom) {                 SlideToAbove();                 isBottom = false;             } else {                 iv_header.setImageResource(R.drawable.up_arrow);                 iv_header.setPadding(0, 0, 0, 10);                 rl_footer.setBackgroundResource(R.drawable.down_manu_bar1);                 SlideToDown();                 isBottom = true;             }          }     });  }  public void SlideToAbove() {     Animation slide = null;     slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,             Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,             0.0f, Animation.RELATIVE_TO_SELF, -5.0f);      slide.setDuration(400);     slide.setFillAfter(true);     slide.setFillEnabled(true);     rl_footer.startAnimation(slide);      slide.setAnimationListener(new AnimationListener() {          @Override         public void onAnimationStart(Animation animation) {          }          @Override         public void onAnimationRepeat(Animation animation) {         }          @Override         public void onAnimationEnd(Animation animation) {              rl_footer.clearAnimation();              RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(                     rl_footer.getWidth(), rl_footer.getHeight());             // lp.setMargins(0, 0, 0, 0);             lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);             rl_footer.setLayoutParams(lp);          }      });  }  public void SlideToDown() {     Animation slide = null;     slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0.0f,             Animation.RELATIVE_TO_SELF, 0.0f, Animation.RELATIVE_TO_SELF,             0.0f, Animation.RELATIVE_TO_SELF, 5.2f);      slide.setDuration(400);     slide.setFillAfter(true);     slide.setFillEnabled(true);     rl_footer.startAnimation(slide);      slide.setAnimationListener(new AnimationListener() {          @Override         public void onAnimationStart(Animation animation) {          }          @Override         public void onAnimationRepeat(Animation animation) {         }          @Override         public void onAnimationEnd(Animation animation) {              rl_footer.clearAnimation();              RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(                     rl_footer.getWidth(), rl_footer.getHeight());             lp.setMargins(0, rl_footer.getWidth(), 0, 0);             lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);             rl_footer.setLayoutParams(lp);          }      });  }  @Override public boolean onCreateOptionsMenu(Menu menu) {     // Inflate the menu; this adds items to the action bar if it is present.     getMenuInflater().inflate(R.menu.main, menu);     return true; }   } 

and my Xml activity_main:

 <?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:id="@+id/rl_main"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:background="@drawable/autograph_bg" >   <RelativeLayout     android:id="@+id/rl_footer"     android:layout_width="fill_parent"     android:layout_height="70dp"     android:layout_alignParentBottom="true"     android:background="@drawable/down_manu_bar1" >      <ImageView         android:id="@+id/iv_new_file"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignParentLeft="true"         android:layout_centerVertical="true"         android:layout_marginLeft="18dp"         android:onClick="onNewFileClick"         android:src="@drawable/file_icon" />      <TextView         android:id="@+id/tv_new_file"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/iv_new_file"         android:layout_below="@+id/iv_new_file"         android:text="New"         android:textColor="#ffffff" />      <ImageView         android:id="@+id/iv_insert"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignTop="@+id/iv_new_file"         android:layout_marginLeft="30dp"         android:layout_toRightOf="@+id/iv_new_file"         android:src="@drawable/insert_icon" />      <TextView         android:id="@+id/tv_insert"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/iv_insert"         android:layout_below="@+id/iv_insert"         android:text="Insert"         android:textColor="#ffffff" />      <ImageView         android:id="@+id/iv_up_arrow"         android:layout_width="45dp"         android:layout_height="45dp"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:paddingBottom="10dp"         android:src="@drawable/up_arrow" />      <ImageView         android:id="@+id/iv_down_arrow"         android:layout_width="45dp"         android:layout_height="45dp"         android:layout_centerHorizontal="true"         android:layout_centerVertical="true"         android:background="@drawable/down_arrow"         android:paddingBottom="10dp"         android:visibility="gone" />      <ImageView         android:id="@+id/iv_save"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignTop="@+id/iv_insert"         android:layout_marginLeft="30dp"         android:layout_toRightOf="@+id/iv_up_arrow"         android:src="@drawable/save" />      <TextView         android:id="@+id/tv_save"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignLeft="@+id/iv_save"         android:layout_alignParentBottom="true"         android:text="Save"         android:textColor="#ffffff" />      <ImageView         android:id="@+id/iv_settings"         android:layout_width="25dp"         android:layout_height="25dp"         android:layout_alignTop="@+id/iv_save"         android:layout_marginLeft="27dp"         android:layout_toRightOf="@+id/tv_save"         android:paddingTop="2dp"         android:src="@drawable/icon_settings" />      <TextView         android:id="@+id/tv_settings"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:layout_marginLeft="260dp"         android:text="Settings"         android:textColor="#ffffff" />  </RelativeLayout>   </RelativeLayout> 

just create new android project and copy paste my code and have fun! :) also remember in xml i have image view and his background images replace with yout own images thanks..