I am involved with a slide right to left problem. I created it by "hide" and "visible" layout on button clicked. But now I want an animation so that when I clicked on button, a "right to left" animation will happen and when I click again on button, same layout will be "left to right" animation and work as slide layout.
code
final RelativeLayout rightlayout = (RelativeLayout) findViewById(R.id.relativelayout2);
rightlayout.setVisibility(View.GONE);
Button rightbtn = (Button) findViewById(R.id.righttoleft);
rightbtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
System.out.println("clickecd");
if(keyright == 0) {
//rightlayout.setVisibility(View.VISIBLE);
keyright++;
slideToLeft(rightlayout);
} else
{
//rightlayout.setVisibility(View.GONE);
TranslateAnimation animate = new TranslateAnimation(0,rightlayout.getWidth(),0,0);
animate.setDuration(1000);
animate.setFillAfter(true);
rightlayout.startAnimation(animate);
keyright--;
}
}
});
// To animate view slide out from left to right
public void slideToRight(View view){
TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
// To animate view slide out from right to left
public void slideToLeft(View view){
TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
}
xml:
<RelativeLayout
android:id="#+id/rightsidemenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/frameLayout1"
android:gravity="right"
android:orientation="vertical" >
<Button
android:id="#+id/righttoleft"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/right_switcher_expanded" />
<RelativeLayout
android:id="#+id/relativelayout2"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/righttoleft"
android:background="#EDEEF3"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical"
android:padding="5dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#ffffff"
android:gravity="right"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/titleframe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F4F4F4"
android:orientation="horizontal" >
<TextView
android:id="#+id/firsttitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Job and Qualification"
android:textColor="#56A91E" />
</FrameLayout>
<FrameLayout
android:id="#+id/firstframe1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titleframe"
android:layout_margin="10dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView81"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Highest qualification" />
<TextView
android:id="#+id/higesttxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="highest qualification" />
</FrameLayout>
<FrameLayout
android:id="#+id/thirdff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstframe1"
android:layout_margin="10dp" >
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Occupation" />
<TextView
android:id="#+id/occupationtxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="occupation" />
</FrameLayout>
<FrameLayout
android:id="#+id/thirdfff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/thirdff"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp" >
<TextView
android:id="#+id/textView100"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CTC (Income)" />
<TextView
android:id="#+id/incometxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="income" />
</FrameLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:background="#ffffff"
android:gravity="right"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/titleframe"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#F4F4F4"
android:orientation="horizontal" >
<TextView
android:id="#+id/firsttitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Family Info"
android:textColor="#56A91E" />
</FrameLayout>
<FrameLayout
android:id="#+id/firstframe11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titleframe"
android:layout_margin="10dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView811"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Have children" />
<TextView
android:id="#+id/havechildrntxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="have children" />
</FrameLayout>
<FrameLayout
android:id="#+id/secondfff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/firstframe11"
android:layout_margin="10dp" >
<TextView
android:id="#+id/textView91"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Father Alive" />
<TextView
android:id="#+id/fathrtxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Father Alive" />
</FrameLayout>
<FrameLayout
android:id="#+id/thirdfff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/secondfff"
android:layout_margin="10dp" >
<TextView
android:id="#+id/textView101"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mother Alive" />
<TextView
android:id="#+id/mothertxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Mother alive" />
</FrameLayout>
<FrameLayout
android:id="#+id/thirdffff"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/thirdfff"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp" >
<TextView
android:id="#+id/textView103"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Brother" />
<TextView
android:id="#+id/brothercounttxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Brother" />
</FrameLayout>
<FrameLayout
android:id="#+id/thirdffff3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/thirdffff"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<TextView
android:id="#+id/textView104"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sister" />
<TextView
android:id="#+id/sistercounttxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="Sister" />
</FrameLayout>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
This code may help you.
Animation Left slide:
Create a file under res/anim/anim_left
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
Animation Right slide:
Create a file under res/anim/anim_right
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXDelta="-100%"
android:toXDelta="0%" >
</translate>
Use it in Activity as:
Animation rightSwipe = AnimationUtils.loadAnimation(this, R.anim.anim_right);
<view>.startAnimation(rightSwipe);
public void slidefromRightToLeft(View view) {
TranslateAnimation animate;
if (view.getHeight() == 0) {
main_layout.getHeight(); // parent layout
animate = new TranslateAnimation(main_layout.getWidth()/2,
0, 0, 0);
} else {
animate = new TranslateAnimation(view.getWidth(),0, 0, 0); // View for animation
}
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.VISIBLE); // Change visibility VISIBLE or GONE
}
Solution for those who are looking for right to left animation:
TranslateAnimation animation1 = new TranslateAnimation(0.0f, 0.0f, 1500.0f, 0.0f); // new TranslateAnimation(xFrom,xTo, yFrom,yTo)
animation1.setDuration(1500); // animation duration
animation1.setRepeatCount(4); // animation repeat count if u want to repeat
animation1.setFillAfter(true);
your_view .startAnimation(animation);//your_view for mine is imageView
Solution for those who are looking for repeated animation (for eg. left to right and right to left)
TranslateAnimation animation = new TranslateAnimation(0.0f, 0.0f, 0.0f, 1500.0f); // new TranslateAnimation (float fromXDelta,float toXDelta, float fromYDelta, float toYDelta)
animation.setDuration(1500); // animation duration
animation.setRepeatCount(8); // animation repeat count
animation.setRepeatMode(2); // repeat animation (left to right, right to left)
animation.setFillAfter(true);
your_view.startAnimation(animation);//your_view for mine is imageView
Main layout and back layouts are two linear layouts, when click on button call the startanimation method.
boolean menuOut=false;
public void startAnimation()
{
Animation anim;
int w = mainLayout.getMeasuredWidth();
int h = mainLayout.getMeasuredHeight();
int left = (int) (mainLayout.getMeasuredWidth() * 0.80);
if(!menuOut)
{
anim = new TranslateAnimation(0, -left, 0, 0);
backLayout.setVisibility(View.VISIBLE);
animParams.init(-left, 0, -left + w, h);
}
else
{
anim = new TranslateAnimation(0, left, 0, 0);
animParams.init(0, 0, w, h);
}
anim.setDuration(400);
anim.setAnimationListener(Sample.this);
anim.setFillAfter(true);
mainLayout.startAnimation(anim);
}
AnimParams.java
public class AnimParams {
int left, right, top, bottom;
void init(int left, int top, int right, int bottom) {
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
}
}
You can also use animate().translationXBy([n_pixels]f).
where n_pixels] > 0 moves the object LTR, n_pixels] < 0 moves the object RTL.
Related
Here is my problem. I have 6 LinearLayouts wich are all in centerVertical and centerHorizontal. And now I want them move, when the Activity starts, to all corners and sides, each. ( In each corner should be one Layout and on the left center and on the right center ). I achieve this, for Example, with this TranslateAnimation :
xbox360animation = new TranslateAnimation(0.0f, distanceWidth,
0.0f, 0.0f);
xbox360animation.setDuration(1500);
xbox360animation.setFillAfter(true);
xbox360Layout.startAnimation(xbox360animation);
animationxboxone = new TranslateAnimation(0.0f, -distanceWidth,
0.0f, 0.0f);
animationxboxone.setDuration(1500);
animationxboxone.setFillAfter(true);
xboxOneLayout.startAnimation(animationxboxone);
animationps3 = new TranslateAnimation(0.0f, distanceWidth,
0.0f, -distanceHeight);
animationps3.setDuration(1500);
animationps3.setFillAfter(true);
ps3Layout.startAnimation(animationps3);
animationps4 = new TranslateAnimation(0.0f, -distanceWidth,
0.0f, -distanceHeight);
animationps4.setDuration(1500);
animationps4.setFillAfter(true);
ps4layout.startAnimation(animationps4);
animationwiiu = new TranslateAnimation(0.0f, distanceWidth,
0.0f, distanceHeight);
animationwiiu.setDuration(1500);
animationwiiu.setFillAfter(true);
wiiuLayout.startAnimation(animationwiiu);
animationpc = new TranslateAnimation(0.0f, -distanceWidth, 0.0f, distanceHeight);
animationpc.setDuration(1500);
animationpc.setFillAfter(true);
pcLayout.startAnimation(animationpc);
My XML File:
<RelativeLayout
android:layout_width="match_parent"
android:layout_below="#id/header"
android:layout_above="#id/nextBtn"
android:layout_marginLeft="36dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:layout_marginRight="36dp"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/xboxOneLayout"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/xboxOne"
android:padding="10dp"
android:duplicateParentState="true"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/xbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Xbox One"
android:id="#+id/xboxOnetv"
android:visibility="invisible"
android:duplicateParentState="true"
android:textColor="#fff"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/xbox360Layout"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/xbox360"
android:padding="10dp"
android:duplicateParentState="true"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/xbox"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Xbox 360"
android:id="#+id/xbox360tv"
android:textColor="#fff"
android:duplicateParentState="true"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/ps3Layout"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/ps3"
android:padding="10dp"
android:duplicateParentState="true"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/playstation"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ps3"
android:duplicateParentState="true"
android:id="#+id/ps3tv"
android:textColor="#fff"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/ps4Layout"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/ps4"
android:duplicateParentState="true"
android:padding="10dp"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/playstation"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ps4"
android:duplicateParentState="true"
android:id="#+id/ps4tv"
android:textColor="#fff"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/wiiuLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/wiiu"
android:duplicateParentState="true"
android:padding="10dp"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/wii"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="WiiU"
android:duplicateParentState="true"
android:id="#+id/wiiutv"
android:visibility="invisible"
android:textColor="#fff"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:orientation="vertical"
android:id="#+id/pcLayout"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/pc"
android:duplicateParentState="true"
android:padding="10dp"
android:background="#drawable/icon_background_not_selected"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/desktop"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PC"
android:duplicateParentState="true"
android:textColor="#fff"
android:id="#+id/pctv"
android:visibility="invisible"
android:layout_marginTop="5dp"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</RelativeLayout>
I can't click on them after the animation. When I click on the position where it should be before the Animation, I get the onclick on one of the Layouts.
How can I set the Layouts to the new position, so I recieve the onClick Event from the right Layout?
Here i am showing you example of Gesture Listener in Code i have using image View but you can change it into Linear Layout
public class MainActivity extends Activity {
private ImageView iv;
private Matrix matrix = new Matrix();
private float scale = 1f;
private ScaleGestureDetector SGD;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
iv=(ImageView)findViewById(R.id.imageView);
SGD = new ScaleGestureDetector(this,new ScaleListener());
}
public boolean onTouchEvent(MotionEvent ev) {
SGD.onTouchEvent(ev);
return true;
}
private class ScaleListener extends ScaleGestureDetector.
SimpleOnScaleGestureListener {
#Override
public boolean onScale(ScaleGestureDetector detector) {
scale *= detector.getScaleFactor();
scale = Math.max(0.1f, Math.min(scale, 5.0f));
matrix.setScale(scale, scale);
iv.setImageMatrix(matrix);
return true;
}
}
}
TranslateAnimation only moves the pixels on the screen, and does not really move your LinearLayouts, it only makes it look like it is moving, so an OnClickListener will not animate with it. You still should be able to click at the old position before the animation.
Try ObjectAnimator or ViewPropertyAnimator.
Example with ViewPropertyAnimator for your xbox 360 layout:
xbox360Layout.animate().translationX(distanceWidth).setDuration(1500);
Now your layout really moves on the screen and your OnClick should work on the new position.
I'm trying to make an ImageButton slide up and out and then have another set of buttons slide in it's place, my problem is that the second buttons don't "slide" in the first time, only from the second and onward. I tried setting the button containers Visibility to invisible instead of gone, but it had no effect of the animation and just split the buttons to the top and bottom of the parent view.
xml
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="#+id/user_email_show"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:onClick="showEmail"
app:srcCompat="#drawable/logo_email" />+
<LinearLayout
android:id="#+id/user_email_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<ImageButton
android:id="#+id/user_email_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFF"
android:onClick="addEmail"
android:visibility="gone"
app:srcCompat="#drawable/ic_add" />
<TextView
android:id="#+id/user_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout
android:id="#+id/user_email_input"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
<ImageButton
android:id="#+id/user_email_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFF"
android:onClick="editEmail"
app:srcCompat="#drawable/ic_edit" />
<ImageButton
android:id="#+id/user_email_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#FFF"
android:tint="#a7a7a7"
app:srcCompat="#drawable/ic_delete" />
</LinearLayout>
<ImageButton
android:id="#+id/user_email_hide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFF"
android:onClick="hideEmail"
android:tint="#a7a7a7"
android:padding="15dp"
android:visibility="gone"
app:srcCompat="#drawable/ic_cancel" />
</LinearLayout>
</LinearLayout>
Show animation method
public void showEmail(View view) {
findViewById(R.id.user_email_hide).setVisibility(View.VISIBLE);
if (emailCheck == true) {
emailTextView.setVisibility(View.VISIBLE);
emailInput.setVisibility(View.VISIBLE);
} else {
addEmail.setVisibility(View.VISIBLE);
}
final Animation slide_up_in = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up_in);
Animation slide_up_out = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up_out);
showEmail.startAnimation(slide_up);
slide_up_out.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
showEmail.setVisibility(View.GONE);
emailContainer.setVisibility(View.VISIBLE);
emailContainer.setAnimation(slide_up_in);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
}
animation file
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="150%"
android:toYDelta="0" />
</set>
I have seen the questions in the stack over flow, even I tried,
Android Translate Animation like Swapping Two Views
But nothing worked for my scenario, I want to swap swap_above linear layout and swap_below linear layouts when click on swap image button. If possible I would like to apply animation for swap imagebutton also, when the views are being swapped.
Thank you,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/from"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/swap_above"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/from_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/from_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/seek_thumb_pressed"
android:drawablePadding="5dp"
android:text="BANGALORE"
android:textSize="20dp" />
<TextView
android:id="#+id/from_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" (BLR)"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="20dp"
android:layout_weight="1"
android:background="#FFF" />
<View
android:layout_width="60dp"
android:layout_height="0dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/to"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/swap_below"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/to_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/to_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/seek_thumb_normal"
android:drawablePadding="5dp"
android:text="Hyderabad"
android:textSize="20dp" />
<TextView
android:id="#+id/to_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" (HYD)"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/swap"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical|end"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/seek_thumb_disabled" />
</FrameLayout>
</LinearLayout>
First - set the below xml attributes for each target view's parent which may be blocking the animation :
android:clipChildren="false"
android:clipToPadding="false"
You need to set this attributes at 3 places in your case.
Read more about clipChildren & clipToPadding here -
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipChildren
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipToPadding
If your minSDK >=12
Use this for swap animation :
findViewById(R.id.swap).setOnClickListener(new View.OnClickListener() {
boolean isAnimating;
#Override
public void onClick(View v) {
if(isAnimating)
return;
isAnimating=true;
View v1 = findViewById(R.id.swap_above);
View v2 = findViewById(R.id.swap_below);
float x1, y1, x2, y2;
x1 = getRelativeX(v1);//Use v1.getX() if v1 & v2 have same parent
y1 = getRelativeY(v1);//Use v1.getY() if v1 & v2 have same parent
x2 = getRelativeX(v2);//Use v2.getX() if v1 & v2 have same parent
y2 = getRelativeY(v2);//Use v2.getY() if v1 & v2 have same parent
float x_displacement = (x2-x1);
float y_displacement = (y2-y1);
v1.animate().xBy(x_displacement).yBy(y_displacement);
v2.animate().xBy(-x_displacement).yBy(-y_displacement);
long anim_duration = v1.animate().getDuration();
//Wait till animation is over to set isAnimating to false
//take 10 ms as buffer time to ensure proper functioning
//If you remove this timer & isAnimating variable, the animation will function improperly when user rapidly clicks on swap button
new CountDownTimer(anim_duration + 10, anim_duration + 10) {
#Override
public void onTick(long millisUntilFinished) {
}
#Override
public void onFinish() {
isAnimating=false;
}
}.start();
}
//returns x-pos relative to root layout
private float getRelativeX(View myView) {
if (myView.getParent() == myView.getRootView())
return myView.getX();
else
return myView.getX() + getRelativeX((View) myView.getParent());
}
//returns y-pos relative to root layout
private float getRelativeY(View myView) {
if (myView.getParent() == myView.getRootView())
return myView.getY();
else
return myView.getY() + getRelativeY((View) myView.getParent());
}
});
Read about View Property animator here -
http://developer.android.com/reference/android/view/ViewPropertyAnimator.html
http://developer.android.com/guide/topics/graphics/prop-animation.html
Also, you should try to minimize the number of views in your layout.
Read about layout optimization here -
http://developer.android.com/training/improving-layouts/optimizing-layout.html
in my application i have RelativeLayout with any widgets,into layout and i want to move up that by xml animate. RelativeLayout visibility is GONE and that must be set visibilty to GONE again and move that to up.
my problem is this, after set again visibilty to GONE move animate dont work and after change visibilty to VISIBLE, RelativeLayout can be show but only thats childeren move up, i want to RelativeLayout with all chileds move to top. how to resolve this problem?
XML animation:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="70%p"
android:toYDelta="0%p"
android:duration="800" />
</set>
animate code:
animMoveUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.animation_move_up);
uiFiller.toolbarLinearlayoutIcons.setVisibility(View.VISIBLE);
uiFiller.toolbarLinearlayoutIcons.startAnimation(animMoveUp);
my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffe67f24"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/main_tsms_actionbar_background" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="38dp"
android:layout_height="38dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="right"
android:orientation="vertical" >
<TextView
android:id="#+id/txtSmsReceiveSlaveMobile"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/txtSmsReceiveSlaveContactName"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#f6f6f6"
android:textSize="#dimen/normal_text_size" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff"
android:minHeight="150dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ListView
android:id="#+id/lvSmsReceiveSlaveList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:divider="#null"
android:listSelector="#android:color/transparent"
android:stackFromBottom="true"
tools:listitem="#layout/activity_sms_receive_slave_item" >
</ListView>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#drawable/gradient_divider" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="50dp" >
<TextView
android:id="#+id/sms_counter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_alignParentTop="false"
android:gravity="left"
android:paddingLeft="3dp"
android:paddingTop="3dp"
android:textColor="#ff787878"
android:textSize="9sp" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<ImageButton
android:id="#+id/imgbtn_send_sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="8dp"
android:background="#drawable/icon_send_sms" />
<EditText
android:id="#+id/smsBody"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="right|center_vertical"
android:layout_weight="1"
android:background="#ffffff"
android:ems="10"
android:gravity="right|top"
android:hint="#string/hint_enter_text"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:textColor="#000000"
android:textSize="#dimen/small_text_size"
android:windowSoftInputMode="adjustResize" >
<requestFocus />
</EditText>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/toolbarLinearlayoutIcons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:animateLayoutChanges="true"
android:visibility="gone" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="48dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imgbtn_copy_to_clipboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:background="#drawable/icon_copy_to_clipboard" />
<TextView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="#+id/imgbtn_delete_sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/icon_delete_sms" />
<TextView
android:id="#+id/TextView02"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="#+id/imgbtn_share_sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/icon_share_sms" />
<TextView
android:id="#+id/TextView03"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1" />
<ImageButton
android:id="#+id/imgbtn_forward_sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:background="#drawable/icon_forward_sms" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
in this layout i want to move toolbarLinearlayoutIcons id
You can do with 1 line in xml just put this on parent layout
android:animateLayoutChanges="true"
Use below methods to expand and collapse the desired view :
public void expand(final View v) {
v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
final int targtetHeight = v.getMeasuredHeight();
if (v.isShown()) {
collapse(v);
} else {
v.getLayoutParams().height = 0;
v.setVisibility(View.VISIBLE);
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1 ? LayoutParams.WRAP_CONTENT
: (int) (targtetHeight * interpolatedTime);
v.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration((int) (targtetHeight + 500));
v.startAnimation(a);
}
}
public void collapse(final View v) {
final int initialHeight = v.getMeasuredHeight();
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime,
Transformation t) {
if (interpolatedTime == 1) {
v.setVisibility(View.GONE);
} else {
v.getLayoutParams().height = initialHeight
- (int) (initialHeight * interpolatedTime);
v.requestLayout();
}
}
#Override
public boolean willChangeBounds() {
return true;
}
};
a.setDuration((int) (v.getLayoutParams().height + 500));
v.startAnimation(a);
}
I want a relative layout to slide into a screen.
At the moment I set the layout to be below a layout that takes up the whole screen
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:animateLayoutChanges="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ghostIv"
android:src="#drawable/results_ghost"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/ghostShadowIv"
android:visibility="gone"
android:src="#drawable/results_ghost_shadow"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ghostIv"/>
<TextView
android:id="#+id/noFilterTv"
android:textStyle="bold"
android:gravity="center_horizontal"
android:textColor="#color/LightTextGrey"
android:visibility="gone"
android:text="#string/no_filters"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/ghostShadowIv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<com.allryder.android.ui.views.ScheduleView
android:visibility="invisible"
android:background="#color/White"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scheduleView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"/>
<View
android:id="#+id/shadowV"
android:visibility="gone"
android:layout_above="#+id/ratingRl"
android:layout_height="4dp"
android:layout_width="match_parent"
android:background="#drawable/bottom_shadow"/>
<RelativeLayout
android:id="#+id/ratingRl"
android:layout_below="#+id/scheduleView"
android:background="#color/White"
android:clickable="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:background="#drawable/time_view_selector"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/ratePromptTv"
android:layout_toLeftOf="#+id/closeRatingIv"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center|left"
android:text="#string/rate_prompt"/>
<ImageView
android:background="#drawable/time_view_selector"
android:padding="10dp"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/ratePromptTv"
android:layout_alignBottom="#+id/ratePromptTv"
android:id="#+id/closeRatingIv"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/search_clear"/>
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
<fragment android:id="#+id/filters_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:name="com.allryder.android.ui.fragments.FiltersDrawerFragment"/>
Then make this call
ratingRl.animate().translationY(- ratingRl.getHeight());
But it doesn't slide into the screen. If the view is in the screen to start off with, the view does animate. What is the problem?
ratingRl.animate().translationY(- ratingRl.getHeight()).setDuration(300).start();
I have done similar task in my recent project.
background = (RelativeLayout) findViewById(R.id.slidingBackground);
positionOffScreen(background);
private void positionOffScreen(View v){
View myView = v;
int amountOffscreen = (int)(getScreenWidth());
boolean offscreen = true;
int xOffset = (offscreen) ? amountOffscreen : 0;
RelativeLayout.LayoutParams rlParams = (RelativeLayout.LayoutParams)myView.getLayoutParams();
rlParams.setMargins(-1*xOffset, 0, xOffset, 0);
myView.setLayoutParams(rlParams);
}
protected float getScreenWidth() {
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
return (float) displaymetrics.widthPixels;
}
When you want to start animation call this method
private void startAnimation(int duration){
TranslateAnimation a = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,getScreenWidth(),Animation.ABSOLUTE,0,Animation.ABSOLUTE,0);
a.setDuration(duration);
a.setFillAfter(false);
background.startAnimation(a);
}
When you want to interrupt animation
background.clearAnimation();
Here is layout example. The sliding view has to be placed on RelativeLayout.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background" >
<RelativeLayout
android:id="#+id/slidingBackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#64000000"
android:orientation="vertical" >
</RelativeLayout>
...
And this is the app link where I use this sliding view.