How to align icon and text to the center_vertical in sliding tab layout

Question

I am trying to align text and icon to the center(Vertical Center) in Sliding Tab Layout. How can i do that ?

@Override
public CharSequence getPageTitle(int position) {
    Drawable image = mContext.getResources().getDrawable(imageResId[position]);
    image.setBounds(0, 0, image.getWidth(), image.getHeight());
    // Replace blank spaces with image icon
    SpannableString sb = new SpannableString("   " + tabs[position]);
    ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}

visit this http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/ — , May 04 '16 at 07:17

score 1 · Answer 1 · edited May 23 '17 at 12:08

1

try to read the following url, probably your problem will be resolved.

Align text around ImageSpan center vertical

edited May 23 '17 at 12:08

Community

1
1

answered May 04 '16 at 07:50

Gaurav Tak

70
2

score 0 · Answer 2 · answered May 06 '16 at 07:37

Try below code:

 @Override
public CharSequence getPageTitle(int position) {
    Drawable image = mContext.getResources().getDrawable(imageResId[position]);
    image.setBounds(0, 0, image.getWidth(), image.getHeight());
    // Replace blank spaces with image icon
    SpannableString sb = new SpannableString("   " + tabs[position]);
    ImageSpan imageSpan = new CenteredImageSpan(getApplicationContext(), imageResId[position]); 
    sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return sb;
}


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 hope it's help you.

How to align icon and text to the center_vertical in sliding tab layout

2 Answers2