Rikkin
Rikkin

Reputation: 509

How to change center alignment in EditText when the password Toggle is Enabled?

In my Android App, there is a form that an user can enter a password. I'm using TextInputLayout with passwordToggleEnabled="true" so the user can click in an icon to see or hide the password that is being typed. The output is somethinh like it:

enter image description here

The issue is that I need the text center aligned. But, when I try to use textAlignment="center", the text is centered taken into consideration the password toggle icon size:

enter image description here

What I really want is the text centered regarding only the EditText size. Look at the difference, when the text is aligned without the password toggle:

enter image description here

I need this kind of center alignment like the last pic, but with the password toogle icon. But, when I enable it the text is centered like the second pic, taking the icon into consideration for centering the text.

Is there a way to center the text at the EditText ignoring the password icon's size?

Source code:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="40dp"
    android:layout_marginStart="40dp"
    android:textAlignment="center"
    app:errorEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="7dp"
        android:inputType="textPassword"
        android:textAlignment="center"
        android:textColor="#121c2a"
        android:textSize="20sp" />

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

Upvotes: 0

Views: 527

Answers (1)

Rikkin
Rikkin

Reputation: 509

I found the answer, if anyone is having a similar problem.

I had to add a drawable with "blank" spaces, like this:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="1dp"
    android:viewportWidth="1.0"
    android:viewportHeight="1.0">

    <path
        android:pathData="M"
        android:fillColor="#0000"/>
</vector>

Then I just added this icon at the EditText start, using

android:drawableStart="@drawable/ic_password_space"

This way, there is an icon at the start and at the end, making the toggle stay centered.

Upvotes: 3

Related Questions