i have 2 views in a RelativeLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/shape_red"/>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#id/view1"
android:background="#drawable/shape_blue"/>
</RelativeLayout>
now, i animate the y property of view1 from 0 to 300. but i want view2 to change its position according to view1 - because view2 is set to be below (layout-below) view1.
as this isn't working, i tried to add an onAnimationEnd listener to the animation. like this:
ObjectAnimator ani = ObjectAnimator.ofFloat(view1, "Y", 200);
ani.setDuration(2000);
ani.addListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation)
{
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, view2.getHeight());
params.addRule(RelativeLayout.BELOW, view1.getId());
view2.setLayoutParams(params);
}
});
but view2 didn't change its position at all.
i would like to avoid making a new animation for view2 if possible, so please don't bother to suggest one. ;)
does anyone have some suggestions?
Check this if it solves your problem:
ani.addListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation)
{
LayoutParams params = view2.getLayoutParams();
// change it ...
params.addRule(RelativeLayout.BELOW, view1.getId());
view2.setLayoutParams(params);
}
});
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 have a view that is invisible by default(Just for the first time).
Now I need to switch the visibility to VISIBLE with this animation:
if (myView.getVisibility() == View.INVISIBLE) {
myView.setVisibility(View.VISIBLE);
myView.animate().translationY(0);
}
(Like the SnackBar default animation)
But this isn't working. It will turn visible with default animation
Is there any simple way that I could achieve this?
Note
I'm animating my view to dismiss, like this:
myView.animate().translationY(myView.getHeight());
You can do this using XML animation.
Create a slide-up animation XML using set and alpha and put this XML into your resource anim folder.
slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
USE:
Use AnimationUtils.loadAnimation() to load animation from XML and set and start animation using .startAnimation() method.
Here is an example:
ImageView imageView = (ImageView) findViewById(R.id.imageView);
// slide-up animation
Animation slideUp = AnimationUtils.loadAnimation(this, R.anim.slide_up);
if (imageView.getVisibility() == View.INVISIBLE) {
imageView.setVisibility(View.VISIBLE);
imageView.startAnimation(slideUp);
}
Hope this will help~
Add animations using ConstraintLayout
Just add below code above the views whose visibility is updated:
TransitionManager.beginDelayedTransition(constraintLayout)
Note:
ConstraintLayout will only perform animation on its direct children since it only knows when you change layout parameters and constraints on the children that it handles.
ConstraintLayout only animates layout related changes.
For more see this post https://robinhood.engineering/beautiful-animations-using-android-constraintlayout-eee5b72ecae3
This is the best way to animate views visibility :
private void viewGoneAnimator(final View view) {
view.animate()
.alpha(0f)
.setDuration(500)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.GONE);
}
});
}
private void viewVisibleAnimator(final View view) {
view.animate()
.alpha(1f)
.setDuration(500)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
view.setVisibility(View.VISIBLE);
}
});
}
And then call this method wherever you wanted to make a view visible or gone and give the intended view to methods as the parameter.
Just You need to add android:animateLayoutChanges="true" to your layout.
When I set visibility gone to linear_container, linear_bottom will animate from bottom to up and take place of "linear_container".
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/layoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/linear_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
</LinearLayout>
<LinearLayout
android:id="#+id/linear_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
</LinearLayout>
</LinearLayout>
Based on this answer:
with this methods, I can set the visibility of my view to VISIBLE with a slideUp animation(Like snackbar animation):
int getScreenHeight() {
DisplayMetrics displaymetrics = new DisplayMetrics();
activity.getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
return displaymetrics.heightPixels;
}
public void animateOnScreen(View view) {
final int screenHeight = getScreenHeight();
ObjectAnimator animator = ObjectAnimator.ofFloat(view, "y", screenHeight, (screenHeight * 0.8F));
animator.setInterpolator(new DecelerateInterpolator());
animator.start();
}
Then I can use it like this:
if (myView.getVisibility() == View.INVISIBLE) {
myView.setVisibility(View.VISIBLE);
animateOnScreen(myView);
}
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 linear layout like below
<LinearLayout
android:id="#+id/pilihwaktu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="125dp">
<com.testing.CustomLinearLayout
android:id="#+id/oneway"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/field_background"
android:padding="5dp"
android:layout_weight=".50">
....
</com.testing.CustomLinearLayout>
<com.testing.CustomLinearLayout
android:id="#+id/roundtrip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/field_background"
android:padding="5dp"
android:layout_weight=".50">
....
</com.testing.CustomLinearLayout>
</LinearLayout>
and it will show view like this
+---------------+---------------+
| | |
| oneway | roundtrip |
| | |
+---------------+---------------+
I want to make the roundtrip is gone as the default and when the Checkbox is checked, I want to animate roundtrip so it will restore things to the above state (and oneway section will animate as it follows so it looks smooth). And when the checkbox is not checked roundtrip will animate to hide or gone
I've tried to follow this link but it wasn't animated and it looks like ObjectAnimator is simple way to do it...
What is the correct way to do this?
Easy way:
Firstly, add to your parent LinearLayout this attribute:
<LinearLayout
android:id="#+id/pilihwaktu"
...
android:animateLayoutChanges="true"
... />
And later set checked change listener in the code like this:
yourCheckBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {
roundTip.setVisibility(isChecked ? View.VISIBLE : View.GONE);
}
});
More hard way:
This is for expand, it's simple to make it for collapse. Use this in the onCheckedChange, if it's checked
updateListener = new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
// Get params:
final LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) roundTip.getLayoutParams();
params.weight = (Float) animation.getAnimatedValue();
roundTip.setLayoutParams(loparams);
}
};
animatorListener = new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
roundTip.setVisibility(View.VISIBLE);
}
};
animator = ValueAnimator.ofFloat(0f, 0.5f);
animator.addUpdateListener(updateListener);
animator.addListener(animatorListener);
animator.setDuration(500);
animator.start();
I currently have an ImageView which i am applying a scale animation to. This view is inside a relative layout which has layout_height and layout_width set as wrap_content. The problem is when the animation starts it makes the imageview bigger than its parent layout and the image then gets cut off. Is there anyway around this?
Here is a working sample:
xml file -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/imgO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/circle"/>
</RelativeLayout>
</LinearLayout>
java file -
ImageView imgO;
ScaleAnimation makeSmaller;
ScaleAnimation makeBigger;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.titlescreen);
//Animation
imgO = (ImageView)findViewById(R.id.imgO);
makeSmaller = new ScaleAnimation((float)10.0, (float)1.0, (float)10.0, (float)1.0, Animation.RELATIVE_TO_SELF, (float)0.5, Animation.RELATIVE_TO_SELF, (float)0.5);
makeSmaller.setAnimationListener(new MyAnimationListener());
makeSmaller.setFillAfter(true);
makeSmaller.setDuration(500);
makeBigger = new ScaleAnimation((float)1.0, (float)10.0, (float)1.0, (float)10.0, Animation.RELATIVE_TO_SELF, (float)0.5, Animation.RELATIVE_TO_SELF, (float)0.5);
makeBigger.setAnimationListener(new MyAnimationListener());
makeBigger.setFillAfter(true);
makeBigger.setDuration(750);
imgO.startAnimation(makeBigger);
}
class MyAnimationListener implements AnimationListener {
public void onAnimationEnd(Animation animation) {
ScaleAnimation sa = (ScaleAnimation)animation;
if (sa.equals(makeSmaller))
imgO.startAnimation(makeBigger);
else
imgO.startAnimation(makeSmaller);
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationStart(Animation animation) {
}
}
Thanks.
A little late for you, but for everybody looking for an answer: You can call setClipChildren(false) on the enclosing ViewGroups (like RelativeLayout or LinearLayout).
I was applying a translation and alpha animation to a child view and the parent was clipping the child bounds.
For me #HerrHo's answer by itself didn't work, but once I added
android:clipChildren="false"
android:clipToPadding="false"
together, it started working!
I fixed this by making everything fill parent then centering the images horizontally and vertically.