Develop Reference

Translate animation on views with position dependencies

I am running into an issue where I have a header view that I would like to translate in and out of visibility--using translate animation--that is positioned directly above the main content view. To illustrate what I mean, look at the image below. The blue section is the header, and the orange section is the main content.
Example code
TranslateAnimation animation = new TranslateAnimation(0, 0, 0, -rlInfoBar.getHeight());
animation.setFillAfter(true);
animation.setDuration(10000);
animation.setAnimationListener(new TranslateAnimation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
rvItems.startAnimation(animation);
rlInfoBar.startAnimation(animation);
When I translate the blue section, even though the main section is declared "android:layout_below="#+id/" it remains in position. My idea was to then translate them both, however, when doing that the main content is shifted up but the bottom of the screen is also shifted up revealing the background of the parent view. How to solve this issue? Do I have to translate both views plus stretch the main content view or somehow anchor the main content view to the bottom of the screen?
Result of translating both views

Do I have to translate both views plus stretch the main content view or somehow anchor the main content view to the bottom of the screen?
Well, if you don't stretch the main content View then anchoring it to the bottom will cause a gap to appear at the top as soon as the header View moves up. So I think you'll need a set of animations (scale and translate) for it.
Or you use the Transition framework, in this case a ChangeBounds transition will do the job for both Views
View sceneRoot = <someViewGroupContainingBothViews>;
TransitionManager.beginDelayedTransition(sceneRoot, new ChangeBounds());
rlInfoBar.setY(<newY_CoordinateOfHeaderView>);

View animation in android for open and close

I am working on android application in which on button click i am giving width and height to my linear layout to make it full screen and by clicking again i am giving its width and height to 1dp. I just need to animate this thing like when i press the button it will slowly animate to full screen and on again pressing of button it will slowly animate to 1dp width and height. I have used translate for this thing but it didn't work in this scenario.
btnResize.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(resize==true){
otherLayout.setLayoutParams(new LayoutParams(1, 1));
resize=false;
}else{
resize=true;
int height = LayoutParams.WRAP_CONTENT;
int width = LayoutParams.MATCH_PARENT;
// ImageView imageView = (ImageView)findViewById(R.id.imageView);
//
// Animation animZoomin = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.zoom_in);
//
// imageView.startAnimation(animZoomin);
otherLayout.setLayoutParams(new LayoutParams(width, height));
}
}
});

You can use scale animation:
Start by calculating your screen size: Get screen dimensions in
pixels
Next get the current view width and height.
Calculate the ratio between the 2 to get the scale factor (hint: screenH / viewH)
Next use view.animate().scaleX(xRatio).scaleY(yRatio) to start the
animation
You may need to translate the view too if it is not centered in the screen
Other option is to use this method: Expand/collapse animation

Android: Animation of slide up to below of another view.

Is there any idea or how can i achieve this Animation like following picture? because i tried to give a animation on Linearlayout B when i pressed a cancel button, the linearlayout B will slide out from left to right but once LinearLayout B fully Gone, the LinearLayout C directly step to below of LinearLayout A rather than slide slowly to below of LinearLayout A. please help...

Set android:animateLayoutChanges="true" to the linear layout and you will achieve this automatically.

First add a ViewTreeObserver.OnPreDraw listener to the view C:
int bHeight = viewB.getHeight();
viewC.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
public boolean onPreDraw() {
viewC.startAnimation(new TranslateAnimation(0, 0, bHeight, 0));
viewC.getViewTreeObserver().removeOnPreDrawListener(this);
return false;
}
});
Then set the visibility of B to gone.
viewB.setVisibility(View.GONE);
What this does is hides the view B, causing the view C to move up. However before C is drawn in it's new position we animate it from where it used to be to where it is now.

Animate a Fragment so that it is partially offscreen

I would like to partially hide a fragment when a new fragment appears.
I am building on ScienceGuy's code on GitHub, as referenced on Fragment Animation like Gmail Honeycomb App
I start with three fragments. The left most has a weight of 6, the middle one a weight of 4, and the right most a weight of 4. Setting the weightSum to 10 makes the left and middle fragments appear, and the right most is offscreen. This is what I want.
When the user selects an item in the middle fragment, I would then like to transition the left fragment so that two thirds of it moves off the left side of the screen. Because of the weights, I would effectively have 2, 4 , 4. At this point, the right fragment has moved onto the screen completely.
Using ScienceGuy's code, I can get the right fragment to appear when the left fragment scrolls off, but the left fragment completely disappears.
I have tried using the following code:
final float middleFragmentWidth = getMiddleFragment().getView().getWidth();
ObjectAnimator animIn = ObjectAnimator.ofFloat(null, "x",
-middleFragmentWidth/2, 0).setDuration(
trans.getDuration(LayoutTransition.APPEARING));
trans.setAnimator(LayoutTransition.APPEARING, animIn);
ObjectAnimator animOut = ObjectAnimator.ofFloat(null, "x", -middleFragmentWidth,
-middleFragmentWidth/2).setDuration(
trans.getDuration(LayoutTransition.CHANGE_DISAPPEARING));
trans.setAnimator(LayoutTransition.DISAPPEARING, animOut);
I suspect that Android expects that a fragment is completely hidden when one "hides" it. Is there a way to animate fragments so that they are not actually hidden, but partially offscreen?
Alternatively, I could put the three fragments into a HorizontalScrollView, and try animating that. However, I've not done that because the middle and right most fragments contain listviews, and using a listview inside a HorizontalScrollView is to be avoided according to the docs.

