Jetpack Compose

VGS Show Android SDK provide support for integration with apps that use Jetpack Compose UI building toolkit by providing composable wrappers for all VGS custom view. VGS Show composable wrappers are designed to make integration easier and more straight forward by taking care of all needed state and lifecycle events.

Integration

Update VGS Collect Android SDK version to >1.3.2

dependencies {
    implementation 'com.verygoodsecurity:vgsshow:1.3.2'
}

Select composable wrapper which meet your needs:

• VGSTextViewWrapper

• VGSImageViewWrapper

• VGSPDFViewWrapper

Add composable wrapper:

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.verygoodsecurity.vgsshow.VGSShow
import com.verygoodsecurity.vgsshow.core.listener.VGSOnResponseListener
import com.verygoodsecurity.vgsshow.core.network.model.VGSResponse
import com.verygoodsecurity.vgsshow.widget.compose.VGSTextViewWrapper

class ComposeActivity : AppCompatActivity(), VGSOnResponseListener {

    private val show: VGSShow by lazy {
        VGSShow.Builder(
            this,
            "<VAULT_ID>"
        ).build()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Content(collect = collect)
            }
        }
    }

    override fun onResponse(response: VGSResponse) {
        // Handle response
    }

    @Composable
    private fun Content(show: VGSShow?) {
        Column {
            VGSTextViewWrapper(
                show = show,
                contentPath = "<CONTENT_PATH>",
                modifier = Modifier.fillMaxWidth(),
                onViewCreate = {
                    it.setHint("Secured data")
                }
            )
        }
    }
}

All composable wrappers share same public interface:

• show - VGSShow instance.

• contentPath - text that's used for data transfer between field and VGS proxy. Usually, it is similar to field-name in JSON path in your inbound route filters.

• modifier - modifier which applied to AndroidView wrapper.

• onViewCreate - a callback to be invoked when VGS view is created.

• onViewUpdate - a callback to be invoked after the view is inflated and upon recomposition to update the information and state of the view.

Best place to customize composable wrapper is onViewCreate:

@Composable
private fun Content(show: VGSShow?) {
    Column {
        VGSTextViewWrapper(
            show = show,
            contentPath = "<CONTENT_PATH>",
            modifier = Modifier.fillMaxWidth(),
            onViewCreate = {
                it.setHint("Secured data")
            }
        )
    }
}