Placing a view on the screen in the position of another view android

Viewed 29

I have a view inside a FrameLayout that I want to animate it to zoom in and out, and get bigger than the layout it's sitting in. So the solution I came with is to make a new view and place it on top of the original FrameLayout, do the animation on it, and delete it. I manage to do the animation, but I can't place it on top of the original view. I have tried to set the x and y but it seems like it has no effect on it. What am I doing wrong?

(it's a grid for a 2048 game)

This is the grid xml:

<LinearLayout
    android:id="@+id/game_grid_layout"
    android:layout_width="280dp"
    android:layout_height="280dp"
    android:layout_marginTop="16dp"
    android:background="@color/game_container"
    android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/grid_container_0_0"
            style="@style/Layout.Cell"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_0_1"
            style="@style/Layout.Cell"
            android:layout_marginTop="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_0_2"
            style="@style/Layout.Cell"
            android:layout_marginTop="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_0_3"
            style="@style/Layout.Cell"
            android:layout_marginTop="8dp"
            android:layout_marginRight="8dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/grid_container_1_0"
            style="@style/Layout.Cell"
            android:layout_marginLeft="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_1_1"
            style="@style/Layout.Cell" />

        <FrameLayout
            android:id="@+id/grid_container_1_2"
            style="@style/Layout.Cell" />

        <FrameLayout
            android:id="@+id/grid_container_1_3"
            style="@style/Layout.Cell"
            android:layout_marginRight="8dp" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/grid_container_2_0"
            style="@style/Layout.Cell"
            android:layout_marginLeft="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_2_1"
            style="@style/Layout.Cell" />

        <FrameLayout
            android:id="@+id/grid_container_2_2"
            style="@style/Layout.Cell" />

        <FrameLayout
            android:id="@+id/grid_container_2_3"
            style="@style/Layout.Cell"
            android:layout_marginRight="8dp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/grid_container_3_0"
            style="@style/Layout.Cell"
            android:layout_marginLeft="8dp"
            android:layout_marginBottom="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_3_1"
            style="@style/Layout.Cell"
            android:layout_marginBottom="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_3_2"
            style="@style/Layout.Cell"
            android:layout_marginBottom="8dp" />

        <FrameLayout
            android:id="@+id/grid_container_3_3"
            style="@style/Layout.Cell"
            android:layout_marginBottom="8dp" />

    </LinearLayout>

</LinearLayout>

and this is the animation code: (parentView is the game_grid_layout from the xml)

ViewCompat.setElevation(viewToAnimate,2f)
parentView.addView(viewToAnimate)

viewToAnimate.translationX = originalViewRect.exactCenterX()
viewToAnimate.translationY = originalViewRect.exactCenterY()


val mergeAnim = ValueAnimator.ofFloat(1f, 2f)
mergeAnim.addUpdateListener { animation ->
    viewToAnimate.scaleX = animation.animatedValue as Float
    viewToAnimate.scaleY = animation.animatedValue as Float
}
mergeAnim.repeatCount = 1
mergeAnim.repeatMode = ValueAnimator.REVERSE

val animatorSet = AnimatorSet()
animatorSet.interpolator = DecelerateInterpolator(1f)
animatorSet.duration = 100 
animatorSet.play(mergeAnim)
1 Answers

I suggest a quicker implementation through something similar to:

public void scaleView(View v, float startScale, float endScale) {
    Animation anim = new ScaleAnimation(
            1f, 1f, // Start and end values for the X axis scaling
            startScale, endScale, // Start and end values for the Y axis scaling
            Animation.RELATIVE_TO_SELF, 0f, // Pivot point of X scaling
            Animation.RELATIVE_TO_SELF, 1f); // Pivot point of Y scaling
    anim.setFillAfter(true); // Needed to keep the result of the animation
    anim.setDuration(1000);
    v.startAnimation(anim);
}
Related