AnimatedContent in Jetpack Compose Example 2

AnimatedContentExample

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedContentExample(modifier: Modifier = Modifier) {

    var expanded by remember {
        mutableStateOf(false)
    }

    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Card(modifier = Modifier.clickable {
            expanded = !expanded
        }) {
            AnimatedContent(targetState = expanded,
                label = "",
                transitionSpec = {
                    fadeIn() with fadeOut() using SizeTransform { initialSize, targetSize ->
                        if (expanded) {
                            keyframes {
                                IntSize(
                                    width = targetSize.width,
                                    height = initialSize.height
                                ) at 150
                                durationMillis = 1000
                            }
                        } else {
                            keyframes {
                                IntSize(
                                    width = initialSize.width,
                                    height = targetSize.height
                                ) at 150
                                delayMillis = 100
                            }
                        }
                    }
                }
            ) { targetState ->
                if (targetState) {
                    Expand()
                } else {
                    Shrink()
                }
            }
        }
    }
}


@Composable
fun Expand(modifier: Modifier = Modifier) {
    Text(text = content)
}

@Composable
fun Shrink(modifier: Modifier = Modifier) {
    Icon(
        imageVector = Icons.Default.Add,
        contentDescription = null,
        modifier = modifier.size(80.dp)
    )
}

val content = """🚨 Fallacies of Writing Clean Code in Android Development 🚨

Please Drop one Like My Friend 🙏❤️

As Android developers, writing clean code is crucial for scalable and maintainable apps. Here are some common mistakes we should avoid in Android development:


1. "It Works" Fallacy
Just because your code runs on an emulator doesn’t mean it’s good code. Your code should be well-structured, optimized, and ready for production on any device. 📱


2. "Refactor Later" Approach
Delaying refactoring can add to your technical debt. Always clean up during the development process, whether you're working with Jetpack Compose or managing ViewModels. 🧹


3. "More Code, More Productive" Misconception
Writing lots of code doesn’t mean you’re being more productive. It’s about writing concise, reusable, and maintainable code. Let’s keep those repositories and use cases clean. ✍️


4. "Understandable to Me" Fallacy
Code should be understandable by everyone on the team, not just you. Keep your MVVM architecture and data layers easy to read and follow.


5. "Comments as Explanations" Fallacy
Relying on comments to explain code? ❌ No need if your code is self-explanatory. Use comments for context, especially when handling API calls or lifecycle events.


6. "Too Complex to Refactor" Excuse
Complex code is a signal to refactor. If your Compose UI or Retrofit integrations are getting out of hand, it’s time to simplify! 🛠️


7. "Previous Code is Sacred" Misconception
Just because your old code works doesn’t mean it’s perfect. Question, refactor, and improve when needed, especially with evolving Android libraries like Room or Paging.


8. "No Time for Tests" Misconception
There’s always time for tests! 🧪 Unit tests, UI tests with Espresso, and Compose Testing are your best friends to catch bugs early and ensure quality. 🚀""".trimIndent()