Animate changes to width and height

user_13770904 0
Viewed 262

I have a view that looks like this:

enter image description here

The layout looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="wrap_content"
    android:layout_height="44dp"
    android:paddingStart="12dp"
    android:paddingLeft="12dp"
    android:paddingEnd="12dp"
    android:paddingRight="12dp"
    android:paddingBottom="6dp"
    android:gravity="bottom"
    android:background="@drawable/background"
    android:elevation="2dp"
    android:clipToPadding="false">

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

    <ImageView
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginStart="4dp"
        android:layout_marginLeft="4dp"
        android:layout_marginEnd="4dp"
        android:layout_marginRight="4dp"
        app:srcCompat="@drawable/blue_circle" />

</LinearLayout>

What I want to do is change the size of the first ImageView programmatically to 64x64 while animating the changes and push the other blue circles over to adjust for the changes.

Right now, I only have code that changes the width/height to 64x64 WITHOUT any animations:

ViewGroup.LayoutParams layoutParams = firstImageView.getLayoutParams();
layoutParams.width = DisplayUtils.convertDpToPixels(getContext(), 64);
layoutParams.height = DisplayUtils.convertDpToPixels(getContext(), 64);
firstImageView.setLayoutParams(layoutParams);

How can I animate these changes smoothly, while making sure all other blue circles move over to adjust for these changes?

android-animation android-layout android
2 Answers

I would recommend using ConstraintLayout version 2. At the moment of writing the answer, the latest version of library is 2.0.2

Version 2 has added MotionLayout - a subclass of ConstraintLayout. It made animations easy to implement based on constraints. You can read more about it here and here. Some examples of what can be achieved with MotionLayout.

In your example you would replace parent layout from LinearLayout to MotionLayout and build a horizontal chain from 5 image views with chain style, for example, as spread

Then you would declare motion_scene.xml file where you would specify start and end states of your views. In start state your image view will have width and height equal to 32dp and in end scene it would be 64dp. In motion_scene.xml file you can specify what will be the trigger for animation, (i.e. OnClick, drag, swipe, etc.)

This way you could easily implement animations for your images that will run smooth and require less code.

I recommend going through examples and some articles to understand better MotionLayout.

user_62723690

You can use objectAnimator to do this . using the view.Scalex and View.ScaleY property. for example if the id of your view is ball . this code scales it to double its size.

  val scaleX = PropertyValuesHolder.ofFloat(View.SCALE_X, 2f)
  val scaleY = PropertyValuesHolder.ofFloat(View.SCALE_Y, 2f)
  val animator = ObjectAnimator.ofPropertyValuesHolder(
            ball, scaleX, scaleY)
  animator.repeatCount = 1
  animator.start()

This automatically scales it . for more info check out the codelabs

user_103724160
Related