Material OutlinedBox hint with androidx

user_11205781 0
Viewed 1265

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: enter image description here

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):

result

android-textinputlayout androidx material-design android-layout android
3 Answers
        <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>
user_135600800

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:

enter image description here

I hope this helps you

user_58917470

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"

enter image description here

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

user_20165620
Related