CODEWITHSUNDEEP
androidandroid-edittextright-to-left
Deve
Deve

Reputation: 137

Hint Alignment to the right of password EditText

I'm working on and activity with arabic language. I want the hint of the username and password to start from the right and I have no problem f typing started from the left but in my UI I want the hint to be of the right side. But when I'm adding the inputType for the EditText the hint moves to the left.I tried solving it programmatically but it didn't work.

Java

    EditText password = (EditText) findViewById(R.id.input_password);
    password.setTypeface(Typeface.DEFAULT);

XML

<EditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="كلمة المرور"
            android:textColorHint="#FFFFFF"
            android:inputType="textPassword"
            android:background="@null"
            android:textColor="#FFFFFF"
            android:textSize="20dp"/>

Upvotes: 10

Views: 8429

Answers (8)

Ahmad Salman
Ahmad Salman

Reputation: 163

This one works fine for me

android:textAlignment="viewStart"

The hint direction will be at the correct side

Upvotes: 8

Alexei
Alexei

Reputation: 15664

Here my solution (workaround) for editText with type = password. Work on Android 5, Android 6. 

edittext_password = (EditText) rootView.findViewById(R.id.edittext_password);
            if (RTLUtils.isLeftToRightLanguage()) {
                edittext_password.setGravity(Gravity.START);
            } else {
                // Force a right-aligned text entry, otherwise latin character input,
                // like "abc123", will jump to the left and may even disappear!
                edittext_password.setTextDirection(View.TEXT_DIRECTION_RTL);
                // Make the hint display on the right hand side
                edittext_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
            }
            edittext_password.addTextChangedListener(new TextWatcher() {
                @Override
                public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                    isLeftToRight = RTLUtils.isLeftToRightLanguage(charSequence.toString());
                }

                @Override
                public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
                }

                @Override
                public void afterTextChanged(Editable editable) {
                    if (editable.length() > 0) {
                        isLeftToRight = RTLUtils.isLeftToRightLanguage(editable.toString());
                        if (isLeftToRight) {
                            edittext_password.setGravity(Gravity.START);
                            edittext_password.setTextDirection(View.TEXT_DIRECTION_LTR);
                            edittext_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
                            // Move the cursor to the correct place (after the typed character)
                            edittext_password.setSelection(editable.length());
                        } else {
                            //edittext_password.setGravity(Gravity.END);
                            edittext_password.setTextDirection(View.TEXT_DIRECTION_RTL);
                            // When a character is typed, dynamically change the EditText's
                            // InputType to PASSWORD, to show the dots and conceal the typed characters.
                            edittext_password.setInputType(InputType.TYPE_CLASS_TEXT |
                                    InputType.TYPE_TEXT_VARIATION_PASSWORD |
                                    InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
                            // Move the cursor to the correct place (after the typed character)
                            edittext_password.setSelection(editable.length());
                        }
                    } else { // empty text
                        if (!RTLUtils.isLeftToRightLanguage()) {
                            // Must be in this order (first setInputType then setTextDirection)
                            edittext_password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
                            edittext_password.setTextDirection(View.TEXT_DIRECTION_RTL);
                        }
                    }
                }
            });

  public static boolean isLeftToRightLanguage() {
        Bidi bidi = new Bidi(Locale.getDefault().getDisplayLanguage(), Bidi.DIRECTION_DEFAULT_LEFT_TO_RIGHT);
        if (bidi.isLeftToRight()) {
            return true;
        } else {
            return false;
        }
    }

    public static boolean isLeftToRightLanguage(String text) {
        Bidi bidi = new Bidi(text, Bidi.DIRECTION_DEFAULT_LEFT_TO_RIGHT);
        if (bidi.isLeftToRight()) {
            return true;
        } else {
            return false;
        }
    }

And here result: (Arabic soft keyboard)

enter image description here

and English soft keyboard:

enter image description here

Upvotes: 0

Tapan Gohil
Tapan Gohil

Reputation: 68

For AppCompatEditText edit text gravity start worked for me

<androidx.appcompat.widget.AppCompatEditText
        ......
        android:hint="كلمه السر"
        android:inputType="textPassword"
        android:gravity="start"
       .............../>

This will work only above api 16

you can also try, Where you must have stored your current language I used this library com.akexorcist:localizationactivity

if(currentLanguage.country.toLowerCase() == "arabic"){
        etPassword.gravity = GravityCompat.END
}else{
        etPassword.gravity = GravityCompat.START
}

Upvotes: 3

Mr-IDE
Mr-IDE

Reputation: 7641

This is a bug in the Android Framework, for EditText fields in Android 4.4+ : https://issuetracker.google.com/issues/37082815 or https://code.google.com/p/android/issues/detail?id=201471. As of July 2016, it is currently unsolved.

