TextInputEditText - CompoundDrawable is not centered

Question

Im trying to add a suffix to my TextInputEditText by creating a TextDrawable then setting that using compoundDrawable. Everything is going fairly well except the drawable gets clipped outside to right of the component. What could be causing this? So far ive tried changing the font size but that is not doing any difference... Is the drawable too wide or what?

The String is "kr/månad" and as you can see it is clipped..

XML

<android.support.design.widget.TextInputLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text_input_layout"
    style="@style/TextInputLayoutStyle"
    android:theme="@style/TextInputLayoutTheme">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/text_input_edit_text"
        style="@style/TextInputEditTextStyle" />

</android.support.design.widget.TextInputLayout>

COMPONENT CODE

  textInputEditText.setCompoundDrawables(null, null, TextDrawable(unitText), null)

TEXTDRAWABLE

class TextDrawable(private val text: String?) : Drawable() {

    private val paint: Paint

    init {
        paint = Paint()
        paint.color = Color.BLACK
        paint.textSize = 44f
        paint.isAntiAlias = true
        paint.isFakeBoldText = true
        paint.typeface = Typeface.create("sans-serif-light", Typeface.NORMAL)
        paint.style = Paint.Style.FILL
        paint.textAlign = Paint.Align.CENTER
    }

    override fun draw(canvas: Canvas) {
        text?.let { text ->
            canvas.drawText(text, 0f, 0f, paint)
        }
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
    }

    override fun setColorFilter(cf: ColorFilter?) {
        paint.colorFilter = cf
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }
}

@ADM I do not know. But I want to use the material components! — thelastchief, Jan 25 '19 at 08:57

score 0 · Accepted Answer · edited Aug 25 '19 at 08:26

Try this code:

class TextDrawable(private val text: String?) : Drawable() {

    private val paint = Paint().apply {
        color = Color.BLACK
        textSize = 44f
        isAntiAlias = true
        isFakeBoldText = true
        typeface = Typeface.create("sans-serif-light", Typeface.NORMAL)
        style = Paint.Style.FILL
        setBounds(0, 0, measureText(text).toInt(), 0)
    }

    override fun draw(canvas: Canvas) {
        text?.let { text ->
            canvas.drawText(text, 0f, 0f, paint)
        }
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
    }

    override fun setColorFilter(cf: ColorFilter?) {
        paint.colorFilter = cf
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }
}

The difference is in two lines. I removed this

paint.textAlign = Paint.Align.CENTER

and added this:

setBounds(0, 0, measureText(text).toInt(), 0)

The problem was because i had not setBounds which seems to be a must in order for `setCompoundDrawables()` to calculate and center the text. — thelastchief, Jan 25 '19 at 12:41

TextInputEditText - CompoundDrawable is not centered

1 Answers1