How to group together a label and a textView together in Android?

Question

I want to group together the label (e.g. "StaffID") and the value of the textView (e.g. "S1234567") together, vertically, in Android. The label stays on top the textView value throughout while the user is typing in the value in the textView. Attached is the screenshot of how I want the UI to look like.

Click here to view the UI screenshot

I don't know how to represent the above question in xml code. I am using Constraintlayout as my layout for the activity. — Ian Bell, Jan 13 '21 at 08:55

Sekiro · Accepted Answer · 2021-01-13T09:03:59.663

1

Wrap the edit text with TextInputLayout with the desired android:hint attribute.

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

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

check the official docs for more info and features

edited Jan 13 '21 at 09:03

answered Jan 13 '21 at 08:57

Sekiro

1,537
1
7
21

I tried the android:hint attribute, but it deletes the label "StaffId" when I start typing in the text field value. I do not want the label to be deleted ever as it should always be on top of the text field input. – Ian Bell Jan 13 '21 at 09:00
my bad, the `androind:hint` attribute should be used with `EditText`, check the answer now – Sekiro Jan 13 '21 at 09:04
I have attached the screenshot of the output of your code in the answer section – Ian Bell Jan 13 '21 at 09:26

score 0 · Answer 2 · answered Jan 13 '21 at 10:36

<android.support.design.widget.TextInputLayout
    android:id="@+id/inputlayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:theme="@style/loginActivityHintStyle">

    <EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:hint="@string/the_hint_that_shows_with_the_editext"
        android:inputType="text"
        android:labelFor="@+id/edittext"
        android:maxLength="15"
        android:textColor="@drawable/login_activity_input_text_color" />

</android.support.design.widget.TextInputLayout>

How to group together a label and a textView together in Android?

2 Answers2

Linked