I ended up creating a custom view based on LinearLayout which is 150% of the width of the device.
public class AutoSizingLinearLayout extends LinearLayout {
private static final String TAG = AutoSizingLinearLayout.class.getSimpleName();
final int myWidth;
public AutoSizingLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
myWidth = setScaledWidth(context);
}
public AutoSizingLinearLayout(Context context) {
super(context);
myWidth = setScaledWidth(context);
}
private int setScaledWidth(Context context) {
if (this.isInEditMode()){
return 1000;
} else {
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
return (int) (1.5 * wm.getDefaultDisplay().getWidth());
}
}
#Override
public android.view.ViewGroup.LayoutParams getLayoutParams() {
android.view.ViewGroup.LayoutParams params = super.getLayoutParams();
params.width = myWidth;
return params;
}
And then I animate it like this.
ObjectAnimator a = ObjectAnimator.ofFloat(linearView,"translationX", -scrollamount).setDuration(900);
a.start();

Android Layout Animation won't work

I have a LinearLayout (LayoutContentView) which can contain one or two view (SubView1 and SubView2) (they are eitherTextView or ImageView).
This layout is in another LinearLayout (MyScreenLayout).
I want to make an animation on LayoutContentView so it can move and show just a part of it in MyScreenLayout.
Both of these layouts have setClipChildren(false); so it can let it's children draw outside it-self.
Depending on different parameters, I can change the size of the content, and the size of the content I will show.
Basically, I expend from top to bottom to show the two subviews and unexpend for bottom to top to show only the second subview. Before I expend, I increase the size of the LayoutContentView, so it can show the two subviews, and after I unexpend, I decrease the size of the LayoutContentView, so it can only show the second subview, and it let space on the screen for other elements.
Here is my method for expending and un-expending LayoutContentView :
mLayoutContentView.clearAnimation();
float yFrom = 0.0F;
float yTo = 0.0F;
float xFrom = 0.0F;
float xTo = 0.0F;
if (expend) { // if we expend
// I change the height of my LayoutContentView so it we can show it's two subviews
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView1H + subView2H;
setLayoutParams(lp);
invalidate();
// we start the animation so it shows only the second subview
yFrom = -subView1H;
// and we animate from top to bottom until it shows the two subviews
yTo = 0;
} else { // if we un-expend
// we animate from bottom to top starting by showing the two subviews
yFrom = 0;
// and progressively hiding the first subview and showing only the second subview
yTo = -subView1H;
}
Animation anim = new TranslateAnimation(xFrom, xTo, yFrom, yTo);
anim.setDuration(1000);
anim.setFillAfter(true);
anim.setFillEnabled(true);
anim.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
if (!expend) {
// if we un expend at the end of the animation we can set the size of LayoutContentView to the size of the second subview again
final android.view.ViewGroup.LayoutParams lp = mLayoutContentView.getLayoutParams();
lp.height = subView2H;
mLayoutContentView.setLayoutParams(lp);
invalidate();
}
}
});
mLayoutContentView.startAnimation(anim);
The way I made my animation I need it to apply on LayoutContentView, the layout which contain two subview, and with startAnimation() it doesn't do the animation.
I tried to use a LayoutAnimationController, but instead of doing the animation on the LayoutContentView, it does it on each of its children...
I also tried to do the animation on each children myself, but I don't know why, the second subview isn't shown.
Each time I've tried to use HierarchyViewer, but it's does see the change made by the animation.
Does anyone know a solution or have faced the same problem and found a good solution ?
EDIT :
Well it seems that if you set a background color to your TextView and move them with animation, the background move but even if you have set the fill after parameter to your animation, the background moves back to it's original position or something like that, and therefore as I set a background color to both of my SubViews, somewhat one of the SubView's background hide the background of the other...
And there also a problem if after the animation, one of the SubView is still outside the its layout, there is also a problem during the animation, so I add a limitation to what I intended to here too.