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>
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.
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..
create directory in /res/anim and create bottom_to_original.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1500"
android:fromYDelta="100%"
android:toYDelta="1%" />
</set>
JAVA:
LinearLayout ll = findViewById(R.id.ll);
Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.sample_animation);
ll .setAnimation(animation);
Below Kotlin code will help
Bottom to Top or Slide to Up
private fun slideUp() {
isMapInfoShown = true
views!!.layoutMapInfo.visible()
val animate = TranslateAnimation(
0f, // fromXDelta
0f, // toXDelta
views!!.layoutMapInfo.height.toFloat(), // fromYDelta
0f // toYDelta
)
animate.duration = 500
animate.fillAfter = true
views!!.layoutMapInfo.startAnimation(animate)
}
Top to Bottom or Slide to Down
private fun slideDown() {
if (isMapInfoShown) {
isMapInfoShown = false
val animate = TranslateAnimation(
0f, // fromXDelta
0f, // toXDelta
0f, // fromYDelta
views!!.layoutMapInfo.height.toFloat() // toYDelta
)
animate.duration = 500
animate.fillAfter = true
views!!.layoutMapInfo.startAnimation(animate)
views!!.layoutMapInfo.gone()
}
}
Kotlin Extensions for Visible and Gone
fun View.visible() {
this.visibility = View.VISIBLE
}
fun View.gone() {
this.visibility = View.GONE
}
This can be achieved with very less lines of code with the latest apis added in the new Android releases. For example below is the code to slide from bottom to top.
public void slideFromBottomToTop() {
ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationY", 100f, 0f);
animation.setDuration(1000);
animation.start();
}
For other animations reffer this link https://developer.android.com/develop/ui/views/animations/reposition-view
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.