CODEWITHSUNDEEP
androidandroid-jetpack-compose
Oleksandr Myronchuk
Oleksandr Myronchuk

Reputation: 370

Implementing Word-Wrap in Jetpack Compose

I am working on a design where each word is treated as an independent component. The requirement is such that if a word does not fit within a line, it should automatically move to the next line.

The purpose of this design is to enable interaction with each “word” component individually. For instance, I should be able to click on a word or apply specific designs to it (like striking through the word).

For better clarity, I have attached an image that closely represents what I aim to achieve:

enter image description here

The image provided illustrates a layout where words are inserted as individual components. If a word exceeds the length of a line, it automatically wraps to the next line. Each word is an independent component that allows for various interactions. For example, you can click on a word, apply special styles to it, or perform other operations. This design provides flexibility in manipulating each word separately while maintaining a clean and organized layout.

Could anyone guide me on how this can be implemented in Jetpack Compose? Any help would be greatly appreciated.

Upvotes: 1

Views: 379

Answers (1)

Jan Bína
Jan Bína

Reputation: 7228

You can use a FlowRow, each word will be a Text composable that can be styled as you need.

FlowRow() {
    Text("Date", modifier = Modifier.clickable {})
    Text("Day")
    Text("First")
    Text("Year")
}

Upvotes: 1

Related Questions