Animate App Bar Visibility in Jetpack Compose

Jetpack Compose has revolutionized Android development, enabling developers to build dynamic, efficient, and visually stunning UIs with ease. One of the most common patterns in mobile app development is animating the visibility of UI components, such as the App Bar, based on user interactions. In this blog post, we’ll explore how to animate the visibility of an App Bar in Jetpack Compose, diving into advanced techniques and best practices for creating smooth, delightful animations.

Why Animate App Bar Visibility?

Animated App Bar visibility enhances the user experience by providing:

• Contextual Navigation: Show or hide the App Bar dynamically based on the current screen content or user action.

• Focus Management: Allow users to focus on specific content by minimizing distractions.

• Smooth Transitions: Replace abrupt state changes with animations that feel natural and intuitive.

Key Jetpack Compose APIs for Animation

Jetpack Compose offers powerful APIs for implementing animations:

• animateFloatAsState: Animate a floating-point value over time.

• AnimatedVisibility: A composable specifically designed for animating visibility changes.

• Modifier.offset and Modifier.alpha: Modify component properties with animations for custom effects.

• LaunchedEffect and remember: Manage animation state and lifecycle effectively.

We’ll use these APIs to craft a polished App Bar animation.

Example: Hiding and Showing the App Bar on Scroll

One of the most popular use cases for animating App Bar visibility is hiding it as the user scrolls down and showing it as they scroll up. Let’s implement this pattern step by step.

Step 1: Setting Up the Basic Layout

We’ll create a scaffold with a scrollable content area and an App Bar:

@Composable
fun ScrollableScreen() {
    val scrollState = rememberLazyListState()
    val appBarVisible = remember { mutableStateOf(true) }

    Scaffold(
        topBar = {
            if (appBarVisible.value) {
                TopAppBar(title = { Text("Animated App Bar") })
            }
        },
        content = {
            LazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxSize()
            ) {
                items(50) { index ->
                    Text(
                        text = "Item #$index",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    )
}

Here, the TopAppBar is part of the Scaffold, and a LazyColumn is used for scrollable content.

Step 2: Detecting Scroll Direction

To animate the App Bar, we need to detect the user’s scroll direction. We can use the LazyListState to track the scroll offset:

@Composable
fun ScrollableScreen() {
    val scrollState = rememberLazyListState()
    val appBarVisible = remember { mutableStateOf(true) }

    // Track the scroll offset
    var previousOffset by remember { mutableStateOf(0) }

    LaunchedEffect(scrollState.firstVisibleItemScrollOffset) {
        val currentOffset = scrollState.firstVisibleItemScrollOffset
        appBarVisible.value = currentOffset <= previousOffset
        previousOffset = currentOffset
    }

    Scaffold(
        topBar = {
            if (appBarVisible.value) {
                TopAppBar(title = { Text("Animated App Bar") })
            }
        },
        content = {
            LazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxSize()
            ) {
                items(50) { index ->
                    Text(
                        text = "Item #$index",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    )
}

Step 3: Adding Smooth Animation

Now, let’s animate the visibility change using the AnimatedVisibility composable:

@Composable
fun ScrollableScreen() {
    val scrollState = rememberLazyListState()
    val appBarVisible = remember { mutableStateOf(true) }

    var previousOffset by remember { mutableStateOf(0) }

    LaunchedEffect(scrollState.firstVisibleItemScrollOffset) {
        val currentOffset = scrollState.firstVisibleItemScrollOffset
        appBarVisible.value = currentOffset <= previousOffset
        previousOffset = currentOffset
    }

    Scaffold(
        topBar = {
            AnimatedVisibility(visible = appBarVisible.value) {
                TopAppBar(title = { Text("Animated App Bar") })
            }
        },
        content = {
            LazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxSize()
            ) {
                items(50) { index ->
                    Text(
                        text = "Item #$index",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    )
}

The AnimatedVisibility composable ensures a smooth transition when showing or hiding the App Bar.

Step 4: Customizing the Animation

To create a more dynamic effect, we can customize the animation using additional parameters:

@Composable
fun ScrollableScreen() {
    val scrollState = rememberLazyListState()
    val appBarVisible = remember { mutableStateOf(true) }

    var previousOffset by remember { mutableStateOf(0) }

    LaunchedEffect(scrollState.firstVisibleItemScrollOffset) {
        val currentOffset = scrollState.firstVisibleItemScrollOffset
        appBarVisible.value = currentOffset <= previousOffset
        previousOffset = currentOffset
    }

    Scaffold(
        topBar = {
            AnimatedVisibility(
                visible = appBarVisible.value,
                enter = fadeIn() + slideInVertically(),
                exit = fadeOut() + slideOutVertically()
            ) {
                TopAppBar(title = { Text("Animated App Bar") })
            }
        },
        content = {
            LazyColumn(
                state = scrollState,
                modifier = Modifier.fillMaxSize()
            ) {
                items(50) { index ->
                    Text(
                        text = "Item #$index",
                        modifier = Modifier.padding(16.dp)
                    )
                }
            }
        }
    )
}

Here, the fadeIn, fadeOut, slideInVertically, and slideOutVertically animation specifications are used to enhance the visual experience.

Best Practices for App Bar Animations

1. Avoid Overcomplicating: Ensure that animations don’t overwhelm the user or impact performance.

2. Optimize Performance: Test animations on a range of devices to avoid frame drops or lags.

3. Test Accessibility: Verify that animations do not hinder accessibility, particularly for users who rely on assistive technologies.

4. Maintain Consistency: Use similar animation patterns across the app to maintain a cohesive user experience.

Conclusion

Animating App Bar visibility in Jetpack Compose is a powerful way to create a polished and user-friendly app interface. By leveraging the animation APIs in Compose, developers can implement dynamic, smooth, and customizable visibility changes with minimal effort.

Try these techniques in your next project and elevate your app’s user experience to the next level!