Home » Android » android – OutlinedBox TextInputLayout and gravity center?

android – OutlinedBox TextInputLayout and gravity center?

Posted by: admin May 14, 2020 Leave a comment

Questions:

How to achieve centered new OutlinedBox style with TextInputLayout?

Current behavior:

left and center

<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?

How to&Answers:

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:

enter image description here

Answer:

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.