Highlighting Textual content Enter with Jetpack Compose | Tech Ex

nearly Highlighting Textual content Enter with Jetpack Compose will cowl the most recent and most present info roughly the world. open slowly because of this you perceive with out issue and accurately. will mass your information precisely and reliably

We lately launched a brand new characteristic in Buffer, known as Concepts. With Concepts, you’ll be able to retailer all of your greatest concepts, tweak them till they’re prepared, and put them instantly into the Buffer queue. Now that Concepts has launched on our net and cell apps, we’ve got time to share some learnings from creating this characteristic. On this weblog put up, we’ll dive into how we added help for URL highlighting in Concepts Composer on Android, utilizing Jetpack Compose.


We began adopting Jetpack Compose into our app in 2021, utilizing it as a regular to construct all of our new options, whereas regularly adopting it into present elements of our app. We constructed your entire Concepts characteristic with Jetpack Compose, so together with sooner characteristic growth and higher predictability inside our UI state, we had loads of alternatives to additional discover Compose and study extra about methods to obtain sure necessities in our software.

Throughout the Concepts composer, we help dynamic hyperlink highlighting. Which means for those who kind a URL within the textual content space, the hyperlink might be highlighted; Tapping this hyperlink will show an “Open Hyperlink” popup, which is able to open the hyperlink within the browser when clicked.

On this weblog put up, we are going to concentrate on the implementation of hyperlink highlighting and the way this may be achieved in Jetpack Compose utilizing the TextField composable


For the Concepts composer, we’re utilizing the TextField composable to help textual content enter. This composable accommodates one argument, visualTransformationused to use visible adjustments to entered textual content.

TextField(
    ...
    visualTransformation = ...
)

This argument requires a VisualTransformation The implementation that’s used to use the visible transformation to the entered textual content. If we have a look at the supply code for this interface, we’ll discover a filter operate that takes the content material of the TextField and returns a TransformedText reference containing the modified textual content.

@Immutable
enjoyable interface VisualTransformation 
    enjoyable filter(textual content: AnnotatedString): TransformedText

In the case of this modified textual content, we’re required to offer the implementation that creates a brand new AnnotatedString reference with our adjustments utilized. This modified content material is then packaged within the TransformedText write and return to TextField for the composition.

In order that we are able to outline and apply transformations to the content material of our TextFieldwe have to begin by creating a brand new implementation of the VisualTransformation interface for which we are going to create a brand new class, UrlTransformation. This class will implement the VisualTransformation argument, along with taking a single argument within the type of Shade. We outline this argument in order that we are able to go a theme colour reference to be utilized inside our logic, since we’ll be exterior of composable scope and will not have entry to our composable theme.

class UrlTransformation(
    val colour: Shade
) : VisualTransformation 

With this class outlined, we now have to implement the filter operate from the VisualTransformation Interface. Inside this operate we’re going to return an occasion of the TransformedText class: We are able to leap into the supply code of this class and see that two properties are required when creating an occasion of this class.

/**
 * The reworked textual content with offset offset mapping
 */
class TransformedText(
    /**
     * The reworked textual content
     */
    val textual content: AnnotatedString,

    /**
     * The map used for bidirectional offset mapping from authentic to reworked textual content.
     */
    val offsetMapping: OffsetMapping
)

Each arguments are required, so we’ll want to provide a worth for every when instantiating the TransformedText class.

  • textual content – this would be the modified model of the textual content that’s provided to the filter operate
  • displacement task – based on the documentation, that is the map used for bidirectional displacement mapping from authentic to reworked textual content
class UrlTransformation(
    val colour: Shade
) : VisualTransformation 
    override enjoyable filter(textual content: AnnotatedString): TransformedText 
        return TransformedText(
            ...,
            OffsetMapping.Id
        )
    

For him offsetMapping argument, we merely go the OffsetMapping.Id worth – that is the predefined default worth used for the OffsetMapping interface, used for when it may be used for textual content transformation that doesn’t change the variety of characters. In the case of the textual content argument, we’ll want to jot down some logic that can take the present content material, apply the highlighting, and return it as new. AnnotatedString reference to go to our TransformedText reference. For this logic, we’re going to create a brand new operate, buildAnnotatedStringWithUrlHighlighting. This can take two arguments: the textual content to be highlighted, together with the colour to make use of for the spotlight.

enjoyable buildAnnotatedStringWithUrlHighlighting(
    textual content: String, 
    colour: Shade
): AnnotatedString 
    

From this operate, we have to return a AnnotatedString reference, which we are going to create utilizing buildAnnotatedString. Inside this operate, we’ll begin through the use of the add operation to set the textual content material of the AnnotatedString.

