Liveness 2D

O SDK permite a personalização completa da interface do Liveness 2D, alinhando cores, fontes, ícones e layouts ao design do seu aplicativo. A customização é realizada através do Liveness2DTheme, que reúne configurações para todas as telas do fluxo: instruções, captura, carregamento e resultado.

Estrutura do Liveness2DTheme

O Liveness2DTheme é dividido em quatro partes principais:

Tela de Instruções (InstructionCustomsBuilder)
Tela de Captura (CustomCaptureScreenBuilder)
Tela de Carregamento (CustomLoadingDialogBuilder)
Tela de Resultado (CustomResultScreenBuilder)

Além disso, o tema permite definir fontes globais através de fontsKey.

Passo a Passo de Configuração

Defina cada parte do tema: Configure cada tela usando os construtores disponíveis.
Combine as partes no Liveness2DTheme: Reúna as configurações no tema principal.
Aplique o tema ao Liveness2DProvider: Passe o tema configurado ao Liveness2DProvider.

Exemplo de Configuração Geral

val liveness2DProvider = Liveness2DProvider(getLiveness2DThemeBuilder())
hubManager.addProvider(liveness2DProvider)

fun getLiveness2DThemeBuilder(): Liveness2DTheme {
    return Liveness2DTheme.Builder()
        .setInstructionsTheme(getLiveness2DInstructionsTheme())
        .setCaptureTheme(getLiveness2DCaptureScreenBuilder())
        .setLoadingDialogTheme(getLiveness2DLoadingBuilder())
        .setResultScreenTheme(getLiveness2DResultScreenBuilder())
        .setFontsKey(getLiveness2DFonts())
        .build()
}

Tela de Instruções

A tela de instruções fornece orientações sobre como realizar a captura do fluxo. Personalize os textos, ícones e botões.

Exemplo de Configuração

private fun getLiveness2DInstructionsTheme(): InstructionCustomsBuilder {
    return InstructionCustomsBuilder.Builder()
        .setTitleText("titulo exemplo customizado do Liveness 2D")
        .setCaptionText("subtitulo exemplo customizado da Liveness 2D")
        .setBackgroundColor("#32a852")
        .setDocumentTypesInstructionIcon(drawable.camera_alt)
        .setDocumentTypesInstructionText("descricao do primeiro campo da Liveness 2D")
        .setDocumentTipsInstructionText("descricao do segundo campo da Liveness 2D")
        .setDocumentTipsInstructionIcon(drawable.doc_img)
        .setContextImage(drawable.document_icon)
        .setBackButtonImg(drawable.camera_alt)
        .setBottomSheetColor("#3e32a8")
        .setTitleColor("#a83290")
        .setCaptionColor("#a86b32")
        .setDocumentTypesInstructionTextColor("#a8927d")
        .setDocumentTypesInstructionIconBackgroundColor("#cc6f16")
        .setDocumentTipsInstructionTextColor("#16cc3a")
        .setDocumentTipsInstructionIconBackgroundColor("#012e0a")
        .setBackButtonColor("#01012e")
        .setContinueButtonText("Continuar button")
        .setContinueButtonColor("#2e030a")
        .setContinueButtonTextColor("#0000ff")
        .setDocumentTypesInstructionIconBorderColor("#ff0000")
        .setDocumentTipsInstructionIconBorderColor("#00ff00")
        .setBottomSheetCornerRadius(15.0f)
        .build()
}

Tabela de Propriedades: Tela de Instruções

