# UI Components

## UI Components

Your app's user interface and everything that users can see and interact with.

### VGSTextView

A user interface element that displays any revealed text to the user.

\*\* Check the [Text field guide](https://github.com/verygoodsecurity/docs-content-vault/blob/update-content/vgs-show/android-sdk/text-view/README.md)\*\*

```xml
<com.verygoodsecurity.vgsshow.widget.VGSTextView
    android:id="@+id/infoField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentPath="<CONTENT_PATH>" />
```

### VGSPDFView

User interface element to display a PDF content. `VGSPDFView` depends on open source Android [PdfViewer](https://github.com/verygoodsecurity/AndroidPdfViewer) library and can be used only with it.

\*\* Check the [PDF field guide](https://github.com/verygoodsecurity/docs-content-vault/blob/update-content/vgs-show/android-sdk/pdf-view/README.md)\*\*

```xml
<com.verygoodsecurity.vgsshow.widget.VGSPDFView
    android:id="@+id/pdfField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentPath="<CONTENT_PATH>" />
```

### VGSImageView

User interface element that is designed to display a revealed images to the user.

\*\* Check the [Image field guide](https://github.com/verygoodsecurity/docs-content-vault/blob/update-content/vgs-show/android-sdk/image-view/README.md)\*\*

```xml
<com.verygoodsecurity.vgsshow.widget.VGSImageView
    android:id="@+id/imageField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:contentPath="<CONTENT_PATH>" />
```

## Advanced Settings

### Getting content from Nested JSON Structure

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

{% tabs %}
{% tab title="XML" %}

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

```

{% endtab %}

{% tab title="Kotlin" %}

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

{% endtab %}

{% tab title="Java" %}

```java
VGSTextView infoField = findViewById(R.id.infoField);
infoField.setContentPath("card_data.card_number");

```

{% endtab %}
{% endtabs %}

### Copy text to clipboard

**VGS Show SDK** provides an option for your end-users to copy revealed text to clipboard after request is completed. You can optionally enable or disable this feature for end-users. Also, you may choose format of data that will be copied to clipboard before you give users the option to paste it.

With `CopyTextFormat` class a you can change the format of a text which might be copied:

* **RAW**: A text string without any formatting.
* **FORMATTED**: A text string which is equal to the text from a field. Usually, VGS input fields applies text formatting for better visual inspection.

Use `copyToClipboard` for VGSTextView to copy revealed text.

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
infoField.copyToClipboard(VGSTextView.CopyTextFormat.RAW)

```

{% endtab %}

{% tab title="Java" %}

```java
infoField.copyToClipboard(VGSTextView.CopyTextFormat.RAW);

```

{% endtab %}
{% endtabs %}

With `OnTextCopyListener` a developer can detect when a user copies text.

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
infoField?.addOnCopyTextListener(object : VGSTextView.OnTextCopyListener {
    override fun onTextCopied(view: VGSTextView, format: VGSTextView.CopyTextFormat) {\n
    }
})
    
```

{% endtab %}

{% tab title="Java" %}

```java
infoField.addOnCopyTextListener(new VGSTextView.OnTextCopyListener() {
  @Override
  public void onTextCopied(VGSTextView view, VGSTextView.CopyTextFormat format) {\n
  }
});

```

{% endtab %}
{% endtabs %}


---

# 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-show/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.