OutlinedBox TextInputLayout and gravity center?

Question

How to achieve centered new OutlinedBox style with TextInputLayout?

Current behavior:

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout2"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    >
    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:hint="hint"
        />
</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    >
    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:hint="hint2"
        />
</android.support.design.widget.TextInputLayout>

I use com.android.support:design:28.0.0.

Any ideas to implement centered normal looking TextInputEditText?

Use hint on `TextInputLayout` instead of `TextInputEditText`. — Jeel Vankhede, Nov 21 '18 at 13:55

score 13 · Accepted Answer · answered Nov 21 '19 at 08:19

13

With the Material Components Library, starting from the version 1.2.0-alpha02 the collapsed label position is determined via the edit text gravity.

Using something like:

<com.google.android.material.textfield.TextInputLayout
    android:hint="@string/...."
    ...>

    <com.google.android.material.textfield.TextInputEditText
        android:gravity="center"
        ../>

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

The result is:

answered Nov 21 '19 at 08:19

Gabriele Mariotti

320,139
94
887
841

It is not working when I set `app:hintEnabled="false"` or `app:boxBackgroundMode="none" ` to `TextInputLayout` – Kuvonchbek Yakubov Aug 30 '20 at 21:34
@KuvonchbekYakubov It is quite clear. Using `app:hintEnabled="false"`the layout's floating label is **disabled** and it means that there **isn't** the collapsed label. Using `app:boxBackgroundMode="none"` the text input area is not drawn as a box. It means that there **isn't** an outlined box. – Gabriele Mariotti Aug 30 '20 at 22:20

score 1 · Answer 2 · answered Nov 30 '18 at 15:42

Centered Text inside an outlined textfield isn't really a case we support. It's not actually mentioned at all in the guidance (https://material.io/design/components/text-fields.html)

It does look like a bug that the label text is centered when center gravity is applied. The easiest way to get that fixed would be to send a pr to us with the fix on https://github.com/material-components/material-components-android. Or you can file a bug here: https://issuetracker.google.com/issues/new?component=439535.

Is this still the case? Are centered TextInputLayouts ever going to be supported in a later version of Material Design? — Alex Conner, Apr 04 '22 at 14:30

OutlinedBox TextInputLayout and gravity center?

2 Answers2

Linked