How to Manage Visibility in Android Jetpack Compose

In the realm of Android development, managing the visibility of UI components is a fundamental operation. Traditionally, developers leveraged View.VISIBLE, View.INVISIBLE, and View.GONE to control visibility.

With the introduction of Jetpack Compose, the declarative UI toolkit, these practices have become antiquated. Instead, we control the visibility of composables (the building blocks of UI in Jetpack Compose) in a more reactive manner.

In this blog post, we’ll discuss different ways to manage visibility in Jetpack Compose, moving from basic to more complex examples.

A Basic Example

Consider a simple scenario: you want to display a welcome message on the screen conditionally. In traditional Android development, you would manage the visibility attribute of the TextView. However, in Jetpack Compose, you handle this scenario like this:

@Composable
fun WelcomeMessage(name: String, shouldDisplay: Boolean) {
    if (shouldDisplay) {
        Text(text = "Welcome, $name")
    }
}

In this example, the Text composable is only added to the composition when shouldDisplay is true. Otherwise, nothing is displayed.

How to Control Visibility with Modifiers

Now, let’s consider a situation where you want the Text Composable to occupy layout space even when it’s not visible, similar to View.INVISIBLE in the view system. This is where Modifier.alpha comes into play:

@Composable
fun WelcomeMessage(name: String, shouldDisplay: Boolean) {
    Text(
        text = "Welcome, $name",
        modifier = Modifier.alpha(if (shouldDisplay) 1f else 0f)
    )
}

In this case, the alpha modifier adjusts the transparency of the Text Composable. An alpha value of 1f corresponds to a fully opaque (and hence, visible) component, whereas 0f results in a fully transparent (or invisible) component. Note that even when invisible, the Text Composable still occupies layout space.

How to Animate Visibility

Jetpack Compose also provides a seamless way to animate visibility changes for a smoother user experience. Let’s enhance our example to include this:

@Composable
fun WelcomeMessage(name: String, shouldDisplay: Boolean) {
    AnimatedVisibility(
        visible = shouldDisplay,
        enter = fadeIn(),
        exit = fadeOut()
    ) {
        Text(text = "Welcome, $name")
    }
}

Here, AnimatedVisibility is used to animate the Text Composable’s visibility. When shouldDisplay changes, it automatically animates between visible and not visible states, using fade-in and fade-out animations respectively.

Following is the complete code for reference.

package com.example.example

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.example.ui.theme.ExampleTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ExampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ModifierExample()
                }
            }
        }
    }
}


@Composable
fun WelcomeMessage(name: String, shouldDisplay: Boolean) {
    AnimatedVisibility(
        visible = shouldDisplay,
        enter = fadeIn(),
        exit = fadeOut()
    ) {
        Text(text = "Welcome, $name")
    }
}

@Composable
fun ModifierExample() {
Column() {
   WelcomeMessage(name = "hello", shouldDisplay = true)
}
}


@Preview(showBackground = true)
@Composable
fun ExamplePreview() {
    ExampleTheme {
        ModifierExample()
    }
}

The Jetpack Compose toolkit provides a new mindset to control UI in Android applications. Its reactivity allows for powerful control over the visibility of composables, from the simplest conditional displays to complex animated transitions.