# VGSTextInputLayout

**Material component** which wraps the VGS fields to show a floating label when the hint is hidden due to user inputting text.

```xml
<com.verygoodsecurity.vgscollect.widget.VGSTextInputLayout
    android:id="@+id/cardFieldLay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hint="Card Number">

    <com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
        android:id="@+id/cardField"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fieldName="card_number"
        app:numberDivider="-"/>

</com.verygoodsecurity.vgscollect.widget.VGSTextInputLayout>
```

### Additional XML attributes <a href="#additional-xml-attributes" id="additional-xml-attributes"></a>

| **Attribute**                     | **Description**                                                                                                                                                              |
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| app:errorEnabled                  | Whether the layout is laid out as if an error will be displayed.                                                                                                             |
| app:errorTextAppearance           | Sets the text color and size for the error message from the specified `TextAppearance` resource.                                                                             |
| app:hintTextAppearance            | Sets the collapsed hint text color from the specified `ColorStateList` resource.                                                                                             |
| app:counterOverflowTextAppearance | Sets the text color and size for the overflowed character counter using the specified `TextAppearance` resource.                                                             |
| app:counterTextAppearance         | Sets the text color and size for the character counter using the specified `TextAppearance` resource.                                                                        |
| app:helperTextTextAppearance      | Sets the text color and size for the helper text from the specified `TextAppearance` resource.                                                                               |
| app:helperText                    | Returns the helper message that was set to be displayed with `setHelperText(CharSequence)` or null if no helper text was set or if helper text functionality is not enabled. |
| app:passwordToggleEnabled         | When enabled, a button is placed at the end of the EditText which enables the user to switch between the field's input being visibly disguised or not.                       |
| app:passwordToggleTint            | Applies a tint to the the password visibility toggle drawable.                                                                                                               |
| app:passwordToggleDrawable        | Applies a drawable on the the password toggle.                                                                                                                               |
| app:hintEnabled                   | Sets whether the floating label functionality is enabled or not in this layout.                                                                                              |
| app:hintTextColor                 | The color of the label when it is collapsed and the text field is active.                                                                                                    |
| app:hintAnimationEnabled          | Set whether any hint state change, due to being focused or non-empty text, are animated.                                                                                     |
| app:boxBackgroundModes            | Set the box background more(filled, outline, or none).                                                                                                                       |
| app:boxBackgroundColor            | Set the resource used for the filled box’s background color.                                                                                                                 |
| app:boxStrokeColor                | Set the outline box’s border color.                                                                                                                                          |
| app:boxCornerRadiusTopStart       | Set the box’s top start corner radius.                                                                                                                                       |
| app:boxCornerRadiusTopEnd         | Set the box’s top end corner radius.                                                                                                                                         |
| app:boxCornerRadiusBottomStart    | Set the box’s bottom start corner radius.                                                                                                                                    |
| app:boxCornerRadiusBottomEnd      | Set the box’s bottom end corner radius.                                                                                                                                      |
| app:boxCornerRadius               | Set the box corners radius.                                                                                                                                                  |
| app:counterEnabled                | Whether the character counter functionality is enabled or not in this layout.                                                                                                |
| app:counterMaxLength              | Sets the max length to display at the character counter.                                                                                                                     |
| app:startIconTint                 | Applies a tint to the start icon drawable. Does not modify the current tint mode, which is **SRC\_IN** by default.                                                           |
| app:startIconDrawable             | Set the icon at the beginning of field.                                                                                                                                      |
| app:endIconTint                   | Applies a tint to the end icon drawable. Does not modify the current tint mode, which is **SRC\_IN** by default.                                                             |
| app:endIconDrawable               | Set the icon to use for the end icon.                                                                                                                                        |
| app:endIconModes                  | Set up the **TextInputLayout.EndIconMode**. When set, a button is placed at the end of the EditText which enables the user to perform the specific icon's functionality.     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/android-sdk/vgstextinputlayout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.