# UI Components

## UI Components

Your app's user interface and everything that users can see and interact with. **VGS Collect SDK** provides a variety of pre-built UI fields that allow you easy to build secure user interface for your app.

### VGSCardNumberEditText

A user interface element that displays text to the user in card number format. Current widget supports validation with **Luhn** algorithm for most popular credit card brands.

\*\* Check the [VGSCardNumberEditText guide.](#vgscardnumberedittext)\*\*

```xml
<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/cardNumberField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="cardNumber"
    app:hint="Card number"
    app:numberDivider=" "
    app:cardBrandIconGravity="end"/>
```

### ExpirationDateEditText

Provides a user interface element for expiration date input for credit cards.

\*\* Check the [ExpirationDateEditText guide.](#expirationdateedittext)\*\*

> The card expiration date field validate any date starting from current month during next 20 years.

```xml
<com.verygoodsecurity.vgscollect.widget.ExpirationDateEditText
    android:id="@+id/cardExpDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="expiration_date"
    app:datePickerModes="input"
    app:datePattern="MM/yy"/>
```

### RangeDateEditText

Provides a user interface element for date input. It allows to define a range of dates to select from.

\*\* Check the [RangeDateEditText guide.](#rangedateedittext)\*\*

> The range date field validate any date in the range defined with min and max dates.

```xml
<com.verygoodsecurity.vgscollect.widget.RangeDateEditText
    android:id="@+id/rangeDateField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="range_date"
    app:datePickerModes="input"
    app:datePattern="MM/dd/yyyy"
    app:minDate="10/10/2020"
    app:maxDate="10/10/2026"/>
```

### CardVerificationCodeEditText

Provides a user interface element for entering verification codes for payment cards.

\*\* Check the [CardVerificationCodeEditText guide.](#cardverificationcodeedittext)\*\*

```xml
<com.verygoodsecurity.vgscollect.widget.CardVerificationCodeEditText
    android:id="@+id/cardCVCField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_cvc"/>
```

### PersonNameEditText

Provides a user interface element that represents a person's name.

\*\* Check the [PersonNameEditText guide.](#personnameedittext)\*\*

```xml
<com.verygoodsecurity.vgscollect.widget.PersonNameEditText
    android:id="@+id/cardHolderNameField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_holder_name"/>
```

### SSNEditText

Provides a user interface element that represents a Social Security Number (SSN).

\*\* Check the [SSNEditText guide.](#ssnedittext)\*\*

```xml
<com.verygoodsecurity.vgscollect.widget.SSNEditText
    android:id="@+id/ssnField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="ssn_field_name"/>
```

### VGSEditText

A base user interface element that displays text.

\*\* Check the [EditText guide.](#vgsedittext)\*\*

```xml
<com.verygoodsecurity.vgscollect.widget.VGSEditText
    android:id="@+id/infoField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="info_field_name"
    app:inputType="text"/>
```

### VGSTextInputLayout

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

\*\* Check the [VGSTextInputLayout guide.](#vgstextinputlayout)\*\*

```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>
```

## Advanced Settings

### Setting Custom JSON Structure

When you need to show revealed data from a specific json structure you may do it by adding `.` notation to fieldName-string. Each `.` in a **fieldName** represents a new level of nesting. New field name string could be set into `app:fieldName` or `setFieldName` method.

> If there are two fieldNames with equal names - the earlier will be overwritten.

```kotlin
// Define field names
val userId = "userId"
val cardNumberFieldKey = "card_data.card_number"
val cardCVCFieldKey = "card_data.cvc"

// Example of transformed JSON structure
{
   "userId": "id12345",
   “card_data: {
      “card_number”:  411111111111111”,
      “cvc”: “123”
   }”
}
```

The following example shows how it can be used.

```xml
<com.verygoodsecurity.vgscollect.widget.VGSCardNumberEditText
    android:id="@+id/infoField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fieldName="card_data.card_number"/>

```

```kotlin
val infoField = findViewById<VGSCardNumberEditText>(R.id.infoField)
infoField.setFieldName("card_data.card_number")
    
```

```java
VGSCardNumberEditText infoField = findViewById(R.id.infoField);
infoField.setFieldName("card_data.card_number");

```

### Compare fields content

You can compare fields content using `isContentEquals` function. This function compares raw fields content ignoring all transformations and dividers.

The most common use case for this feature is password verification.

> You don't need to bind the verification view to `VGSCollect`, otherwise the content of the verification view will be added to a back-end request payload.

{% code title="Kotlin" %}

```kotlin

val passwordField = findViewById<VGSEditText>(R.id.passwordField)
val passwordConfirmField = findViewById<VGSEditText>(R.id.passwordConfirmField)
val isContentEquals = passwordField.isContentEquals(passwordConfirmField)
    
```

{% endcode %}

{% code title="Java" %}

```java

VGSEditText passwordField = findViewById(R.id.passwordField);
VGSEditText passwordConfirmField = findViewById(R.id.passwordConfirmField);
Boolean isContentEquals = passwordField.isContentEquals(passwordConfirmField);

```

{% endcode %}

Check the [compare fields sample](https://github.com/verygoodsecurity/android-sdk-demo/tree/master/collect/src/main/java/com/vgscollect/androiddemo/samples/compare#compare-sample).

To learn more about all of the features please check out the documentation [here](/vault/developer-tools/vgs-collect/android-sdk/samples.md).

### Show/Hide keyboard

You should use `showKeyboard()` or `hideKeyboard()` functions of VGS Collect SDK views instead of `InputMethodManager.showSoftInput` and `InputMethodManager.hideSoftInputFromWindow` as `InputMethodManager` require android EditText reference to work correctly.

{% code title="Kotlin" %}

```kotlin

val vgsEditText = findViewById<VGSEditText>(R.id.vgsEditText)
vgsEditText.requestFocus()
vgsEditText.showKeyboard()
    
```

{% endcode %}

{% code title="Java" %}

```java

VGSEditText vgsEditText = findViewById(R.id.vgsEditText);
vgsEditText.requestFocus();
vgsEditText.showKeyboard();

```

{% endcode %}


---

# 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/ui-components.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.