Android Tutorial
Software Setup and Configuration
Android Studio
File Structure
Components
Core Topics
Layout
View
Button
Intent and Intent Filters
Toast
RecyclerView
Fragments
Adapters
Other UI Component
Image Loading Libraries
Date and Time
Material Design
Bars
Working with Google Maps
Chart
Animation
Database
Advance Android
Jetpack
Architecture
App Publish
App Monetization
Animating views in Android to achieve a fade in or fade out effect can be done using Android's Animation API. Here's how you can create a fade in and fade out animation for a TextView
in Kotlin:
fade_in.xml
):Create an XML file inside the res/anim/
directory named fade_in.xml
.
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromAlpha="0.0" android:toAlpha="1.0"> </alpha>
fade_out.xml
):Create another XML file inside the res/anim/
directory named fade_out.xml
.
<?xml version="1.0" encoding="utf-8"?> <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:duration="500" android:fromAlpha="1.0" android:toAlpha="0.0"> </alpha>
In your MainActivity.kt
(or any other activity):
import android.os.Bundle import android.view.animation.AnimationUtils import android.widget.TextView import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val textView: TextView = findViewById(R.id.textView) val fadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in) val fadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out) textView.setOnClickListener { if (textView.visibility == View.VISIBLE) { textView.startAnimation(fadeOut) textView.visibility = View.INVISIBLE } else { textView.startAnimation(fadeIn) textView.visibility = View.VISIBLE } } } }
In the code above:
AnimationUtils.loadAnimation()
.OnClickListener
on the TextView
. When the TextView
is clicked, it will either fade in or fade out based on its current visibility.When you run the app and tap the TextView
, it will fade out. Tapping the spot where the TextView
was (even if it's invisible) will cause it to fade in again.
You can apply this animation to any view, not just a TextView
. The fade in/out effect is a simple but effective way to enhance the user experience of your app by smoothly transitioning elements in and out of the UI.
Fade in/out effect for views in Android with Kotlin:
Create a fade animation using ObjectAnimator
and alpha
property:
val fadeIn = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f) fadeIn.duration = 1000 fadeIn.start()
Implementing fadeIn and fadeOut in Kotlin for Android:
Define functions for fadeIn and fadeOut:
fun fadeIn(view: View) { val fadeIn = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f) fadeIn.duration = 1000 fadeIn.start() } fun fadeOut(view: View) { val fadeOut = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f) fadeOut.duration = 1000 fadeOut.start() }
Crossfade animation in Android using Kotlin:
Crossfade between two views using ObjectAnimator
:
val fadeIn = ObjectAnimator.ofFloat(view1, "alpha", 0f, 1f) fadeIn.duration = 1000 val fadeOut = ObjectAnimator.ofFloat(view2, "alpha", 1f, 0f) fadeOut.duration = 1000 val crossfade = AnimatorSet() crossfade.playTogether(fadeIn, fadeOut) crossfade.start()
Alpha animation for fade in/out in Android with Kotlin:
Use AlphaAnimation
for fade animations:
val fadeIn = AlphaAnimation(0f, 1f) fadeIn.duration = 1000 val fadeOut = AlphaAnimation(1f, 0f) fadeOut.duration = 1000 view.startAnimation(fadeIn) // For fade in view.startAnimation(fadeOut) // For fade out
Fade in/out duration and interpolator in Kotlin:
Adjust duration and interpolator:
val fadeIn = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f) fadeIn.duration = 2000 fadeIn.interpolator = AccelerateDecelerateInterpolator() fadeIn.start()
Fade transition between activities in Android with Kotlin:
Apply fade transition between activities in the theme or programmatically:
// In the theme <item name="android:windowEnterTransition">@android:transition/fade</item> <item name="android:windowExitTransition">@android:transition/fade</item> // Programmatically window.enterTransition = Fade() window.exitTransition = Fade()
Kotlin code for view fade in and fade out effects:
Use Kotlin functions for view fade effects:
fun fadeIn(view: View) { val fadeIn = ObjectAnimator.ofFloat(view, "alpha", 0f, 1f) fadeIn.duration = 1000 fadeIn.start() } fun fadeOut(view: View) { val fadeOut = ObjectAnimator.ofFloat(view, "alpha", 1f, 0f) fadeOut.duration = 1000 fadeOut.start() }
Fade in/out on scroll in Android using Kotlin:
Utilize NestedScrollView.OnScrollChangeListener
for scroll-based fade effects:
nestedScrollView.setOnScrollChangeListener { _, _, scrollY, _, _ -> val alpha = 1 - scrollY / 1000f view.alpha = alpha.coerceIn(0f, 1f) }