Master the UI Magic: Real-Time Data Formatting in Jetpack Compose

 From VisualTransformation to OutputTransformation: How to format bank cards, phone numbers, and dates like a pro.

Master the UI Magic: Real-Time Data Formatting in Jetpack Compose

We’ve all been there: typing a 16-digit credit card number into a text field, squinting to check for errors. Without spaces, it’s a cognitive mess. As developers, we want formatting to be seamless, but traditionally, managing cursors and “hidden” characters has been a notorious headache.

There is an ongoing shift happening in how Jetpack Compose handles this. While many of us use VisualTransformation today, the OutputTransformation API is emerging in experimental text components to make this logic more intuitive.

The Strategy: Raw State, Polished UI

The goal is simple: Keep your source of truth clean (just the raw digits) while the user sees a formatted string.

  • State: 1234567812345678
  • UI: 1234 5678 1234 5678

⚠️ A Note on API Stability

Currently, OutputTransformation is part of the Experimental Foundation text APIs (built around TextFieldState and TextFieldBuffer). If you are building for production today using the stable TextField, you will likely still use VisualTransformation. Let’s look at both.

The “Future Way”: OutputTransformation (Experimental)

In the experimental rewrite of Compose Text, formatting becomes more declarative. Instead of calculating complex offset maps manually, we manipulate a buffer directly.

// Note: Requires Experimental Foundation APIs (BasicTextField2/TextFieldState)
// This example assumes digit-only input
val CreditCardTransformation = OutputTransformation {
    // Logic: Insert a space after every 4th digit.
    // We iterate backwards to avoid shifting indices 
    // of the characters we haven't reached yet!
    val originalLength = length
    for (i in (originalLength - 1) downTo 1) {
        if (i % 4 == 0) {
            insert(i, " ")
        }
    }
}

The “Stable Way”: VisualTransformation

Since we need code that works in production right now, here is how you handle a credit card format using the stable API. This requires an OffsetMapping to tell Compose where the cursor should actually live when "ghost" characters are added.

class CreditCardVisualTransformation : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        val rawText = text.text
        var out = ""
        for (i in rawText.indices) {
            out += rawText[i]
            if (i % 4 == 3 && i != rawText.lastIndex) out += " "
        }

        val offsetTranslator = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return offset + (offset / 4).coerceAtMost((out.length - rawText.length))
            }

            override fun transformedToOriginal(offset: Int): Int {
                return offset - (offset / 5).coerceAtMost(out.length - rawText.length)
            }
        }

        return TransformedText(AnnotatedString(out), offsetTranslator)
    }
}

When NOT to use Transformations

If your input needs strict validation (like rejecting letters entirely), handle that in your onValueChange logic or your TextFieldState filter. Transformations are strictly for the visual layer; they shouldn't be your "authority" on what data is allowed.

💡 UX Tip: For the smoothest experience, always pair formatted inputs with the correct keyboard type and autofill hints: keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number, autoFillHints = AutofillReference.CreditCardNumber)

🙋‍♂️ Frequently Asked Questions (FAQs)

Why did you iterate backwards in the OutputTransformation example?

Great catch! If you insert a space at index 4, the character that was at index 5 moves to index 6. By iterating backwards, we ensure the indices of the digits we haven’t processed yet stay exactly where they are.

Does this change the value of my state variable?

No. Whether you use VisualTransformation or OutputTransformation, your state remains clean (e.g., "12345678").

Can I use this for phone numbers or dates?

Absolutely. You would just adjust the logic to insert specific characters (like brackets or dashes) at specific positions. However, the more symbols you add, the more complex your OffsetMapping math becomes in the stable API—which is exactly why OutputTransformation is so exciting.

💬 Let’s Discuss!

  • Are you currently using VisualTransformation, or have you started experimenting with the new TextFieldState?
  • What is the most complex input mask you’ve had to build?
  • Would you like to see a follow-up post on creating a Regex-based formatter for more dynamic inputs?

Drop a comment below — let’s build better Android UIs together!

📘 Master Your Next Technical Interview

Since Java is the foundation of Android development, mastering DSA is essential. I highly recommend “Mastering Data Structures & Algorithms in Java”. It’s a focused roadmap covering 100+ coding challenges to help you ace your technical rounds.

Comments

Post a Comment

Popular posts from this blog

No More _state + state: Simplifying ViewModels with Kotlin 2.3

Image
 Clean up your Android code with Explicit Backing Fields—the modern way to handle read-only state without the boilerplate. TL;DR:  Kotlin 2.3 introduces  explicit backing fields , allowing you to replace the classic  _state  +  state  boilerplate with a single, cleaner property—provided you're okay with a few experimental trade-offs. If you’ve been developing Android apps, you know the “Backing Property Dance.” It’s that repetitive ritual where we create a private  MutableStateFlow  and a public  StateFlow  just to ensure encapsulation. The “Old” Way (The Boilerplate) private val _uiState = MutableStateFlow(UiState.Loading) // Exposing a read-only view of the mutable internal state val uiState: StateFlow<UiState> = _uiState.asStateFlow() We’ve done this for years to prevent external classes from mutating our state. While effective, it pollutes our IDE suggestions with underscores and adds unnecessary ceremony to every singl...
Read more

Why You Should Stop Passing ViewModels Around Your Compose UI Tree 🚫

Image
 Master State Hoisting and the "Route-level" pattern to build scalable, testable, and preview-friendly Android apps. If you’ve been building with Jetpack Compose for a while, you know how tempting it is to just pass a  ViewModel  instance down through five layers of UI components. It’s convenient—one object gives you all the data and all the functions you need. But here is the architectural reality:  Passing ViewModel instances deep into your UI tree is an architectural anti-pattern.  It couples your visual components to business logic and makes your code significantly harder to maintain, test, and preview. The Core Problem: Lifecycle and Scoping ViewModels are designed to be state holders tied to a specific lifecycle (usually a Navigation Destination). When you pass a ViewModel into a small UI component, you break the  Unidirectional Data Flow (UDF) . ❌ The “Bad” Way (Tight Coupling) // ❌ BAD: This component is now impossible to preview or reuse @Composabl...
Read more

Is Jetpack Compose Making Your APK Fatter? (And How to Fix It)

Image
 Unpacking the Compose Tax, compiler-driven DEX optimization, and why your resource strategy must evolve for modern UI. TL;DR DEX Bloat:  Compose’s compiler injects “Restartable” and “Skippable” logic for memoization; R8 minification is effectively required. Code vs. Assets:  Moving iconography to  ImageVector  constants allows R8 to prune unused assets as code. Tooling Leak:   ui-tooling  in release builds is the #1 cause of "false" bloat. The Scale Factor:  Compose has a higher “size floor” but a much lower “size ceiling” than the legacy View system. The promise of Jetpack Compose was simple: “Write less code, ship faster.” But as teams migrate, a quiet concern often echoes in code reviews:  “Why did our APK size just jump?” While Compose removes the weight of deep XML hierarchies and the overhead of ViewBinding, it introduces a unique “Compose Tax.” For a senior engineer, the goal isn’t just to accept this tax, but to optimize the runtime...
Read more