androidandroid-layoutandroid-edittextandroid-fonts

EditText with italic style cut the first letter


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:

screenshot of the bug

What is the solution?


Solution

  • 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" />