However there is a way to workaround it:

  • To make the hint display properly on the right (in right-to-left/RTL mode), you must remove the InputType property textPassword (InputType.TYPE_TEXT_VARIATION_PASSWORD), when there is no text entered.

  • To retain the password entry field behaviour of showing dots to conceal typed text, you must dynamically enable InputType.TYPE_TEXT_VARIATION_PASSWORD, when the first character is entered in. And it must be reset when all characters are deleted.

  • To prevent the UI glitch of Latin character input (LTR text like "abc123") jumping to the left or disappearing altogether, you must explicitly set textDirection to RTL.

Here are the details:

Pre-requisite for your AndroidManifest.xml:

<application
    ...
    android:supportsRtl="true"
    ... >
</application>

Your XML Layout contains:

     <EditText
        android:id="@+id/password"
        android:inputType="textPassword"
        android:hint="סיסמא"
        ... />

Java code with workaround bug fix:

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.login_fragment_layout, container, false);
    final EditText password = (EditText) view.findViewById(R.id.password);

    // Workaround https://issuetracker.google.com/issues/37082815 for Android 4.4+
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && isRTL(getActivity())) {

        // Force a right-aligned text entry, otherwise latin character input,
        // like "abc123", will jump to the left and may even disappear!
        password.setTextDirection(View.TEXT_DIRECTION_RTL);

        // Make the "Enter password" hint display on the right hand side
        password.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);
    }

    password.addTextChangedListener(new TextWatcher() {

        boolean inputTypeChanged;

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {}

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {}

        @Override
        public void afterTextChanged(Editable s) {

            // Workaround https://code.google.com/p/android/issues/detail?id=201471 for Android 4.4+
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT && isRTL(getActivity())) {
                if (s.length() > 0) {
                    if (!inputTypeChanged) {

                        // When a character is typed, dynamically change the EditText's
                        // InputType to PASSWORD, to show the dots and conceal the typed characters.
                        password.setInputType(InputType.TYPE_CLASS_TEXT |
                                InputType.TYPE_TEXT_VARIATION_PASSWORD |
                                InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);

                        // Move the cursor to the correct place (after the typed character)
                        password.setSelection(s.length());

                        inputTypeChanged = true;
                    }
                } else {
                    // Reset EditText: Make the "Enter password" hint display on the right
                    password.setInputType(InputType.TYPE_CLASS_TEXT |
                            InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS);

                    inputTypeChanged = false;
                }
            }
        }
    });

    return view;
}

public static boolean isRTL(Context context) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        return context.getResources().getConfiguration().getLayoutDirection()
                == View.LAYOUT_DIRECTION_RTL;
        // Another way:
        // Define a boolean resource as "true" in res/values-ldrtl
        // and "false" in res/values
        // return context.getResources().getBoolean(R.bool.is_right_to_left);
    } else {
        return false;
    }
}

It should work like this:

Video screenshot, Arabic: Hint on right, password typed on right

Upvotes: 9

android developer
android developer

Reputation: 116372

I think you can fix it by adding \u202B to the Hebrew/Arabic (or any other RTL language) text .

Example:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <EditText android:hint="Enter a number..." android:id="@+id/editText"
              android:layout_width="match_parent"
              android:layout_height="wrap_content" android:inputType="number"/>

    <EditText android:hint="\u202Bהכנס מספר..." android:id="@+id/editText2"
              android:layout_width="match_parent"
              android:layout_height="wrap_content" android:inputType="number"/>
</LinearLayout>

Sadly it seems it doesn't get shown on the layout preview, but it worked for me on a real device. Wrote about it here

Upvotes: 0

Android Geek
Android Geek

Reputation: 9225

Use 'gravity' attribute:

<EditText
    android:id="@+id/input_password"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:hint="كلمة المرور"
    android:textColorHint="#FFFFFF"
    android:gravity="right"
    android:inputType="textPassword"
    android:background="@null"
    android:textColor="#FFFFFF"
    android:textSize="20dp"/>

Upvotes: 0

Moudiz
Moudiz

Reputation: 7377

add gravity right try this way 

<EditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="كلمة المرور"
            android:textColorHint="#FFFFFF"
            android:inputType="textPassword"
            android:background="@null"
            android:textColor="#FFFFFF"
            android:textSize="20dp"
            android:gravity="right"/>

if your API level 17 and higher you can use 

android:textDirection="anyRtl"

Upvotes: 4

Veeresh Charantimath
Veeresh Charantimath

Reputation: 4719

Use Gravity Attribute to Adjust the Hint for EditText

        <EditText
        android:id="@+id/input_password"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="كلمة المرور"
        android:textColorHint="#FFFFFF"
        android:gravity="right"
        android:inputType="textPassword"
        android:background="@null"
        android:textColor="#FFFFFF"
        android:textSize="20dp"/>

Upvotes: 8

Related Questions