Material OutlinedBox hint with androidx

Question

I am referring this: Outlined Edit Text from Material Design where the answer relates to the outdated support libraries rather than androidx.

How to achieve creating the OutlinedBox with the hint on the top left frame rather than inside the box? Have spent the entire morning unsuccessful. What I want is this:

My graddle:

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.1.0'

My app Theme:

style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar"

My layout:

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/textField"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                android:hint="Full name" >

                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    />
            </com.google.android.material.textfield.TextInputLayout>

My result (the frame is continuous, without the hint embedded in the top left corner):

https://stackoverflow.com/questions/60898946/materialcomponents-textinputlayout-outlinedbox-it-doesnt-work-properly-boxbackg/60910419#60910419 — MMG, May 16 '20 at 08:46
And what is the issue? When the field is unfocused and empty the floating label is collapsed inside the field. — Gabriele Mariotti, May 16 '20 at 10:35
@GabrieleMariotti, the issue is that in my result the frame is continuous, without the hint embedded in the top left corner. I have added the clarification inside the question — Bbosap, May 17 '20 at 15:55
@Bbosap It is the [standard behavior](https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md#outlined-text-field) for an Outlined text field. When the field is empty and unfocused the label is inside. When the field is focused or not empty the label is collapsed on the top. — Gabriele Mariotti, May 17 '20 at 16:10
@MMG, thanks for the link, but it does not address the need I have (the hint to be FIXED in the top-left side of the frame, embedded). Additionally, the solution from there shows a kind of workaround for the HINT by setting it with android:text attribute and playing with colors — Bbosap, May 17 '20 at 17:02
@GabrieleMariotti, ohhh.. if it is so then I have misinterpreted their picture - it really looks like there is an option to apply 2 hints to the textbox: one to the frame and one inside — Bbosap, May 17 '20 at 17:05

score 1 · Answer 1 · answered May 17 '20 at 10:12

1

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/etProposalTitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/medium"
                android:hint="Title."
                android:inputType="text"
                android:textSize="18sp" />
        </com.google.android.material.textfield.TextInputLayout>

answered May 17 '20 at 10:12

Zahid Iqbal

394
6
12

How does it look like? You are not using an OutlinedBox text field for example, and what are the differences with the same layout in the question? – Gabriele Mariotti May 17 '20 at 16:12
@DeveloperZee It does not work for me. The hint stays inside the textbox and moves away when clicked. What I want is to have the hint fixed in the top-left corner of the frame, and to have another hint inside the textbox (I have added the sample picture inside the question) – Bbosap May 17 '20 at 16:44
@GabrieleMariotti, I am applying the OulinedBox style (see my TextInputLayout section). I want to have in the end 2 hints to the textbox: one to be FIXED in the top left of the outer frame and one to be inside the textbox itself, which disappears when clicked - see "Label" and "Input text" hints inside the picture I attached – Bbosap May 17 '20 at 16:46

score 1 · Accepted Answer · answered May 18 '20 at 07:55

Try below code:

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/etlFirst"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            app:hintTextColor="@color/colorPrimary"
            android:focusable="true"
            android:hint="Label">
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/etFirst"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColorHint="@color/colorAccent"
                android:hint="PlaceHolder"/>
        </com.google.android.material.textfield.TextInputLayout>

To displaying two hints try below code in .java file:

etFirst.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (hasFocus) {
                etFirst.setHint("Place Holder");

            } else {
                etFirst.setHint("Label");
            }
        }
    });

Output for above code is:

I hope this helps you

score 1 · Answer 3 · answered Aug 04 '20 at 19:16

If you want to display at the same time the hint label on top left and a placeholder text inside the EditText you can use:

app:placeholderText: to add a placeholder text in the EditText
android:hint: to add a floating label

They can work together:

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:hint="Label"
        app:placeholderText="Placeholder Text"

Note: it requires at least the version 1.2.0-alpha03.

Material OutlinedBox hint with androidx

3 Answers3