EditText with italic style cut the first letter

Question

I have a simple form with two editTexts with italic style font, but some letters (p and j) are "cutted" at left when placed at first position. I have tried to fix it with drawablePadding, but it does not work. In my case, inserting a blank space before the first letter isn´t a solution, at least not the best, because the second form field is a password one, so a dot will be shown automatically to the user due to the space character. The EditText has the following code:

<EditText
        android:id="@+id/edit_txt_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle_white"
        android:drawableLeft="@drawable/ic_mail"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="@string/login_email_placeholder"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress"
        android:padding="10dp"
        android:textColor="@color/black"
        android:textCursorDrawable="@null"
        android:textColorHint="@color/color_form_login_text"
        android:textSize="17sp" >

In Activity:

Typeface edit_text_font = Typeface.createFromAsset(getActivity().getAssets(),
          "fonts/helvetica-bold-italic.ttf");

     //Set Fonts
     mEditTxtLogin.setTypeface(edit_text_font);

Bug image:

What is the solution?

Answer 1

This is the solution. I have created a custom EditText with the custom font.

package com.example.customcontrols;

import android.content.Context;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.EditText;

public class MyEditTextItalic extends EditText {
    /*
     * Caches typefaces based on their file path and name, so that they don't
     * have to be created every time when they are referenced.
     */
    private static Typeface mTypeface;

    public MyEditTextItalic(Context context) {
        super(context);
        setTypeface(context);
    }

    public MyEditTextItalic(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setTypeface(context);
    }

    public MyEditTextItalic(Context context, AttributeSet attrs) {
        super(context, attrs);
        setTypeface(context);
    }

    // intercept Typeface change and set it with our custom font
    public void setTypeface(Context context) {
        if (mTypeface == null) {
            mTypeface = Typeface.createFromAsset(context.getAssets(),
                    "fonts/HelveticaNeue-Bold.otf");
        }

        super.setTypeface(mTypeface,Typeface.ITALIC);

    }
}

It is very important not create typeface italic because isn't show correctly, for use italic when set the font use super.setTypeface(mTypeface,Typeface.ITALIC);

in .xml

<com.example.customcontrols.MyEditTextItalic
            android:id="@+id/edit_txt_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:background="@drawable/rectangle_white"
            android:drawableLeft="@drawable/ic_key"
            android:drawablePadding="10dp"
            android:ems="10"
            android:hint="@string/login_password_placeholder"
            android:imeOptions="actionDone"
            android:inputType="textPassword"
            android:padding="10dp"
            android:textColor="@color/black"
            android:textCursorDrawable="@null"
            android:textStyle="bold|italic"
            android:textColorHint="@color/color_form_login_text"
            android:textSize="17sp" />

Answer 2

Try adding padding left. Try this:

<EditText
        android:id="@+id/edit_txt_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle_white"
        android:drawableLeft="@drawable/ic_mail"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="@string/login_email_placeholder"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress"
        android:padding="10dp"
        android:paddingLeft="45dp"
        android:textColor="@color/black"
        android:textCursorDrawable="@null"
        android:textColorHint="@color/color_form_login_text"
        android:textSize="17sp" >

Answer 3

try giving android:paddingLeft more than 10dp or decrease the android:drawablePadding to 4 or 5dp

Answer 4

This worked for me, set a custom width into xml layout:

android:width="130dp" //Define a value larger than your text.

Answer 5

You can force a TextView to draw outside of its bounds by giving it a text shadow. If you set the shadow color to transparent, then you have your solution! Add these to your TextView:

android:shadowColor="#00FFFFFF"
android:shadowDx="48"
android:shadowDy="0"
android:shadowRadius="1"

In my testing I found that #00000000 didn't work, 48 was a sufficient size to show all clipped text, and shadowDy and shadowRadius were necessary.