Align text around ImageSpan center vertical
Solution 1
It might be a bit late but I've found a way to do it, no matter the image size. You need to create a class extending ImageSpan and override the methods getSize()
and getCachedDrawable()
(we don't need to change the last one, but this method from DynamicDrawableSpan
is private and cannot be accessed in another way from the child class). In getSize(...)
, you can then redefined the way DynamicDrawableSpan
set the ascent/top/descent/bottom of the line and achieve what you want to do.
Here's my class example:
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.text.style.DynamicDrawableSpan;
import android.text.style.ImageSpan;
import java.lang.ref.WeakReference;
public class CenteredImageSpan extends ImageSpan {
// Extra variables used to redefine the Font Metrics when an ImageSpan is added
private int initialDescent = 0;
private int extraSpace = 0;
public CenteredImageSpan(final Drawable drawable) {
this(drawable, DynamicDrawableSpan.ALIGN_BOTTOM);
}
public CenteredImageSpan(final Drawable drawable, final int verticalAlignment) {
super(drawable, verticalAlignment);
}
@Override
public void draw(Canvas canvas, CharSequence text,
int start, int end, float x,
int top, int y, int bottom, Paint paint) {
getDrawable().draw(canvas);
}
// Method used to redefined the Font Metrics when an ImageSpan is added
@Override
public int getSize(Paint paint, CharSequence text,
int start, int end,
Paint.FontMetricsInt fm) {
Drawable d = getCachedDrawable();
Rect rect = d.getBounds();
if (fm != null) {
// Centers the text with the ImageSpan
if (rect.bottom - (fm.descent - fm.ascent) >= 0) {
// Stores the initial descent and computes the margin available
initialDescent = fm.descent;
extraSpace = rect.bottom - (fm.descent - fm.ascent);
}
fm.descent = extraSpace / 2 + initialDescent;
fm.bottom = fm.descent;
fm.ascent = -rect.bottom + fm.descent;
fm.top = fm.ascent;
}
return rect.right;
}
// Redefined locally because it is a private member from DynamicDrawableSpan
private Drawable getCachedDrawable() {
WeakReference<Drawable> wr = mDrawableRef;
Drawable d = null;
if (wr != null)
d = wr.get();
if (d == null) {
d = getDrawable();
mDrawableRef = new WeakReference<>(d);
}
return d;
}
private WeakReference<Drawable> mDrawableRef;
}
Let me know if you have any trouble with that class!
Solution 2
My answer tweaks the first answer. Actually I have tried both two methods above, and I don't think they are really center vertical. It would make the drawable more center if it's placed in between ascent
and descent
, rather than top
and bottom
. So as to the second answer, it aligns the center of the drawable to the baseline of the text, rather than the center of that text. Here's my solution:
public class CenteredImageSpan extends ImageSpan {
private WeakReference<Drawable> mDrawableRef;
public CenteredImageSpan(Context context, final int drawableRes) {
super(context, drawableRes);
}
@Override
public int getSize(Paint paint, CharSequence text,
int start, int end,
Paint.FontMetricsInt fm) {
Drawable d = getCachedDrawable();
Rect rect = d.getBounds();
if (fm != null) {
Paint.FontMetricsInt pfm = paint.getFontMetricsInt();
// keep it the same as paint's fm
fm.ascent = pfm.ascent;
fm.descent = pfm.descent;
fm.top = pfm.top;
fm.bottom = pfm.bottom;
}
return rect.right;
}
@Override
public void draw(@NonNull Canvas canvas, CharSequence text,
int start, int end, float x,
int top, int y, int bottom, @NonNull Paint paint) {
Drawable b = getCachedDrawable();
canvas.save();
int drawableHeight = b.getIntrinsicHeight();
int fontAscent = paint.getFontMetricsInt().ascent;
int fontDescent = paint.getFontMetricsInt().descent;
int transY = bottom - b.getBounds().bottom + // align bottom to bottom
(drawableHeight - fontDescent + fontAscent) / 2; // align center to center
canvas.translate(x, transY);
b.draw(canvas);
canvas.restore();
}
// Redefined locally because it is a private member from DynamicDrawableSpan
private Drawable getCachedDrawable() {
WeakReference<Drawable> wr = mDrawableRef;
Drawable d = null;
if (wr != null)
d = wr.get();
if (d == null) {
d = getDrawable();
mDrawableRef = new WeakReference<>(d);
}
return d;
}
}
I also rewrite getSize
to keep the FontMetrics of drawable the same as other text, otherwise the parent view won't wrap the content correctly.
Solution 3
After reading the source code of TextView, I think we can use the baseLine of eache text line which is "y". And it will work even if you set lineSpaceExtra.
public class VerticalImageSpan extends ImageSpan {
public VerticalImageSpan(Drawable drawable) {
super(drawable);
}
/**
* update the text line height
*/
@Override
public int getSize(Paint paint, CharSequence text, int start, int end,
Paint.FontMetricsInt fontMetricsInt) {
Drawable drawable = getDrawable();
Rect rect = drawable.getBounds();
if (fontMetricsInt != null) {
Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
int fontHeight = fmPaint.descent - fmPaint.ascent;
int drHeight = rect.bottom - rect.top;
int centerY = fmPaint.ascent + fontHeight / 2;
fontMetricsInt.ascent = centerY - drHeight / 2;
fontMetricsInt.top = fontMetricsInt.ascent;
fontMetricsInt.bottom = centerY + drHeight / 2;
fontMetricsInt.descent = fontMetricsInt.bottom;
}
return rect.right;
}
/**
* see detail message in android.text.TextLine
*
* @param canvas the canvas, can be null if not rendering
* @param text the text to be draw
* @param start the text start position
* @param end the text end position
* @param x the edge of the replacement closest to the leading margin
* @param top the top of the line
* @param y the baseline
* @param bottom the bottom of the line
* @param paint the work paint
*/
@Override
public void draw(Canvas canvas, CharSequence text, int start, int end,
float x, int top, int y, int bottom, Paint paint) {
Drawable drawable = getDrawable();
canvas.save();
Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
int fontHeight = fmPaint.descent - fmPaint.ascent;
int centerY = y + fmPaint.descent - fontHeight / 2;
int transY = centerY - (drawable.getBounds().bottom - drawable.getBounds().top) / 2;
canvas.translate(x, transY);
drawable.draw(canvas);
canvas.restore();
}
}
Solution 4
ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM) {
public void draw(Canvas canvas, CharSequence text, int start,
int end, float x, int top, int y, int bottom,
Paint paint) {
Drawable b = getDrawable();
canvas.save();
int transY = bottom - b.getBounds().bottom;
// this is the key
transY -= paint.getFontMetricsInt().descent / 2;
canvas.translate(x, transY);
b.draw(canvas);
canvas.restore();
}
};
Solution 5
I got a working solution by creating a class that inherits from ImageSpan.
Then modified draw implementation from DynamicDrawableSpan. At least this implementation works when my image height is less than font height. Not sure how this works for bigger images like yours.
@Override
public void draw(Canvas canvas, CharSequence text,
int start, int end, float x,
int top, int y, int bottom, Paint paint) {
Drawable b = getCachedDrawable();
canvas.save();
int bCenter = b.getIntrinsicHeight() / 2;
int fontTop = paint.getFontMetricsInt().top;
int fontBottom = paint.getFontMetricsInt().bottom;
int transY = (bottom - b.getBounds().bottom) -
(((fontBottom - fontTop) / 2) - bCenter);
canvas.translate(x, transY);
b.draw(canvas);
canvas.restore();
}
Also had to reuse implementation from DynamicDrawableSpan as it was private.
private Drawable getCachedDrawable() {
WeakReference<Drawable> wr = mDrawableRef;
Drawable d = null;
if (wr != null)
d = wr.get();
if (d == null) {
d = getDrawable();
mDrawableRef = new WeakReference<Drawable>(d);
}
return d;
}
private WeakReference<Drawable> mDrawableRef;
And this is how I use it as static method that inserts image in front of the text.
public static CharSequence formatTextWithIcon(Context context, String text,
int iconResourceId) {
SpannableStringBuilder sb = new SpannableStringBuilder("X");
try {
Drawable d = context.getResources().getDrawable(iconResourceId);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
CenteredImageSpan span = new CenteredImageSpan(d);
sb.setSpan(span, 0, sb.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.append(" " + text);
} catch (Exception e) {
e.printStackTrace();
sb.append(text);
}
return sb;
Maybe not a good practice there considering localization, but works for me. To set images in the middle of the text, you'd naturally need to replace tokens in text with spans.
Karakuri
Updated on August 21, 2021Comments
-
Karakuri almost 3 years
I have an
ImageSpan
inside of a piece of text. What I've noticed is that the surrounding text is always drawn at the bottom of the text line -- to be more precise, the size of the text line grows with the image but the baseline of the text does not shift upward. When the image is noticeably larger than the text size, the effect is rather unsightly.Here is a sample, the outline shows bounds of the
TextView
:I am trying to have the surrounding text be centered vertically with respect to the image being displayed. Here is the same sample with blue text showing the desired location:
Here are the constraints that I'm bound by:
- I cannot use compound drawables. The images must be able to be shown between words.
- The text may be multiline depending on the content. I have no control over this.
- My images are larger than the surrounding text and I cannot reduce their size. While the sample image above is larger than the actual images (to demonstrate the current behavior), the actual images are still large enough that this problem is noticeable.
I've tried using the
android:gravity="center_vertical"
attribute on the TextView, but this does not have any effect. I believe this just vertically centers the text lines, but within the text line the text is still drawn at the bottom.My current train of thought is to create a custom span that shifts the baseline of the text based on the height of the line and the current text size. This span would encompass the entire text, and I would have to compute the intersection with the
ImageSpan
s so I can avoid shifting the images as well. This sounds rather daunting and I'm hoping someone can suggest another approach.Any and all help is appreciated!
-
Karakuri over 9 yearswhat happens when you use a larger image?
-
otnieldocs almost 9 yearsThis is the best solution which answering my qusetion too. This is my question... stackoverflow.com/questions/31249475/…
-
ElSajko over 8 yearsHow to use it? Creating same class I guess isn't enough.
-
jbiral over 8 yearsYou just have to replace the ImageSpan you were using with the CenteredImageSpan and it will center your image automatically with the text
-
ElSajko over 8 yearsbut what if I use ImageSpan class not directly but by using Html.fromHtml(String) ?
-
ElSajko over 8 yearsThere is a bug, entry variable doesn't exists anywhere, but your code try to use it.
-
ElSajko over 8 yearsIt only works with image height smaller than text height.
-
Karakuri over 8 years@ElSajko I just tried this solution and it appears to be working fine for an image larger than the text height. The posted code does have some errors: remove the "entry" variable in one of the constructors, and change "=>" to ">=" in
getSize()
-
logic over 8 yearsWorks perfectly. Make sure you provide context and resource name when you use the class. Example:
ImageSpan imageSpan = new CenteredImageSpan(getApplicationContext(), R.drawable.ic_youricon)
(unlike the previous example) -
Victor Choy over 8 yearsworks well and simple. Could explain the bottom top, x y parameter' meanings? I can't understand and no docs explanation. Thanks
-
auroranil over 8 yearsFor some reason
fm.descent = 3 * extraSpace / 8 + initialDescent;
works andfm.descent = extraSpace / 2 + initialDescent;
aligns the text to the top. Following this tutorial btw to add image and text: guides.codepath.com/android/… -
chin87 about 8 yearsdid'nt work on 4" device 480x800 hdpi icons get cut at bottom text is shown correctly, but worked on xxhdpi devices
-
chin87 about 8 yearsReplace draw with this draw:
public void draw( Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) { Drawable b = getCachedDrawable(); canvas.save(); int transY = bottom - b.getBounds().bottom; // this is the key transY -= paint.getFontMetricsInt().descent / 2; canvas.translate(x, transY); b.draw(canvas); canvas.restore(); }
-
chin87 about 8 yearsreplace draw from @misaka-10032 with this draw and code is working on all resolutions
-
Karioki almost 8 yearshow can i user it to make align text with bottom of a image?
-
Karakuri almost 8 years@Karioki What you described sounds like the default behavior in the original post. I don't think you would use this code.
-
Karioki almost 8 years@Karakuri sorry it was mistake, i was thinking of 'top alignment', got my solution by replacing "fm.descent = extraSpace / 2 + initialDescent;" by "fm.descent = extraSpace + initialDescent;"
-
chefish over 7 yearsIf the icon is larger than the text,the icon wil be cut
-
chefish over 7 yearsPlease use paint.getFontMetricsInt() instead of fm.Because fm is a middle variable
-
Srikanth K about 7 yearsI want to know how we can use this class. CenteredImageSpan imageSpan = new CenteredImageSpan(drawableResId, _____); what i need to pass as second variable?
-
jbiral about 7 years@SrikanthK you need to pass the aligment, e.g.
DynamicDrawableSpan.ALIGN_BOTTOM
-
rana_sadam almost 7 yearshaving error in overriding draw and getbound methods
-
Sojan P R about 6 yearsThis works great irrespective of the Image size. Most other answers have the issue of chopping the image when it is larger than the test. Thank you
-
KingKongCoder over 5 yearsworks like charm, thanks for taking time and figuring it out saved some of my time.
-
sudoExclaimationExclaimation over 5 yearsThis is glorious! Magnificent! Charming!
-
heng li about 5 yearsI tweaks this answer below,then work perfectly in my case
-
Oleksandr Albul over 4 yearsAll top answers don't work well, except this one. Thanks!