Propriedade	Descrição	Exemplo de Valor
`setBackButtonImg` (1)	Define a imagem do botão de voltar	R.drawable
`setBackButtonColor` (1)	Define a cor do botão de voltar	"#01012e" ou R.color
`setBackgroundColor` (2)	Define a cor de fundo da tela	"#170ec4"
`setContextImage` (2)	Define a imagem de contexto na tela	R.drawable
`setTitleColor` (3)	Define a cor do título	"#a83290" ou R.color
`setTitleText` (3)	Define o título da tela de instruções	"titulo exemplo customizado"
`setDocumentTypesInstructionIcon` (4)	Define o ícone para o tipo de documento	R.drawable
`setDocumentTypesInstructionIconBorderColor` (4)	Define a cor da borda do ícone do tipo de documento	"#ff0000" ou R.color
`setDocumentTypesInstructionIconBackgroundColor` (4)	Define a cor de fundo do ícone de tipo de documento	"#cc6f16" ou R.color
`setDocumentTipsInstructionIcon` (5)	Define o ícone para as dicas de instrução do documento	R.drawable
`setDocumentTipsInstructionIconBackgroundColor` (5)	Define a cor de fundo do ícone das dicas	"#012e0a" ou R.color
`setDocumentTipsInstructionIconBorderColor` (5)	Define a cor da borda do ícone das dicas	"#00ff00" ou R.color
`setBottomSheetColor` (6)	Define a cor do fundo da barra inferior	"#3e32a8" ou R.color
`setBottomSheetCornerRadius` (6)	Define o raio de canto da barra inferior	15.0f
`setCaptionColor` (7)	Define a cor do subtítulo	"#a86b32" ou R.color
`setCaptionText` (7)	Define o subtítulo da tela de instruções	"subtitulo exemplo customizado"
`setDocumentTypesInstructionTextColor` (8)	Define a cor do texto de instrução do tipo de documento	"#a8927d" ou R.color
`setDocumentTypesInstructionText` (8)	Define o texto de instrução para o tipo de documento	"descricao do primeiro campo"
`setDocumentTipsInstructionText` (9)	Define o texto de dica de instrução para o documento	"descricao do segundo campo"
`setDocumentTipsInstructionTextColor` (9)	Define a cor do texto das dicas de instrução do documento	"#16cc3a" ou R.color
`setContinueButtonText` (10)	Define o texto do botão de continuar	"Continuar button"
`setContinueButtonColor` (10)	Define a cor de fundo do botão de continuar	"#2e030a" ou R.color
`setContinueButtonTextColor` (10)	Define a cor do texto do botão de continuar	"#0000ff" ou R.color

Tela de Captura

A tela de captura é onde o usuário realiza o fluxo de captura. Personalize botões, indicadores e elementos visuais.

Exemplo de Configuração

private fun getLiveness2DCaptureScreenBuilder(): CustomCaptureScreenBuilder {
    return CustomCaptureScreenBuilder.Builder()
        .setBackButtonIcon(R.drawable.ic_back_arrow)
        .setBackButtonColor("#FF0000")
        .setCloseButtonIcon(R.drawable.ic_close)
        .setCloseButtonColor("#000000")
        .setBackgroundColor("#F5F5F5")
        .setInstructionsGuideTextColor("#4CAF50")
        .setInstructionsGuideText("texto inicial")
        .setInstructionsGuideBackgroundColor("#333333")
        .setCapturePreviewBorderColor("#FF0000")
        .setChallengeButtonBackgroundColor("#4CAF50")
        .setChallengeButtonTextColor("#FFFFFF")
        .setChallengeButtonLoadingColor("#FF5722")
        .setLoadingFirstArcColor("#4CAF50")
        .setLoadingSecondArcColor("#FF0000")
        .build()
}

Tabela de Propriedades: Tela de Captura

Propriedade	Descrição	Exemplo
`setBackButtonIcon`(1)	Ícone do botão voltar	R.drawable.ic_back_arrow
`setBackButtonColor`(1)	Cor do botão voltar	"#FF0000" ou R.color
`setInstructionsGuideText`(2)	Texto inicial para os desafios	“Posicione o rosto na moldura”
`setInstructionsGuideTextColor`(2)	Cor do texto das instruções	"#4CAF50" ou R.color
`setInstructionsGuideBackgroundColor`(2)	Cor de fundo das instruções	"#333333" ou R.color
`setCapturePreviewBorderColor`(3)	Cor da borda do preview	"#FF0000" ou R.color
`setCloseButtonIcon`(4)	Ícone do botão fechar	R.drawable.ic_close
`setCloseButtonColor`(4)	Cor do botão fechar	"#000000" ou R.color
`setChallengeButtonTextColor`(5)	Cor do texto do botão de desafio	"#FFFFFF" ou R.color
`setChallengeButtonBackgroundColor`(5)	Cor de fundo do botão de desafio	"#4CAF50" ou R.color
`setBackgroundColor`(6)	Cor de fundo	"#F5F5F5" ou R.color
`setChallengeButtonLoadingColor`(7)	Cor do indicador de carregamento do botão	"#FF5722" ou R.color
`setLoadingFirstArcColor`(8)	Cor do primeiro arco no indicador de carregamento	"#4CAF50" ou R.color
`setLoadingSecondArcColor`(9)	Cor do segundo arco no indicador de carregamento	"#FF0000" ou R.color

