Search code examples
androidandroid-layoutkotlinandroid-textinputedittextcompound-drawables

TextInputEditText - CompoundDrawable is not centered


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?

enter image description here

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
    }
}

Solution

  • 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)  
    

    Code Result