Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OutlinedBox TextInputLayout and gravity center?

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?

like image 413
Kikju Avatar asked Nov 21 '18 13:11

Kikju


People also ask

What is TextInputLayout?

Android TexInputLayout extends LinearLayout. The primary use of a TextInputLayout is to act as a wrapper for EditText(or its descendant) and enable floating hint animations. Rule of Thumb : TextInputLayout should wrap TextInputEditText instead of the normal EditText.

How do you set different gravity for TextInputLayout hint and text in Android?

To set a different gravity for the EditText , don't set any gravity attributes in the layout, then set the EditText 's gravity programmatically, in your code. That is, after setContentView() , use findViewById() to get the EditText , then call setGravity(Gravity. CENTER_HORIZONTAL) on it.


2 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

like image 145
Gabriele Mariotti Avatar answered Oct 03 '22 21:10

Gabriele Mariotti


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.

like image 38
Cameron Ketcham Avatar answered Oct 03 '22 21:10

Cameron Ketcham