enjoyable buildAnnotatedStringWithUrlHighlighting(
    textual content: String, 
    colour: Shade
): AnnotatedString 
    return buildAnnotatedString 
        append(textual content)
    

Subsequent, we’ll have to take the content material of our string and apply the highlighting to no matter URLs are current. Earlier than we are able to do that, we have to establish the URLs within the string. URL detection can fluctuate relying on the use case, so to maintain issues easy, let’s write some pattern code that finds the URLs in a given piece of textual content. This code will take the given string and filter the URLs, offering a listing of URL strings because of this.

textual content?.break up("s+".toRegex())?.filter  phrase ->
    Patterns.WEB_URL.matcher(phrase).matches()

Now that we all know what URLs are within the string, we’ll want to use highlighting to them. This might be within the type of an annotated string type, which is utilized by the addStyle operation.

enjoyable addStyle(type: SpanStyle, begin: Int, finish: Int)

When calling this operate, we have to go the SpanStyle that we wish to apply, together with the beginning and finish index to which this type must be utilized. We’ll begin by calculating this begin and end charge; To maintain issues easy, we’ll assume that there are solely distinctive URLs in our string.

textual content?.break up("s+".toRegex())?.filter  phrase ->
    Patterns.WEB_URL.matcher(phrase).matches()
.forEach 
    val startIndex = textual content.indexOf(it)
    val endIndex = startIndex + it.size

Right here we find the beginning index utilizing the indexOf operate, which is able to give us the beginning index of the given URL. We’ll then use this beginning index and the size of the URL to calculate the ending index. We are able to then go these values ​​to the corresponding arguments for the addStyle operate.

textual content?.break up("s+".toRegex())?.filter  phrase ->
    Patterns.WEB_URL.matcher(phrase).matches()
.forEach 
    val startIndex = textual content.indexOf(it)
    val endIndex = startIndex + it.size
    addStyle(
        begin = startIndex, 
        finish = endIndex
    )

Subsequent, we should present the SpanStyle which we wish to apply to the given index vary. Right here we wish to merely spotlight the textual content utilizing the supplied colour, so we’ll go the colour worth of our operate arguments as the colour argument to the SpanStyle operate.

textual content?.break up("s+".toRegex())?.filter  phrase ->
    Patterns.WEB_URL.matcher(phrase).matches()
.forEach 
    val startIndex = textual content.indexOf(it)
    val endIndex = startIndex + it.size
    addStyle(
        type = SpanStyle(
            colour = colour
        ),
        begin = startIndex, 
        finish = endIndex
    )

With this in place, we now have an entire operate that can take the textual content supplied and spotlight any URL utilizing the Shade reference.

enjoyable buildAnnotatedStringWithUrlHighlighting(
    textual content: String, 
    colour: Shade
): AnnotatedString 
    return buildAnnotatedString 
        append(textual content)
        textual content?.break up("s+".toRegex())?.filter  phrase ->
            Patterns.WEB_URL.matcher(phrase).matches()
        .forEach 
            val startIndex = textual content.indexOf(it)
            val endIndex = startIndex + it.size
            addStyle(
                type = SpanStyle(
                    colour = colour,
                    textDecoration = TextDecoration.None
                ),
                begin = startIndex, finish = endIndex
            )
        
    

Then we must leap again to our UrlTransformation class and go the results of the buildAnnotatedStringWithUrlHighlighting operate name for the TransformedText plot.

class UrlTransformation(
    val colour: Shade
) : VisualTransformation 
    override enjoyable filter(textual content: AnnotatedString): TransformedText 
        return TransformedText(
            buildAnnotatedStringWithUrlHighlighting(textual content, colour),
            OffsetMapping.Id
        )
    

now that our UrlTransformation implementation is full, we are able to instantiate this and go the reference to the visualTransformation argument of the TextField composable Right here we’re utilizing the specified colour from our MaterialTheme reference, which might be used when highlighting URLs in our TextField contents.

TextField(
    ...
    visualTransformation = UrlTransformation(
        MaterialTheme.colours.secondary)
)

With the above in place, we now have dynamic URL highlighting help inside our TextField composable Which means now every time the consumer inserts a URL into an thought composer, we establish it as a URL by highlighting it with our theme’s secondary colour.

On this put up, we’ve got discovered how we are able to apply dynamic URL highlighting to the content material of a TextField composable Within the subsequent put up, we’ll discover how we add the “Open Hyperlink” popup when a URL is tapped contained in the composer enter space.


I want the article virtually Highlighting Textual content Enter with Jetpack Compose provides acuteness to you and is helpful for additive to your information

Highlighting Text Input with Jetpack Compose