Align second line in textView to center, with compoundDrawable aligned to first

Question

I have a TextView with centered text that can span across two lines. Sometimes a CompoundDrawable appears and is aligned to the first row of text. In this case, I want the second line of text to be aligned to the entire top row (i.e. drawable+text). It is currently aligned only to the text.

I'd like it to look like this

Here's what I'm getting

This is the TextView xml:

<TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="@dimen/margin_small"
        android:layout_marginEnd="@dimen/margin_medium"
        android:layout_marginTop="@dimen/margin_small"
        android:layout_marginStart="@dimen/margin_medium"
        android:gravity="center"
        android:maxLines="2"
        app:layout_constraintBottom_toTopOf="@+id/item_subtitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/item_icon"
        app:layout_goneMarginStart="@dimen/margin_medium"
        tools:text="Headline longer than than the one line name and some more info Headline longer than than the one line name and some more inf"/>

This is for the compoundDrawable (I used this solution to align the drawable to the first row):

val innerDrawable =itemView.resources.getDrawable(R.drawable.ic_item_indicator_premium)
val premiumCompoundDrawable = PremiumCompoundDrawable(innerDrawable)
innerDrawable.setBounds(0,0,innerDrawable.intrinsicWidth, innerDrawable.intrinsicHeight)
premiumCompoundDrawable.setBounds(0, 0, innerDrawable.intrinsicWidth, innerDrawable.intrinsicHeight)
titleTextView.setCompoundDrawables(premiumCompoundDrawable, null, null, null)

do you have to set a design like this https://i.stack.imgur.com/igZLh.jpg ? — Maulik Baraiya, Sep 02 '19 at 11:24
You can use `SpannableString` and `ImageSpan`. See the [gist](https://gist.github.com/Cheesebaron/5034440). — Abu Noman, Sep 02 '19 at 12:14

score 0 · Answer 1 · answered Sep 03 '19 at 06:07

You can use Spannable String for achieve your requirements like below:

XML file:

<ImageView
        android:id="@+id/item_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@drawable/table_bg"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="20dp"/>
<TextView
        android:id="@+id/item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constrainedWidth="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="5dp"
        android:layout_marginEnd="2dp"
        android:layout_marginTop="5dp"
        android:layout_marginStart="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/item_icon"
        app:layout_goneMarginStart="8dp"
        android:maxLines="2"
        android:text=" Headline longer than than the one line name and some more info Headline longer than than the one line name and some more inf"/>

In Java

        itemTitle=findViewById(R.id.item_title);
        ImageSpan imageSpan = new ImageSpan(this, R.drawable.ic_star); //Find your drawable.
        SpannableString spannableString = new SpannableString(itemTitle.getText()); //Set text of SpannableString from TextView
        spannableString.setSpan(imageSpan, 0, itemTitle.getText().length()+1-itemTitle.getText().length(), 0); //Add image at end of string
        itemTitle.setText(spannableString);

In Kotlin:

val imageSpan = ImageSpan(this, R.drawable.ic_star) //Find your drawable.
        val spannableString = SpannableString(item_title.text) //Set text of SpannableString from TextView
        spannableString.setSpan(
            imageSpan,
            0,
            item_title.text.length + 1 - item_title.text.length,
            0
        ) //Add image at start of string
        item_title.setText(spannableString)

Output Is:

I hope its work for you.

Align second line in textView to center, with compoundDrawable aligned to first

1 Answers1