logoNotable UI

⌘ K
  • Components
  • Components Overview
  • General
    • ResponsiveText
Usage
Stateless
Implementation
Examples
Disable auto-sizing{@@@@}https://user-images.githubusercontent.com/13453007/214162716-221d482a-6491-4566-8a2e-c2e8b8937e7f.png
Uniform scaling (up){@@@@}https://user-images.githubusercontent.com/13453007/214158075-87eeeebe-908a-41c5-8bde-3d92f4786278.png
Uniform scaling (down){@@@@}https://user-images.githubusercontent.com/13453007/214165461-136ebe62-4fae-41e3-8c8f-60d5cdbe8b7f.png
TextScale with TextOverflow{@@@@}https://user-images.githubusercontent.com/13453007/214166489-1456eb17-4d79-419c-9259-5257ae58c897.png
API
Basic text resizing options
Props for TextScale.PresetSizes
Props for TextScale.SizeRange

ResponsiveText

Components Overview

Learn

Jetpack Compose

Help

Report issue

Connect

Twitter
Made with ❤ by
Thilaw Fabrice KIKI

Display a text that automatically adjusts its size based on the available space.

Usage

ResponsiveText extends the built-in Text component by adding a new property called textScale. This property allows for uniform scaling of text size and fine-tuning of the auto-sizing feature.

The textScale property has four options:

  • TextScale.Uniform: enables dynamic scaling with a default configuration for text size range.
  • TextScale.SizeRange: defines minimum and maximum size values, and also the step granularity.
  • TextScale.PresetSizes: defines a set of the allowed text sizes.
  • TextScale.None: to disable the auto-sizing feature.

Stateless

ResponsiveText evaluates the optimal font size without the need for recomposition. It uses a binary search algorithm to find the largest font size that will still fit within the available space.

Implementation

Full source of ResponsiveText is here

Examples

Preview
Disable auto-sizing

To disable responsive text size set textScale = TextScale.None for ResponsiveText.

expand codeexpand code
package com.notable.ui.demos.responsivetext

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.notable.ui.text.ResponsiveText
import com.notable.ui.text.TextScale

@Composable
fun DemoDisableAutoTextSizing() {
  val shortText = "The world is changed by your example, not by your opinion."
  Surface(
    modifier = Modifier
      .fillMaxWidth()
      .height(160.dp)
  ) {
    ResponsiveText(
      text = shortText, textScale = TextScale.None
    )
  }
}
Preview
Uniform scaling (up)

112.sp is the default maximum size for auto-sizing text in scaled pixels. textScale = TextScale.Uniform.

expand codeexpand code
package com.notable.ui.demos.responsivetext

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.notable.ui.text.TextScale
import com.notable.ui.text.ResponsiveText

@Composable
fun DemoEnableAutoTextSizing() {
  val shortText = "The world is changed by your example, not by your opinion."
  Surface(
    modifier = Modifier
      .fillMaxWidth()
      .height(160.dp)
  ) {
    ResponsiveText(
      text = shortText, textScale = TextScale.Uniform
    )
  }
}
Preview
Uniform scaling (down)

12.sp is the default minimum size for auto-sizing text in scaled pixels. textScale = TextScale.Uniform.

expand codeexpand code
package com.notable.ui.demos.responsivetext

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.notable.ui.text.ResponsiveText
import com.notable.ui.text.TextScale

@Composable
fun DemoAutoScalingDownText() {
  val longText =
    "As the sun began to set, the traveler stood at the edge of the cliff, taking in the vibrant hues of orange, pink and purple that stretched across the sky. The journey had been long and tiring, but the breathtaking view of the sunset made it all worth it. The traveler felt a sense of peace wash over them, as if all their troubles and worries were being left behind with the setting sun."

  Surface(
    modifier = Modifier
      .fillMaxWidth()
      .height(160.dp)
  ) {
    ResponsiveText(
      text = longText,
      textScale = TextScale.Uniform
    )
  }
}
Preview
TextScale with TextOverflow

Sometimes the content is too long, and the text will overflow even with the smallest font size. One can add an ellipsis (overflow = TextOverflow.Ellipsis) to indicate that the text has overflowed.

expand codeexpand code
package com.notable.ui.demos.responsivetext

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.notable.ui.text.ResponsiveText
import com.notable.ui.text.TextScale

@Composable
fun DemoOptimalTextOverflow() {
  val veryLongText =
    """The traveler, a young woman named Emma, had been on the road for weeks. She had left her hometown in search of adventure and a chance to reconnect with nature. As she made her way through the remote wilderness, she couldn't help but feel a sense of peace and contentment.

One morning, as Emma was setting up her tent for the night, she couldn't help but notice the beautiful colors of the sky as the sun began to rise. She quickly packed her things and set off towards the east, eager to catch the sunrise. As she crested a small hill, Emma was greeted by a breathtaking sight. The sky was painted in a spectrum of colors, from deep oranges and pinks to soft purples and blues. The sun slowly rose over the horizon, casting a warm glow over the landscape. Emma couldn't help but feel a deep sense of awe and inspiration as she watched the sunrise.She set up her camera and began capturing the moment, feeling a deep sense of gratitude and joy. The landscape was transformed by the light of the rising sun, and Emma was able to capture the true essence of the wilderness and how it changed the mood and atmosphere.
""".trimMargin()

  Surface(
    modifier = Modifier
      .fillMaxWidth()
      .height(160.dp)
  ) {
    ResponsiveText(
      text = veryLongText,
      textScale = TextScale.SizeRange(
        minSize = 14.sp,
        maxSize = 52.sp,
        stepGranularity = 1.sp
      ),
      overflow = TextOverflow.Ellipsis
    )
  }
}

API

Basic text resizing options

PropertyDescriptionTypeValueVersion
textScaleTurn off automatic resizing of text.TextScaleTextScale.None
textScaleEnable text resizing using default settings: min size 12.sp, max size 112.sp, step 1.spTextScaleTextScale.Uniform

Props for TextScale.PresetSizes

PropertyDescriptionTypeDefault
sizesAllowed values for size adjustment.List<TextUnit>

Props for TextScale.SizeRange

PropertyDescriptionTypeDefault
minSizeThe minimum text size available for auto-size. Must be greater than 0.sp .TextUnit
maxSizeThe maximum text size available for auto-size. Must be greater than 0.sp .TextUnit
stepGranularityThe step granularity for size interval traversal. Must be greater than 0.spTextUnit