# 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 %}