TextInputLayout suffix/prefix

Question

I want to add suffix to TextInputLayout. An example is taken from the material.io

Example

Are there any standard solutions?

Won't [this](http://stackoverflow.com/a/37278154/1083957) be helpful to you? — azizbekian, Apr 06 '17 at 18:02

Gabriele Mariotti · Accepted Answer · 2020-07-13T06:19:54.700

35

With the TextInputLayout provided in the Material Components Library you can use the attrs:

app:prefixText: prefix text
app:suffixText: suffix text

Something like:

<com.google.android.material.textfield.TextInputLayout
    android:hint="Test"
    app:prefixText="@string/..."
    app:prefixTextColor="@color/secondaryDarkColor"
    app:suffixText="@string/..."
    app:suffixTextColor="@color/primaryLightColor"
    ...>

    <com.google.android.material.textfield.TextInputEditText
        .../>

</com.google.android.material.textfield.TextInputLayout>

Example:

Note: This requires a minimum of version 1.2.0-alpha01.

edited Jul 13 '20 at 06:19

answered Oct 22 '19 at 08:13

Gabriele Mariotti

320,139
94
887
841

When I try this the floating label for the hint ("Test" in the Example image) is moved out to the end of the prefix. Do you know any way to avoid this, so it can work like the Example image – Gober Nov 28 '19 at 14:09
@Gober It is quite strange. Post a question with all details. – Gabriele Mariotti Nov 28 '19 at 14:14
Posted question here: https://stackoverflow.com/questions/59101279/how-to-change-hint-padding-for-textinputlayout-when-using-the-new-prefixtext @Gabriele Mariotti – Gober Nov 29 '19 at 08:33
The prefix is visible no doubt, but the alignment is quite off between the prefix and text. : ( – iCantC Mar 29 '20 at 15:10
How to add padding between prefix and text? – YellowJ Dec 01 '20 at 15:10
@iCantC you can use app:prefixTextAppearance to align prefix and text. – Jatin Sachdeva May 24 '21 at 18:19
@YellowJ custom or existing TextAppearance like app:prefixTextAppearance="@style/TextAppearance.AppCompat.Subhead" – Jatin Sachdeva May 24 '21 at 18:20

score 6 · Answer 2 · edited Jan 30 '18 at 12:05

There are no standard solutions, I did it with textView right to textInputLayout and editText padding.

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:gravity="bottom">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hint"
                app:errorEnabled="true">

                <android.support.v7.widget.AppCompatEditText
                    style="@style/RegistrationEditText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingRight="80dp" />
            </android.support.design.widget.TextInputLayout>

            <android.support.v7.widget.AppCompatTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerInParent="true"
                android:paddingBottom="12dp"
                android:paddingRight="8dp"
                android:text="rightLabel" />
        </RelativeLayout>

There is no need to use AppCompatTextView because it gets automatically inflated when you use TextView — kyay10, Feb 14 '19 at 18:42

TextInputLayout suffix/prefix

2 Answers2

Linked