How do Instagram layout comment textview and user name textview together as one?

Question

I was thinking of the Instagram comment card layout. The layout bounds are shown as the below,

In the purplish block, two TextViews are aligned as a single one, both are clickable as separate. One navigates to user's page and the other selects the comment card. How is it possible? I can only think of it as a LinearLayout/RelativeLayout with two textviews, how can we get it look and behave like this?

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="60dp"
        android:layout_marginBottom="20dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="\@someusername"
            android:id="@+id/comment_username"
            android:layout_marginLeft="15dp"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
            android:layout_marginLeft="5dp"

            android:textSize="18sp"
            android:layout_toRightOf="@+id/comment_username"
            android:id="@+id/comment"/>
</RelativeLayout>

which is rendered as the pic below,

How do Instagram make the layout looks like the above pic?

Does this answer your question? [How to set the part of the text view is clickable](https://stackoverflow.com/questions/10696986/how-to-set-the-part-of-the-text-view-is-clickable) — haliltprkk, May 21 '20 at 07:17
Try to use the spans for styling your text. Read more: https://medium.com/androiddevelopers/spantastic-text-styling-with-spans-17b0c16b4568 — Konstantin Kuznetsov, May 21 '20 at 07:15

Saurabh Thorat · Accepted Answer · 2020-05-21T08:26:12.040

It uses SpannableString for styling the TextView. You can do it like this:

val username = "@username"
val comment = "This is a comment"
val text = username + comment

val startName = text.indexOf(username)
val endName = startName + username.length
val startComment = text.indexOf(comment)
val endComment = text.length

val spannableString = SpannableString(text)
val nameClickableSpan = object : ClickableSpan() {
    override fun onClick(widget: View) {
        // Username clicked
    }

    override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.typeface = Typeface.DEFAULT_BOLD
        ds.isUnderlineText = false
    }
}
val commentClickableSpan = object : ClickableSpan() {
    override fun onClick(widget: View) {
        // Comment clicked
    }

    override fun updateDrawState(ds: TextPaint) {
        super.updateDrawState(ds)
        ds.isUnderlineText = false
    }
}

spannableString.setSpan(nameClickableSpan, startName, endName, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
spannableString.setSpan(commentClickableSpan, startComment, endComment, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)

textView.text = spannableString
textView.movementMethod = LinkMovementMethod.getInstance()

Thank you for the neat explanation WITH kotlin – May 21 '20 at 07:58 — , May 21 '20 at 07:58

How do Instagram layout comment textview and user name textview together as one?

1 Answers1