A proper solution for expanding a TextView with a ‘read more’ button
This is a common issue we have ran into for multiple apps we develop. Design requires that if the text is longer than a few lines, then we should add 3 dots, and the text ‘read more’, on which the user can click, where it then displays ‘read less’, to collapse again.
There are several solutions floating around on the internet, but they all have a few flaws. They usually:
- can’t handle newlines inside the text
- don’t put the read more text at the very end of the line, but at a random place within the last line. When you have lot of list items below each other, this can be quite annoying for the eye
- they all use a layout listener. This means that they first lay out the text, and then calculate the positions, which results in a second layout. This is unnecessary and the jumping is also visible for the user. If you are scrolling down fast, this is easily noticeable.
My solution is quite long, because it has to handle these edge cases. Also it uses TextLayout to do all the calculations, so it can be synchronous, and can calculate the text to set immediately.
Add this to your code, and then create the strings resizable_text_read_more and resizable_text_read_less. (for example: “… read more”, and “read less”)
Now go to the place where you want to set the shortened text on the TextView.
textView.setResizableText(longText, 4, false)You can replace ‘4’ with the max. amount of lines you want to see, before the ‘…read more’ gets added.
