By Joe Birch

We recently launched a new feature at Buffer, called Ideas. With Ideas, you can store all your best ideas, tweak them until they’re ready, and drop them straight into your Buffer queue. Now that Ideas has launched in our web and mobile apps, we have some time to share some learnings from the development of this feature. In this blog post, we’ll dive into how we added support for URL highlighting to the Ideas Composer on Android, using Jetpack Compose.

We started adopting Jetpack Compose into our app in 2021 – using it as standard to build all our new features, while gradually adopting it into existing parts of our application. We built the whole of the Ideas feature using Jetpack Compose – so alongside faster feature development and greater predictability within the state of our UI, we had plenty of opportunities to further explore Compose and learn more about how to achieve certain requirements in our app.

Within the Ideas composer, we support dynamic link highlighting. This means that if you type a URL into the text area, then the link will be highlighted – tapping on this link will then show an “Open link” pop-up, which will launch the link in the browser when clicked.

In this blog post, we’re going to focus on the link highlighting implementation and how this can be achieved in Jetpack Compose using the TextField composable.

For the Ideas composer, we’re utilising the TextField composable to support text entry. This composable contains an argument, visualTransformation, which is used to apply visual changes to the entered text.

TextField(
    ...
    visualTransformation = ...
)

This argument requires a VisualTransformation implementation which is used to apply the visual transformation to the entered text. If we look at the source code for this interface, we’ll notice a filter function which takes the content of the TextField and returns a TransformedText reference that contains the modified text.

@Immutable
fun interface VisualTransformation {
    fun filter(text: AnnotatedString): TransformedText
}

When it comes to this modified text, we are required to provide the implementation that creates a new AnnotatedString reference with our applied changes. This changed content then gets bundled in the TransformedText type and returned back to the TextField for composition.

So that we can define and apply transformations to the content of our TextField, we need to start by creating a new implementation of the VisualTransformation interface for which we’ll create a new class, UrlTransformation. This class will implement the VisualTransformation argument, along with taking a single argument in the form of a Color. We define this argument so that we can pass a theme color reference to be applied within our logic, as we are going to be outside of composable scope and won’t have access to our composable theme.

class UrlTransformation(
    val color: Color
) : VisualTransformation {

}

With this class defined, we now need to implement the filter function from the VisualTransformation interface. Within …read more

Source:: Buffer Blog

Author: Aaron