TextInputLayout suffix/prefix

Question

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

Are there any standard solutions?

Solution 1

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.

Solution 2

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>

Comments

[kyay10]

There is no need to use AppCompatTextView because it gets automatically inflated when you use TextView

[Gober]

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

[Gabriele Mariotti]

@Gober It is quite strange. Post a question with all details.

[Gober]

Posted question here: stackoverflow.com/questions/59101279/… @Gabriele Mariotti

[iCantC]

The prefix is visible no doubt, but the alignment is quite off between the prefix and text. : (

[YellowJ]

How to add padding between prefix and text?

[Jatin Sachdeva]

@iCantC you can use app:prefixTextAppearance to align prefix and text.

[Jatin Sachdeva]

@YellowJ custom or existing TextAppearance like app:prefixTextAppearance="@style/TextAppearance.AppCompat.Su‌​bhead"