Tela de Carregamento

A tela de carregamento aparece durante o processamento de dados. Personalize o diálogo de carregamento com cores e tamanhos.

Exemplo de Configuração

private fun getLiveness2DLoadingBuilder(): CustomLoadingDialogBuilder {
    return CustomLoadingDialogBuilder.Builder()
        .setCircularProgressIndicatorColor("#4CAF50")
        .setBackgroundColor("#FFFFFF")
        .setCircularProgressIndicatorSize(100)
        .setCircularProgressIndicatorWidth(10)
        .build()
}

Tabela de Propriedades: Tela de Carregamento

Propriedade	Descrição	Exemplo de Valor
`setCircularProgressIndicatorColor`(1)	Define a cor do indicador de progresso circular	"#4CAF50" ou R.color
`setCircularProgressIndicatorSize`(1)	Define o tamanho do indicador de progresso circular (em pixels)	100 (Int)
`setCircularProgressIndicatorWidth`(1)	Define a largura do traço do indicador de progresso circular (em pixels)	10 (Int)
`setBackgroundColor`(2)	Define a cor de fundo do diálogo de carregamento	"#F5F5F5" ou R.color

Tela de Resultado

A tela de resultado indica sucesso ou falha. Personalize textos, ícones e cores.

Exemplo de Configuração

private fun getLiveness2DResultScreenBuilder(): CustomResultScreenBuilder {
    return CustomResultScreenBuilder.Builder()
        .setSuccessBackgroundColor("#4CAF50")
        .setSuccessIcon(R.drawable.ic_success)
        .setSuccessText("Processo concluído com sucesso!")
        .set

ErrorBackgroundColor("#FF0000")
        .setErrorIcon(R.drawable.ic_error)
        .setErrorText("Houve um erro no processo.")
        .setRetryButtonColor("#000000")
        .setRetryButtonText("Tentar novamente")
        .setRetryButtonTextColor("#FFFFFF")
        .build()
}

Tabela de Propriedades: Tela de Resultado

Propriedade	Descrição	Exemplo de Valor
`setErrorIcon`(1)	Ícone para o estado de erro	R.drawable.ic_error
`setSuccessIcon`(1)	Ícone para o estado de sucesso	R.drawable.ic_success
`setSuccessText`(2)	Texto para o estado de sucesso	"Documento capturado com sucesso!"
`setErrorText`(2)	Texto para o estado de erro	"Falha na captura do documento."
`setRetryButtonColor`(3)	Cor do botão de tentar novamente	"#000000" ou R.color
`setRetryButtonText`(3)	Texto do botão de tentar novamente	"Tentar novamente"
`setRetryButtonTextColor`(3)	Cor do texto do botão de tentar novamente	"#FFFFFF" ou R.color
`setErrorBackgroundColor`(4)	Cor de fundo para o estado de erro	"#FF0000" ou R.color
`setSuccessBackgroundColor` (4)	Cor de fundo para o estado de sucesso	"#4CAF50" ou R.color

Customização de Fontes

O Liveness2DTheme permite definir fontes globais para o fluxo. Você pode configurar as fontes utilizando referências ao recurso R.font ou o caminho completo para o arquivo .ttf armazenado no diretório assets.

Exemplo de Configuração de Fontes

