Animate changing LayoutParams (RelativeLayout)
Solution 1
To explicitly animate in this case, your sleepRoom()
should look like this.
public void sleepRoom(View view) {
final RelativeLayout sr = (RelativeLayout) view;
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) sr.getLayoutParams();
params.height = RelativeLayout.LayoutParams.MATCH_PARENT;
params.width = RelativeLayout.LayoutParams.MATCH_PARENT;
sr.setLayoutParams(params);
PropertyValuesHolder pvhLeft = PropertyValuesHolder.ofInt("left", 0, 1);
PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt("top", 0, 1);
PropertyValuesHolder pvhRight = PropertyValuesHolder.ofInt("right", 0, 1);
PropertyValuesHolder pvhBottom = PropertyValuesHolder.ofInt("bottom", 0, 1);
PropertyValuesHolder pvhRoundness = PropertyValuesHolder.ofFloat("roundness", 0, 1);
final Animator collapseExpandAnim = ObjectAnimator.ofPropertyValuesHolder(sr, pvhLeft, pvhTop,
pvhRight, pvhBottom, pvhRoundness);
collapseExpandAnim.setupStartValues();
sr.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
sr.getViewTreeObserver().removeOnPreDrawListener(this);
collapseExpandAnim.setupEndValues();
collapseExpandAnim.start();
return false;
}
});
}
However, normally android:animateLayoutChanges="true"
should work.
For more specifics from the man Chet Haase, see: https://www.youtube.com/watch?v=55wLsaWpQ4g
Solution 2
Simple trick that worked for me:
Adding:
android:animateLayoutChanges="true"
to the xml of the view whose layoutParams you are changing.
Then, adding this line of code in your Java/Kotlin code before changing the params:
Java:
((ViewGroup) sr).getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING);
Kotlin:
(sr as ViewGroup).layoutTransition.enableTransitionType(LayoutTransition.CHANGING)
Solution 3
because RelativeLayout
extends View
you can use all the animations you are using on "regular views". for example try using animate.scale() and see if it suits you. a simple way of doing it will be something like
@Override
protected void onCreate (Bundle savedInstanceState) {
sr = (RelativeLayout) findViewById(view.getId());
sv.setVisibility(View.GONE);
scaleEnd = sr.getScaleX();
sr.setScaleX(0);
}
...
@Override
protected void onPostCreate (Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
sr.setVisibility(View.Visible);
sr.animate.scaleX(scaleEnd);
}
Also if you want a Lollipop
kind of animation have a look at: Use the Reveal Effect
Related videos on Youtube
Laire
Updated on September 26, 2022Comments
-
Laire over 1 year
when I click on a RelativeLayout it change the size. How can I make this change animated? So it looks like the rectangle grows to full screen?
My Layout:
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity" android:background="#ff000000"> <RelativeLayout android:id="@+id/srLayout" android:layout_width="62.5dp" android:layout_height="132.5dp" android:layout_alignParentTop="true" android:layout_alignParentEnd="false" android:layout_alignParentRight="true" android:layout_marginRight="10dp" android:layout_marginEnd="10dp" android:layout_marginTop="10dp" android:clickable="true" android:onClick="sleepRoom" android:background="#ffffffff"></RelativeLayout> </RelativeLayout>
The code:
public void sleepRoom(View view) { RelativeLayout sr = (RelativeLayout) findViewById(view.getId()); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) sr.getLayoutParams(); params.height = RelativeLayout.LayoutParams.MATCH_PARENT; params.width = RelativeLayout.LayoutParams.MATCH_PARENT; sr.setLayoutParams(params); }