1. Requirement background
Sometimes, we need to display new information on the screen and remove old information. Generally, we set views that need to be displayed or hidden through VISIBILITY or GONE. The disadvantage of this is that the changes in the display or hidden action are very abrupt, and sometimes the changes quickly make users unable to notice these changes. At this time, you can use animation to display or hide the view. Usually, you can use circles to reveal the animation, fade the animation or card invert the animation.
2. Create fade animation
Fade-in animation will gradually fade out one View or ViewGroup, and fade into another. This animation is suitable for switching content or views in the application. This animation is created using ViewPropertyAnimator here.
The animation below is a fade-in example of switching from the progress indicator to some content text.
1. Create a layout file
<
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Fade animation-->
<Button
android:
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:onClick="doClick"
android:text="@string/use_fade_in_fade_out_animator"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn_use_fade_in_fade_out_animator">
<TextView
android:
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="16dp"
android:text="@string/test_use_fade_in_fade_out_animator_text"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--Progress bar-->
<ProgressBar
android:
style="?android:progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</>
</>
2. Set fade animation
For animations that need to fade in, first set its visibility to GONE, which is already set in the layout file. When you need to display the faded View, first set its alpha to 0, which can ensure that the View has been displayed but is not visible. Set the fade in animation and fade out animation respectively. The fade in animation changes the alpha property of the View where it is located from 0 to 1, and the fade out animation changes the alpha property of the View where it is located from 1 to 0. For the fade out animation, after the animation is executed, its visibility is set to GONE, thereby speeding up processing.
3. Code implementation
//Start the fade animation private fun crossFade() {
//Set the alpha of the View that needs to fade in is 0, and the visibility is VISIBLE {
alpha = 0f
visibility =
//Change transparency to 1.0 through animation animate()
.alpha(1.0f)
.setDuration(())
.start()
}
//Set the animation that needs to fade out, change its alpha from 1 to 0, and execute events by listening to the animation, and set the visibility of the View to GONE after the animation is over. ()
.alpha(0f)
.setDuration(())
.setListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
(animation)
=
}
})
.start()
}
Summarize
This is the article about Android using animation to display or hide views. For more related Android animation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!