Search code examples
androidandroid-edittextandroid-button

How to not overlap the text on buttons in EditText?


enter image description here

So, in my password field, I tried adding these icons as buttons. Now issue that I am facing is text is getting overlapped on that button. What actually I wanted is buttons stays inside the edittext but text doesnt overlap on it, but still you should be able to write the more content, it will be just scrollable.

for this I have used a constraint layout with editText and 2 buttons. Below is the code for that, for reference

<androidx.constraintlayout.widget.ConstraintLayout
     android:id="@+id/customEditTextLayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

                    <EditText
                        android:id="@+id/editTextPassword"
                        style="@style/editTextInput"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textPassword"
                        android:letterSpacing="@dimen/letterSpace0_1"

                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                     />

                    <Button
                        android:background="@android:color/transparent"
                        android:id="@+id/eyeIcon"
                        android:layout_width="@dimen/dp30"
                        android:layout_height="wrap_content"
                        android:drawableEnd="@drawable/show_eye_black_24dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="@+id/editTextPassword"
                        app:layout_constraintEnd_toStartOf="@+id/fingerprintIcon"
                        app:layout_constraintTop_toTopOf="parent"
                        android:layout_marginEnd="@dimen/dp_5"
                        android:elevation="@dimen/dp10"
                        android:padding="@dimen/dp_5"/>

                    <Button
                        android:background="@android:color/transparent"
                        android:id="@+id/fingerprintIcon"
                        android:layout_width="@dimen/dp30"
                        android:layout_height="wrap_content"
                        android:drawableEnd="@drawable/ic_fingerprint_black_24dp"
                        app:layout_constraintEnd_toEndOf="parent"
                        android:layout_marginEnd="@dimen/dp_5"
                        app:layout_constraintHorizontal_bias="0.5"
                        app:layout_constraintTop_toTopOf="parent"
                        android:layout_marginStart="@dimen/dp10"
                        android:padding="@dimen/dp_5"
                        android:elevation="@dimen/dp10"
                        app:layout_constraintBottom_toBottomOf="parent"/>


 </androidx.constraintlayout.widget.ConstraintLayout>

Solution

  • To keep the text from overlapping the Buttons, you can set a padding to the end of the EditText:

    android:paddingEnd="90dp"
    

    This way, the EditText underline will still be showing beneath the two Buttons.

    enter image description here