I created simple app with some animations in android. In my layout I have an ImageView with a sourceImage and a button on it. When I click the button, I want it move and resize in same time.
I used ObjectAnimator and ValueAnimator for create animations and play them together with animatorSet. My problem is that my button not move smoothly.
I checked several animation library like Transitions Everywhere and APIDemos. In these libraries when I set ImageBackground the view can't move smoothly
and all of them have my problem.
Can anyone help me to solve this problem?
my layout code:
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageview"
android:fitsSystemWindows="true"
android:src="#drawable/image"
android:scaleType="fitXY" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame">
<Button
android:layout_width="100dp"
android:layout_height="45dp"
android:id="#+id/btn_start"
android:layout_gravity="center_horizontal|bottom"
android:gravity="center_vertical|center_horizontal"
android:textAllCaps="false"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Start" />
// ....................
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
my animations code:
btn_start.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ButtonAnimation();
}
});
private void ButtonAnimation() {
Animator moveButtonAnimY = ObjectAnimator.ofFloat(btn_start, "translationY", 0, 200)
.setDuration(500);
final ValueAnimator valueAnimator = ValueAnimator.ofFloat(width_btn_start, width_btn_start * 2.0f);
valueAnimator.setDuration(500);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = (Integer) animation.getAnimatedValue();
btn_start.getLayoutParams().width = value.intValue();
btn_start.requestLayout();
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(moveButtonAnimY, valueAnimator);
animatorSet.start();
}
According to Wikipedia:
Animation is the process of making the illusion of motion and change by means of the rapid display of a sequence of static images that minimally differ from each other.
Therefore, animation is a pretty heavy task for the device to process, and the smoothness as you referred, depends upon the device configuration.
So, First check if the device have enough power to carry out that animation smoothly.
Secondly, Your code initializes animation every time the button is clicked, Instead you should initialize animation once, and use the instances of them every time you need to start the animation.
A better version of your code would be :
btn_start.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ButtonAnimation();
}
});
Animator moveButtonAnimY = ObjectAnimator.ofFloat(btn_start,"translationY", 0, 200).setDuration(500);
ValueAnimator valueAnimator = ValueAnimator.ofFloat(width_btn_start, width_btn_start * 2.0f);
valueAnimator.setDuration(500);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Integer value = (Integer) animation.getAnimatedValue();
btn_start.getLayoutParams().width = value.intValue();
btn_start.requestLayout();
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(moveButtonAnimY, valueAnimator);
private void ButtonAnimation() {
animatorSet.start();
}
Related
I have a view that looks like this:
https://i.stack.imgur.com/zKe01.png
When clicked, I want to animate the grey background color so that it slides from the right side to 50% of its initial width:
https://i.stack.imgur.com/s96BX.png
Here is the relevant portion of the layout xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/content_view"
android:layout_width="match_parent"
android:layout_height="44dp"
android:layout_marginBottom="4dp">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="1.0"/>
<View
android:id="#+id/background"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="#+id/guideline"
android:background="#drawable/background" />
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried the following:
contentView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(contentView);
constraintSet.setGuidelinePercent(guideline.getId(), 0.5f);
TransitionManager.beginDelayedTransition(contentView);
constraintSet.applyTo(contentView);
}
});
But instead of the background color sliding from the right to the left (100% to 50%), it sort of just cross-fades.
What am I doing wrong? How would I change my code so the animation SLIDES the background color when the guideline percent changes?
You can use android.animation.ValueAnimator to change the percentage value of your guideline inside your constraintLayout, the code would be like this:
contentView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// initialize your guideline
// Guideline guideline = findViewById ....
ValueAnimator valueAnimator = ValueAnimator.ofFloat(1.0f, 0.5f);
// set duration
valueAnimator.setDuration(1000);
// set interpolator and updateListener to get the animated value
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
// update guideline percent value through LayoutParams
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
ConstraintLayout.LayoutParams lp = (ConstraintLayout.LayoutParams) guideline.getLayoutParams();
// get the float value
lp.guidePercent = (Float) animation.getAnimatedValue();
// update layout params
guideline.setLayoutParams(lp);
}
});
valueAnimator.start();
}
});
I want to animate an ImageView in such a way that it starts moving from its initial position to a button (move ImageView upside) and again back to its initial position and this repeats infinitely. I am totally new to animating things so please guide me how to do it?
my layout.xml is as follows:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragment.Scratch1Fragment">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btn_scratch_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/buttonStyle"
android:text="#string/str_scratch_now"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.2"/>
<View
android:id="#+id/upper_bound"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/primary"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.5"/>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/str_scratch"
style="#style/tvDarkLargeStyle"
android:gravity="center"
android:textAlignment="center"
app:layout_constraintTop_toBottomOf="#+id/upper_bound"
/>
<View
android:id="#+id/lower_bound"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/primary"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text_view"
/>
<TextView
android:id="#+id/tv_tap_here"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/lower_bound"
android:layout_margin="20dp"
android:padding="10dp"
android:gravity="center"
style="#style/tvLightLargeStyle"
android:textAlignment="center"
android:text="Tap here"/>
<ImageView
android:id="#+id/img_hand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/clicker_hand_64"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/upper_bound"/>
</android.support.constraint.ConstraintLayout>
</FrameLayout>
Please feel free to ask for more code or more details if my question sounds unclear.
Update
After getting some resources to begin with I tried it and I found below code. but somehow I can not get the position of button's float (It is always returning 0.)
My code is as below:
private void animate() {
Log.e("button top", String.valueOf(btnScratch.getTop()));
int location[] = new int[2];
btnScratch.getLocationOnScreen(location);
Log.e("button location x and y",location[0]+" "+location[1]);
int location2[] = new int[2];
imgHand.getLocationOnScreen(location2);
Log.e("image location x and y",location2[0]+" "+location2[1]);
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, btnScratch.getTop());
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); // increase the speed first and then decrease
valueAnimator.setDuration(1000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float progress = (float) animation.getAnimatedValue();
imgHand.setTranslationY(progress);
// no need to use invalidate() as it is already present in //the text view.
}
});
valueAnimator.start();
}
I have also tried same with ObjectAnimatior instead of ValueAnimator. But did not work.
Finally, I found my answer with the help of all the comments and links provided in that. I don't know whether it is the ideal solution or not but it is working. If anyone has a better solution please provide that.
What I did for getting the position of the button (which was 0 before the solution).
btnScratch.post(new Runnable() {
#Override
public void run() {
float center = (btnScratch.getTop() + btnScratch.getBottom()) / 2;
Log.e("center point", String.valueOf(center));
animateUpToButton(center - imgHand.getTop());
}
});
for getting center of the button I used following line:
float center = (btnScratch.getTop() + btnScratch.getBottom()) / 2;
and for animation :
private void animateUpToButton(final float distance) {
ObjectAnimator imageAnimator = ObjectAnimator.ofFloat(imgHand, "translationY", 0f, distance);
imageAnimator.setDuration(ANIM_DURATION);
imageAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
imageAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {
}
#Override
public void onAnimationEnd(Animator animator) {
animateBackToOrigin(distance);
}
#Override
public void onAnimationCancel(Animator animator) {
}
#Override
public void onAnimationRepeat(Animator animator) {
}
});
imageAnimator.start();
}
And, onAnimationEnd(), I added another animation to get the image back to the initial position.
private void animateBackToOrigin(final float distance) {
ObjectAnimator imageAnimator = ObjectAnimator.ofFloat(imgHand, "translationY", distance, 0f);
imageAnimator.setDuration(ANIM_DURATION);
imageAnimator.setInterpolator(new LinearInterpolator());
imageAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {
}
#Override
public void onAnimationEnd(Animator animator) {
animateUpToButton(distance);
}
#Override
public void onAnimationCancel(Animator animator) {
}
#Override
public void onAnimationRepeat(Animator animator) {
}
});
imageAnimator.start();
}
and again onAnimationEnd(), I added animation to move image towards the button. this way, the animation will continue one after another.
Try This:
ObjectAnimator slideUp = ObjectAnimator.ofFloat(mImageView,"translationY",-btn_scratch_now.getTop());
slideUp.setRepeatMode(ObjectAnimator.RESTART);
slideUp.setRepeatCount(ObjectAnimator.INFINITE);
slideUp.start();
I am creating Countdown app. i finished all codes and its all working pretty fine but i am new to android animation. I need to apply below animation to my app. i tried use slide in/out but it is not working good i also tried few other animation but nothing is same as compared below animation.
once play button pressed a timer starts then once again pressed a pause button comes and a textView under pause icon which we have current countdown time. if again pressed the count start again. I am only looking for animation all other codes i have already done.
i have a ImageButton which shows icon each timer user press play/pause and TextView which shows countdown timer and another TextView which shows current timer when user press pause button.Is there anyway i can implement this animation to app?
So Any help would be appropriated as i am new to android animations. Thanks!
Here is xml:
<FrameLayout
android:layout_width="228dp"
android:layout_height="228dp"
android:layout_marginTop="7dp"
android:layout_marginLeft="7dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:id="#+id/circlea"
android:visibility="visible"
android:background="#drawable/circle">
<ImageButton
android:layout_width="142dp"
android:layout_height="142dp"
android:layout_marginTop="43dp"
android:layout_marginBottom="43dp"
android:layout_marginLeft="43dp"
android:id="#+id/play"
android:background="#000"
android:layout_marginRight="43dp"
android:src="#mipmap/icon"
android:visibility="visible" />
<TextView
android:layout_width="134dp"
android:layout_height="73dp"
android:text=""
android:textColor="#FFFFFF"
android:textSize="55sp"
android:layout_marginTop="78dp"
android:layout_marginStart="48dp"
android:id="#+id/countText"
android:fontFamily="sans-serif-light"
android:background="#000"
android:visibility="invisible" />
<TextView
android:layout_marginTop="180dp"
android:layout_marginLeft="90dp"
android:text=""
android:id="#+id/pusetext"
android:textSize="24sp"
android:textColor="#1EFFFFFF"
android:layout_width="61dp"
android:layout_height="32dp" />
</FrameLayout>
java:
//some code
super.onCreate(savedInstanceState);
play=(ImageButton)findViewById(R.id.play);
pausetext=(TextView) findViewById(R.id.pusetext);
CountText=(TextView)findViewById(R.id.countText);
play.OnClickListener startListener = new View.OnClickListener() {//first public void onClick( View v ){
play.setVisibility(View.INVISIBLE);
CountText.setVisibility(View.VISIBLE);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
CountText.setOnClickListener
public void onClick( View v ){//pause click
play.setVisibility(View.VISIBLE);
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(play.getTop() + play.getHeight()), 0);
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f);
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(slideDownAnimPlayButton,scaleDownAnimTextViewX,scaleDownAnimTextViewY);
animatorSet.start();
}
play.setOnClickListener
public void onClick(View view) {resume click
play.setVisibility(View.INVISIBLE);
CountText.setVisibility(View.VISIBLE);
}
CountText.setOnClickListener(new View.OnClickListener() //pause click agine
#Override
public void onClick(View view) {
//some code
You can use the HTextView library to achieve the first part of the animations(showing the text).
Then, use ObjectAnimators to slide and scale the text down, and to slide the play button down (Use AnimatorSet to play them all together).
Here's a sample code (you should, of course, change the values according to your needs) -
ObjectAnimator slideDownAnimPlayButton = ObjectAnimator.ofFloat(play, "translationY", -(CountText.getTop()), 0);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY",0, (CountText.getTop() ));
ObjectAnimator scaleDownAnimTextViewX = ObjectAnimator.ofFloat(CountText, "scaleX", 1f, 0.5f);
ObjectAnimator scaleDownAnimTextViewY = ObjectAnimator.ofFloat(CountText, "scaleY", 1f, 0.5f);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.setDuration(1000);
animatorSet.playTogether(slideDownAnimPlayButton,slideDownAnimTextView,scaleDownAnimTextViewX,scaleDownAnimTextViewY);
animatorSet.start();
Edit: Seeing your new code now, the problem with the first text animation is that you call it from onCreate(), so the View hasn't been drawn yet, meaning he does not have valid Height or Top parameters.
You can solve it by giving your animation a small delay, or using a ViewTreeObserver. See the following examples -
Starting your animation with a delay -
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
}, 300);
Or, perhaps the better way, use a ViewTreeObserver -
CountText.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
CountText.getViewTreeObserver().removeOnGlobalLayoutListener(this);
ObjectAnimator slideDownAnimTextView = ObjectAnimator.ofFloat(CountText, "translationY", -(CountText.getTop() + CountText.getHeight()), 0);
slideDownAnimTextView.start();
}
});
I have a card view and I want to animate the android:layout_marginTop of it. Here's the xml
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/maps_cardview_id"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginTop="0dp"
android:visibility="visible"
tools:background="#ff0000">
I tried this with the ObjectAnimator
View view = (View)mCardViewContainer;
ObjectAnimator animObj = ObjectAnimator.ofFloat(view, "translationY", 0, -200);
animObj.setDuration(300);
animObj.start();
animObj.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
mCardViewContainer.setVisibility(View.GONE);
}
});
but this is not what I need. It is moving the cardview translation. Is there a way to use the ObjectAnimator to animate just the "android:layout_marginTop"?
any pointers are greatly appreciated.
thx!
I have two views on the screen
one sits at the top of the screen and on sits directly below it
I need the green view to slide out the top - and make the blue view take up the entire screen as a result
this is what i am trying to do:
-- the problem is , when the animation is finished, the blue view just "jumps" up - and i want it to ease up with the disappearing green view, how do i do that?
slide_in_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="-100%"
android:toYDelta="0%" />
</set>
slide_out_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="1000"
android:fromYDelta="0%"
android:toYDelta="-100%" />
</set>
MainActivity.java
slideInAnimation = AnimationUtils.loadAnimation(mActivity, R.anim.slide_in_animation);
slideOutAnimation = AnimationUtils.loadAnimation(mActivity,R.anim.slide_out_animation);
slideInAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
mGreenView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
slideOutAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
mGreenView.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
// To change body of implemented methods use File | Settings
// | File Templates.
}
});
This worked for me
First you must import this library: http://nineoldandroids.com/
The import is done by importing existing android project into your workspace, afterwards right click your Poject -> Properties -> Android. Here you will see a library section, click the Add button and add the nineoldandroids library.
First off, here is the layout xml used for this to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/parentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:divider="#android:color/transparent"
android:fastScrollEnabled="false"
android:listSelector="#android:color/transparent"
android:scrollbars="vertical"
android:smoothScrollbar="true" />
<View
android:id="#+id/greenView"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#ff00ff00"
android:alpha="0"/>
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/animate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickHandler"
android:text="animate" />
<Button
android:id="#+id/close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="clickHandler"
android:text="close" />
</LinearLayout>
Notice: Both the ListView and the green View could be layouts of any types with any kind of content.
And next a proof of concept Activity.
public class TestActivity extends Activity {
private View greenView;
private ListView listView;
private int greenHeight;
private boolean isShowingBox;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
// The animated view
greenView = (View)findViewById(R.id.greenView);
listView = (ListView)findViewById(R.id.listView1);
// Instanciating an array list (you don't need to do this, you already have yours)
ArrayList<String> your_array_list = new ArrayList<String>();
your_array_list.add("1");
your_array_list.add("2");
your_array_list.add("3");
your_array_list.add("4");
your_array_list.add("5");
your_array_list.add("6");
your_array_list.add("7");
your_array_list.add("8");
your_array_list.add("9");
your_array_list.add("10");
your_array_list.add("11");
your_array_list.add("12");
your_array_list.add("13");
your_array_list.add("14");
your_array_list.add("15");
// This is the array adapter, it takes the context of the activity as a first // parameter, the type of list view as a second parameter and your array as a third parameter
ArrayAdapter<String> arrayAdapter =
new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, your_array_list);
listView.setAdapter(arrayAdapter);
final LinearLayout layout = (LinearLayout)findViewById(R.id.parentLayout);
final ViewTreeObserver vto = layout.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < 16) {
layout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
layout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
greenHeight = greenView.getHeight();
}
});
}
public void clickHandler(View v) {
if (isShowingBox) {
isShowingBox = false;
slideOut(1500, 0);
} else {
isShowingBox = true;
slideIn(1500, 0);
}
}
private void slideIn(int duration, int delay) {
AnimatorSet set = new AnimatorSet();
set.playTogether(
// animate from off-screen in to screen
ObjectAnimator.ofFloat(greenView, "translationY", -greenHeight, 0),
ObjectAnimator.ofFloat(listView, "translationY", 0, greenHeight),
ObjectAnimator.ofFloat(greenView, "alpha", 0, 0.25f, 1)
// add other animations if you wish
);
set.setStartDelay(delay);
set.setDuration(duration).start();
}
private void slideOut(int duration, int delay) {
AnimatorSet set = new AnimatorSet();
set.playTogether(
// animate from on-screen and out
ObjectAnimator.ofFloat(greenView, "translationY", 0, -greenHeight),
ObjectAnimator.ofFloat(listView, "translationY", greenHeight, 0),
ObjectAnimator.ofFloat(greenView, "alpha", 1, 1, 1)
// add other animations if you wish
);
set.setStartDelay(delay);
set.setDuration(duration).start();
}
}
Important note: Remember to import the AnimatorSet and ObjectAnimator from nineoldandroids in your class and not the Android SDK ones!!!
One potential solution that makes a nice and fluid exit is using the weight attribute of LinearLayout with a ValueAnimator. Assuming you're using LinearLayout as your parent view for your green and blue blocks, your code would look something like this.
layout.xml
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!--Let's assume this is the view you wish you disappear-->
<View
android:id="#+id/view1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"/>
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"/>
</LinearLayout>
Now with this, in your code you can use the ValueAnimator as follows:
public class MainActivity extends Activity implements AnimatorUpdateListener
{
View view1;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
view1 = (View)findViewById(R.id.view1);
}
public void someAction()
{
//This is the important part, because it is FROM the first value TO
//the second. Notice that it must be a float type
ValueAnimator anim = ValueAnimator.ofFloat(1f, 0f);
anim.setDuration(200);
anim.addUpdateListener(this);
anim.start();
}
#Override
public void onAnimationUpdate(ValueAnimator animation)
{
view1.setLayoutParams(new LinearLayout.LayoutParams(0,
LayoutParams.MATCH_PARENT,
(Float) animation.getAnimatedValue()));
}
}
The ValueAnimator will automatically calculate the increments and execute them to get the smooth transition you want with the added benefit of keeping your view running.
You may also need to handle some strange UI occurrences as a result of shrinking the view (i.e., TextViews may act funny on the transition out), but I didn't run into too much trouble patching those up and keeping it neat.
Good luck! Hope this helps.
Use following code.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="#android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>