How to reduce recompositions when animating text color?

Question

Current code

@Composable
fun TextDemo() {
    var selectedIndex by remember {
        mutableIntStateOf(0)
    }
    Row {
        TabText(
            text = "First",
            isSelected = selectedIndex == 0,
            onClick = {
                selectedIndex = 0
            },
        )
        TabText(
            text = "Second",
            isSelected = selectedIndex == 1,
            onClick = {
                selectedIndex = 1
            },
        )
    }
}

@Composable
fun TabText(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val tabTextColor by animateColorAsState(
        targetValue = if (isSelected) {
            Color.Red
        } else {
            Color.Black
        },
        animationSpec = tween(
            easing = LinearEasing,
        ),
        label = "tab_text_color",
    )

    Text(
        modifier = Modifier
            .padding(8.dp)
            .clickable {
                onClick()
            },
        text = text,
        color = tabTextColor,
    )
}

UI for reference Two Text in a Row

Layout Inspector recompositions

Question

How to reduce the recompositions when text color changes?

For properties like alpha, transition, etc, It is possible to avoid recompositions when animating using Modifier.graphicsLayer {}

The same code with alpha animation instead of color is recomposed only once per selection change.

Code

@Composable
fun TabText(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val alphaValue by animateFloatAsState(
        targetValue = if (isSelected) {
            1F
        } else {
            0.5F
        },
        animationSpec = tween(
            easing = LinearEasing,
        ),
        label = "tab_text_color",
    )

    Text(
        modifier = Modifier
            .graphicsLayer {
                alpha = alphaValue
            }
            .padding(8.dp)
            .clickable {
                onClick()
            },
        text = text,
    )
}

Thracian · Accepted Answer · 2023-10-15 14:37:54Z

6

First of all when you log recomposition that reads a State it should better be done inside SideEffect otherwise it's possible to get false positives, because logging itself also counts as a State read.

To have one recomposition for text color change you can use Canvas or any draw Modifier inside Tab and call only draw phase while Color changes using TextMeasurer and drawText function of DrawScope.

Second option is to use BlendModes with Modifier.drawContent{} to change color with one recompostion as

@Preview
@Composable
private fun TextAnimationTest() {

    var isSelected by remember {
        mutableStateOf(false)
    }

    SideEffect {
        println("Recomposing...")
    }

    val tabTextColor by animateColorAsState(
        targetValue = if (isSelected) {
            Color.Red
        } else {
            Color.Black
        },
        animationSpec = tween(
            easing = LinearEasing,
        ),
        label = "tab_text_color",
    )


  Column {
      Button(
          onClick = {
              isSelected = isSelected.not()
          }
      ) {
          Text("Selected: $isSelected")
      }

      Text("Some Text", modifier = Modifier
          .graphicsLayer {
              compositingStrategy = CompositingStrategy.Offscreen
          }
          .drawWithContent {
              drawContent()

              drawRect(
                  color = tabTextColor,
                  blendMode = BlendMode.SrcIn
              )
          }
      )
  }
}

answered Oct 15, 2023 at 14:37

Thracian

69.9k22 gold badges215 silver badges407 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Abhimanyu Over a year ago

😕 So complicated solution for such a simple use-case. 😔

Thracian Over a year ago

All you have to do is set graphicsLayer for blend mode and draw a rectangle above text with a BlendMode.SrcIn. Other option is drawing inside Canvas. But bottomline is you need to do it in draw phase if you don't want to trigger recompositions

Abhimanyu Over a year ago

Also found that BasicText has a lambda modifier for this use-case. Material Text does not use lambda. kotlinlang.slack.com/archives/CJLTWPH7S/…

Thracian Over a year ago

That's great then. Lambdas are the way to defer state reads from composition to layout or draw phases. developer.android.com/jetpack/compose/performance/…

Abhimanyu Over a year ago

Raised an issue for the color provider in Text. issuetracker.google.com/issues/305542850

|

Abhimanyu · Accepted Answer · 2023-10-16 07:38:52Z

1

Given I am able to replace my Text usage with BasicText for my use-case, I can use the ColorProvider provided by BasicText.

Source.

This may not be possible in all scenarios and for such use cases, this solution by Thracian can be used.

Created an issue to provide support for color provider in Text as well. https://issuetracker.google.com/issues/305542850

edited Oct 16, 2023 at 7:38

answered Oct 15, 2023 at 14:53

Abhimanyu

15.2k13 gold badges71 silver badges146 bronze badges

Comments

ΓDΛ · Accepted Answer · 2025-09-13 06:01:29Z

material3:1.5.0-alpha04+ allows the use of the ColorProducer lambda for the Text composable function.

Sample;

@Composable
fun ToggleColorText() {
    var isRed by remember { mutableStateOf(true) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Foo Bar",
            color = { if (isRed) Color.Red else Color.Blue }, // ColorProducer Lambda
            fontSize = 20.sp,
            fontWeight = FontWeight.Bold
        )

        Spacer(modifier = Modifier.height(12.dp))

        Button(onClick = { isRed = !isRed }) {
            Text("Switch")
        }
    }
}

Collectives™ on Stack Overflow

How to reduce recompositions when animating text color?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related