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)