private fun getLiveness2DFonts(): Map<Liveness2DFontsKey, *> {
    return mapOf(
        Liveness2DFontsKey.INSTRUCTIONS_TITLE_FONT to R.font.instructions_title, // Usando R.font
        Liveness2DFontsKey.INSTRUCTIONS_CAPTION_FONT to "fonts/instructions_caption.ttf", // Usando caminho no assets
        Liveness2DFontsKey.INSTRUCTIONS_DOCUMENT_TYPES_INSTRUCTIONS_FONT to "fonts/document_types_instructions.ttf",
        Liveness2DFontsKey.INSTRUCTIONS_DOCUMENT_TIPS_INSTRUCTIONS_FONT to R.font.document_tips_instructions,
        Liveness2DFontsKey.INSTRUCTIONS_BUTTON_FONT to "fonts/instructions_button.ttf",
        Liveness2DFontsKey.CAPTURE_INSTRUCTION_TEXT_FONT to R.font.capture_instruction_text,
        Liveness2DFontsKey.CAPTURE_GUIDE_TEXT_FONT to "fonts/capture_guide_text.ttf",
        Liveness2DFontsKey.CAPTURE_CHALLENGE_BUTTON_FONT to R.font.capture_challenge_button,
        Liveness2DFontsKey.RESULT_MESSAGE_FONT to "fonts/result_message.ttf",
        Liveness2DFontsKey.RESULT_RETRY_BUTTON_FONT to R.font.result_retry_button,
        Liveness2DFontsKey.LOADING_DIALOG_TEXT_FONT to "fonts/loading_dialog_text.ttf"
    )
}

Tabela de Referência: Fontes no Liveness2DTheme

Chave (`Liveness2DFontsKey`)	Descrição	Exemplo
`INSTRUCTIONS_TITLE_FONT`	Fonte para o título da tela de instruções	`R.font` ou `"caminho_no_assets.ttf"`
`INSTRUCTIONS_CAPTION_FONT`	Fonte para o subtítulo da tela de instruções	`R.font` ou `"caminho_no_assets.ttf"`
`INSTRUCTIONS_DOCUMENT_TYPES_INSTRUCTIONS_FONT`	Fonte para o texto de tipos de documentos	`R.font` ou `"caminho_no_assets.ttf"`
`INSTRUCTIONS_DOCUMENT_TIPS_INSTRUCTIONS_FONT`	Fonte para o texto de dicas na tela de instruções	`R.font` ou `"caminho_no_assets.ttf"`
`INSTRUCTIONS_BUTTON_FONT`	Fonte para o botão da tela de instruções	`R.font` ou `"caminho_no_assets.ttf"`
`CAPTURE_INSTRUCTION_TEXT_FONT`	Fonte para o texto de instruções na tela de captura	`R.font` ou `"caminho_no_assets.ttf"`
`CAPTURE_GUIDE_TEXT_FONT`	Fonte para o texto do guia na tela de captura	`R.font` ou `"caminho_no_assets.ttf"`
`CAPTURE_CHALLENGE_BUTTON_FONT`	Fonte para o botão de desafio na captura	`R.font` ou `"caminho_no_assets.ttf"`
`RESULT_MESSAGE_FONT`	Fonte para a mensagem de resultado	`R.font` ou `"caminho_no_assets.ttf"`
`RESULT_RETRY_BUTTON_FONT`	Fonte para o botão de tentar novamente na tela de resultado	`R.font` ou `"caminho_no_assets.ttf"`
`LOADING_DIALOG_TEXT_FONT`	Fonte para o texto exibido no diálogo de carregamento	`R.font` ou `"caminho_no_assets.ttf"`

Aplicando Fontes ao Tema

Após definir as fontes, aplique-as ao Liveness2DTheme no builder principal:

fun getLiveness2DThemeBuilder(): Liveness2DTheme {
    return Liveness2DTheme.Builder()
        .setInstructionsTheme(getLiveness2DInstructionsTheme())
        .setCaptureTheme(getLiveness2DCaptureScreenBuilder())
        .setLoadingDialogTheme(getLiveness2DLoadingBuilder())
        .setResultScreenTheme(getLiveness2DResultScreenBuilder())
        .setFontsKey(getLiveness2DFonts()) // Aplica o mapa completo de fontes
        .build()
}