How can I put image under text in the middle of the text?

Question

I need to put image in the middle of the text like an image below. And should resize image dependency from count of the number in the text.

Can I do this behaviour with SpannableString? Maybe without resize depending from count of number in the text?

Answer 1

Method 1:

You can use xml as :

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/first_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="10dp"
        android:text="Hello"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/middle_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/round_yellow"
        android:padding="20dp"
        android:text="3000"
        android:textSize="25sp" />

    <TextView
        android:id="@+id/last_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:text="World"
        android:textSize="25sp" />

</LinearLayout>

to split the string use :

 currentstring ="Hello World";
    String[] separated = CurrentString.split(" ");
    separated[0]; // this will contain "Hello"
    separated[1]; // this will contain "World"

note: the image will stretch according to the width of the text as in your screen shot.

Method 2:

To use in spannable string: create a span calss.

public class SpanClass extends ReplacementSpan {

    private final int mBackgroundColor;
    private final int mTextColor;
    private final float mCornerRadius;
    private final float mPaddingStart;
    private final float mPaddingEnd;
    private final float mMarginStart;

    public SpanClass(int backgroundColor, int textColor, float cornerRadius, float paddingStart, float paddingEnd, float marginStart) {
        super();
        mBackgroundColor = backgroundColor;
        mTextColor = textColor;
        mCornerRadius = cornerRadius;
        mPaddingStart = paddingStart;
        mPaddingEnd = paddingEnd;
        mMarginStart = marginStart;
    }

    @Override
    public int getSize(@NonNull Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        return (int) (mPaddingStart + paint.measureText(text.subSequence(start, end).toString()) + mPaddingEnd);
    }

    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, @NonNull Paint paint) {
        float width = paint.measureText(text.subSequence(start, end).toString());
        RectF rect = new RectF(x - mPaddingStart + mMarginStart, top, x + width + mPaddingEnd + mMarginStart, bottom);
        paint.setColor(mBackgroundColor);
        canvas.drawRoundRect(rect, mCornerRadius, mCornerRadius, paint);
        paint.setColor(mTextColor);
        canvas.drawText(text, start, end, x + mMarginStart, y, paint);
    }
}

then use it in code like :

 int flag = Spanned.SPAN_EXCLUSIVE_EXCLUSIVE;
        SpannableString firstSpan = new SpannableString("Hello");
        SpannableString middleSpan = new SpannableString(" 30 ");
        SpannableString lastSpan = new SpannableString("World");
        middleSpan.setSpan(new StyleSpan(Typeface.BOLD), 0, middleSpan.length(), flag);
        middleSpan.setSpan(new SpanClass(Color.BLACK, Color.WHITE, 90, 10, 10, 10), 0, middleSpan.length(), flag);
        SpannableStringBuilder builder = new SpannableStringBuilder();
        builder.append(firstSpan);
        builder.append(middleSpan);
        builder.append(lastSpan);
        my_textview.setText(builder);

Screenshot

Reference: Android Spannablecontent With Rounded Corners