Improvement in CrossFadeAnimationActivity

app/src/main/java/com/mindorks/example/jetpack/compose/animation/CrossFadeAnimationActivity.kt

@@ -3,47 +3,86 @@ package com.mindorks.example.jetpack.compose.animation
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.animation.Crossfade
+import androidx.compose.animation.core.LinearOutSlowInEasing
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Text
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Button
 import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.setContent
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 
 class CrossFadeAnimationActivity : AppCompatActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            CrossFadeAnimation()
+            CrossFadeAnimation(
+                modifier = Modifier.fillMaxSize()
+            )
         }
     }
 }
 
 @Composable
-fun CrossFadeAnimation() {
-    val colors = listOf(Color.Red, Color.Green, Color.Blue, Color.Gray)
-    var current by remember { mutableStateOf(colors[0]) }
-    Column(modifier = Modifier.fillMaxSize()) {
-        // Crossfade animation is used when there is change in the screen, like if there
-        // is a transition between screens or there is a change in color of the screens or
-        // something like that.
-        // For example, here onClick of the Box, we are changing the background color of Box
-        // by using Crossfade animation.
-        Crossfade(current = current) { color ->
-            Box(Modifier.fillMaxSize().clickable(
-                onClick = {
-                    current = colors.random()
-                }
-            ).background(color))
+fun CrossFadeAnimation(
+    modifier: Modifier
+) {
+    val languages = listOf("Java","Python","JavaScript", "C#", "C++", "PHP", "Ruby", "Swift", "Objective-C", "Kotlin", "Go",
+        "Scala", "Rust", "TypeScript", "Dart", "Assembly", "Perl", "Visual Basic")
+
+    var current by remember {
+        mutableStateOf(languages.first())
+    }
+
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        Crossfade(
+            current = current,
+            animation = tween(
+                durationMillis = 400,
+                delayMillis = 100,
+                easing = LinearOutSlowInEasing
+            )
+        ) { currentStr ->
             Text(
-                modifier = Modifier.fillMaxSize(),
+                modifier = Modifier.fillMaxWidth(),
+                text = currentStr,
                 textAlign = TextAlign.Center,
-                text = "Click To See"
+                style = TextStyle(
+                    color = Color(0xFFD32F2F),
+                    fontSize = 45.sp,
+                    fontWeight = FontWeight.Bold
+                )
+            )
+        }
+
+        Spacer(modifier = Modifier.height(35.dp))
+
+        Button(
+            backgroundColor = Color(0xFF00796B),
+            onClick = {
+                current = languages.random()
+            }
+        ){
+            Text(
+                text = "Click Here",
+                style = TextStyle(
+                    color = Color.White,
+                    fontSize = 14.sp,
+                    fontWeight = FontWeight.SemiBold
+                )
             )
         }
     }