Liveness 3D - Tema Interativo

Plataforma interativa de customizações do Liveness3DTheme() para dispositivos Android

1. Guia Rápido

O Tema Interativo para personalização do SDK Android é uma plataforma essencial que permite a seleção de cores, bordas, arredondamento de bordas e sombreamento. Isso simplifica a geração de código, possibilitando a fácil implementação no seu Liveness 3D.

Aprenda a personalizar o Liveness 3D Android e integrar as propriedades customizadas em seu código de forma simples e ágil.

Siga os passos para interagir com o Tema Interativo.

Antes de começar

Primeiramente, é essencial seguir algumas etapas sequenciais.

  • Uma delas envolve a atenção aos arquivos XML de cores, localizados na pasta "res/values/colors.xml" dentro do diretório Android, se o arquivo existe apenas edite, caso contrário, crie o arquivo.
  • Além disso, será necessário importar as fontes desejadas para a pasta de fontes do seu ambiente Android, arrastando e soltando seus arquivos .tff na pasta "assets res/fonts.xml".

Telas para customização

O Tema Interativo apresenta três telas de customização que orientam o usuário durante a execução do Liveness 3D:

  • Na primeira tela, encontramos as instruções para a preparação do usuário, sendo o ponto inicial de interação com o Liveness 3D.
  • A segunda tela é destinada à retentativa. Caso o usuário precise refazer a jornada, essa tela fornece diretrizes, incluindo um exemplo de foto ideal.
  • A terceira tela consiste na tela de resultado. Nela, o usuário recebe a mensagem de conclusão do processo de Liveness.
Sequência de telas exibidas no iframe para customização.

Sequência de telas exibidas no iframe para customização.

Propriedades customizáveis

As propriedades destinadas à customização estão localizadas na segunda coluna do iframe. Nesta coluna, é possível encontrar o nome da propriedade (1) e sua respectiva descrição (2).

Coluna de propriedades customizáveis.

Coluna de propriedades customizáveis.

Para exportar o código das customizações

Passo 1: visualize o código

Após concluir todas as personalizações, é necessário clicar no botão "código" (1) para visualizar todas as modificações realizadas e, em seguida, exportá-las para incorporação no seu projeto Android.

Localização do botão "código" para exportação das customizações.

Localização do botão "código" para exportação das customizações.

Passo 2: importe as fontes

Coloque os arquivos de fontes na pasta "assets res/fonts.xml".

Passo 3: inicie o Liveness3DTheme()

Utilize o exemplo a seguir para iniciar o builder() do tema com a classe Liveness3DTheme() do liveness3d-sdk:

val liveness3DTheme =
          Liveness3DTheme
                  .Builder()
             		  //As propiedades selecionadas serão colocadas aqui.
             			.build()

Passo 4: identifique e implemente as propriedades

O XML de cores inclui uma série de propriedades que podem ser customizadas, divididas em categorias como Guidance, Botões, Ready e Retry Screen, entre outras.

O código das propriedades customizadas também reflete essa série mencionada anteriormente. Identifique e implemente de acordo com as respetivas customizações.


2. Tema Interativo

Use a plataforma para iniciar as customizações do Liveness 3D.


3. Propriedades customizáveis

Abaixo, estão mapeadas as propriedades para customização do Liveness3DTheme.

Customizações de telas Liveness3DTheme

Guidance

AtributoTipoDescrição
guidanceCustomizationBackgroundColors
guidanceCustomizationForegroundColorInt?Modifica a cor de fundo quando estiver em primeiro plano.
guidanceCustomizationHeaderFontTypeface?Adiciona uma fonte customizada para o header.
guidanceCustomizationSubtextFontTypeface?Adiciona uma fonte customizada para o subtext.

Botões

AtributoTipoDescrição
guidanceCustomizationButtonFontTypeface?Adiciona uma fonte customizada para o texto do botão.
guidanceCustomizationButtonTextNormalColorInt?Modifica a cor do texto do botão na sua condição padrão.
guidanceCustomizationButtonBackgroundNormalColorInt?Modifica a cor de fundo do botão na sua condição padrão.
guidanceCustomizationButtonTextHighlightColorInt?Modifica a cor do texto do botão na sua condição de destaque.
guidanceCustomizationButtonBackgroundHighlightColorInt?Modifica a cor de fundo do botão na sua condição de destaque.
guidanceCustomizationButtonTextDisabledColorInt?Modifica a cor do texto do botão na sua condição de desabilitado.
guidanceCustomizationButtonBackgroundDisabledColorInt?Modifica a cor de fundo do botão na sua condição de desabilitado.
guidanceCustomizationButtonBorderColorInt?Modifica a cor da borda do botão.
guidanceCustomizationButtonBorderWidthInt?Modifica a largura da borda do botão.
guidanceCustomizationButtonCornerRadiusInt?Modifica o tamanho do arredondamento das bordas do botão.

Ready Screen

AtributoTipoDescrição
guidanceCustomizationReadyScreenHeaderFontTypeface?Adiciona uma fonte customizada para o header.
guidanceCustomizationReadyScreenHeaderTextColorInt?Modifica a cor da fonte do texto.
guidanceCustomizationReadyScreenHeaderAttributedStringString?Adiciona um texto para o header.
guidanceCustomizationReadyScreenSubtextFontTypeface?Adiciona uma fonte customizada para o subtext.
guidanceCustomizationReadyScreenSubtextTextColorInt?Modifica a cor da fonte do texto.
guidanceCustomizationReadyScreenSubtextAttributedStringString?Adiciona um texto para o subtext.
guidanceCustomizationReadyScreenOvarFillColorInt?***
guidanceCustomizationReadyScreenTextBackgroundColorInt?Modifica a cor de fundo.
guidanceCustomizationReadyScreenTextBackgroundCornerRadiusInt?Modifica o tamanho do arredondamento das bordas.

Retry Screen

AtributoTipoDescrição
guidanceCustomizationRetryScreenHeaderFontTypeface?Adiciona uma fonte customizada para a mensagem do header.
guidanceCustomizationRetryScreenHeaderTextColorInt?Modifica a cor da fonte do header.
guidanceCustomizationRetryScreenHeaderAttributedStringStringAdiciona uma mensagem personalizada no header.
guidanceCustomizationRetryScreenSubtextFontTypeface?Adiciona uma fonte customizada para a mensagem do subtext.
guidanceCustomizationRetryScreenSubtextTextColorInt?Modifica a cor da fonte do subtext.
guidanceCustomizationRetryScreenSubtextAttributedStringString?Adiciona uma mensagem personalizada no subtext.
guidanceCustomizationRetryScreenImageBorderColorInt?Modifica a cor da borda do preview da imagem de retentativa.
guidanceCustomizationRetryScreenImageBorderWidthInt?Modifica a largura da borda do preview da imagem de retentativa.
guidanceCustomizationRetryScreenImageCornerRadiusInt?Modifica o tamanho do arredondamento das bordas.
guidanceCustomizationRetryScreenOvarStrokeColorInt?Modifica a cor da borda do preview oval da imagem de retentativa.

Result Screen Customization

AtributoTipoDescrição
resultScreenCustomizationAnimationRelativeScaleFloat
resultScreenCustomizationForegroundColorIntModifica a cor de fundo quando estiver em primeiro plano.
resultScreenCustomizationBackgroundColorsIntModifica a cor de fundo e caso receba duas cores diferentes cria um degradê.
resultScreenCustomizationActivityIndicatorColor@DrawableRes/IntModifica a cor do activity indicator.
resultScreenCustomizationCustomActivityIndicatorImageIntAdiciona uma imagem customizada para o activity indicator.
resultScreenCustomizationCustomActivityIndicatorRotationIntervarInt
resultScreenCustomizationCustomActivityIndicatorAnimationInt
resultScreenCustomizationShowUploadProgressBarBooleanPropriedade booleana que ativa a visualização da barra de progresso.
resultScreenCustomizationUploadProgressFillColorIntModifica a cor do preenchimento da barra de progresso.
resultScreenCustomizationUploadProgressTrackColorIntModifica a cor da barra de progresso.
resultScreenCustomizationResultAnimationBackgroundColorIntModifica a cor de fundo da imagem que aparece após a animação finalizar.
resultScreenCustomizationResultAnimationForegroundColorIntModifica a cor do icone que vai aparecer em primeiro plano após a animação finalizar.
resultScreenCustomizationResultAnimationSuccessBackgroundImage@DrawableRes/IntAdiciona uma imagem customizada após a animação finalizar com sucesso.
resultScreenCustomizationResultAnimationUnSuccessBackgroundImage@DrawableRes/IntAdiciona uma imagem customizada após a animação finalizar com erro.
resultScreenCustomizationCustomResultAnimationSuccessInt
resultScreenCustomizationCustomResultAnimationUnSuccess@DrawableRes/Int
resultScreenCustomizationCustomStaticResultAnimationSuccess@DrawableRes/Int
resultScreenCustomizationCustomStaticResultAnimationUnSuccess@DrawableRes/Int
resultScreenCustomizationMessageFontTypeface?

Oval Customization

AtributoTipoDescrição
ovarCustomizationStrokeWidthInt?Modifica a largura da borda da camada oval.
ovarCustomizationStrokeColorInt?Modifica a cor da borda da camada oval.
ovarCustomizationProgressStrokeWidthInt?Modifica a largura da borda do progresso da camada oval.
ovarCustomizationProgressColor1Int?Modifica a cor da borda de progresso da camada oval.
ovarCustomizationProgressColor2Int?Modifica a cor da borda de progresso da camada oval.
ovarCustomizationProgressRadialOffsetInt?Modifica o distânciamento da borda de progresso da camada oval.

Frame Customization

AtributoTipoDescrição
frameCustomizationBorderWidthInt?Modifica a largura da borda do frame.
frameCustomizationCornerRadiusInt?Modifica o tamanho do arredondamento das bordas do frame.
frameCustomizationBorderColorInt?Modifica a cor da borda do frame.
frameCustomizationBackgroundColorInt?Modifica a cor de fundo do frame.
frameCustomizationElevationInt?

Overlay Customization

AtributoTipoDescrição
overlayCustomizationBackgroundColorInt?Modifica a cor de fundo da camada de overlay.
overlayCustomizationBrandingImage@DrawableRes/Int?Adiciona uma imagem na camada de overlay.
overlayCustomizationShowBrandingImageBooleanPropriedade booleana que ativa a visualização da imagem customizada.

Feedback Customization

AtributoTipoDescrição
feedbackCustomizationCornerRadiusInt?Modifica o tamanho do arredondamento das bordas da barra.
feedbackCustomizationBackgroundColorInt?Modifica a cor de fundo da barra.
feedbackCustomizationTextColorInt?Modifica a cor do texto do feedback.
feedbackCustomizationTextFontTypeface?Adiciona uma fonte customizada para o texto do feedback.
feedbackCustomizationEnablePulsatingTextBoolean

Cancel Button

AtributoTipoDescrição
cancelButtonCustomizationCustomImageUIImageCancela a operação e retorna para view anterior.
cancelButtonCustomizationLocationCancelButtonLocationEnum que determina a posição do botão. Esquerda, deireita ou desabilitado.

Exit Animation Style

AtributoTipoDescrição
exitAnimationStyleLiveness3DExitAnimationStyle?

Result Screen Message

AtributoTipoDescrição
resultScreenOverrideSuccessMessageString

Customização dos textos Liveness3DTextKey

Nova forma de customização

Agora a activity Liveness3DActivity possui um novo parâmetro (PARAM_TEXTS) que recebe um HashMap tendo como chave o tipo Liveness3DTextKey e como valor uma string.
Dessa forma a customização de textos da FaceTec não é feita mais pelo arquivo strings.xml.

val texts = hashMapOf<Liveness3DTextKey, String>(
    Liveness3DTextKey.READY_HEADER_1 to "Vamos Iniciar",
    Liveness3DTextKey.READY_HEADER_2 to "a jornada",
    Liveness3DTextKey.READY_MESSAGE_1 to "Instruções de como fazer",
    Liveness3DTextKey.READY_MESSAGE_2 to "o desafio do Liveness 3D.",
)

startActivityForResult?.launch(Intent(this, Liveness3DActivity::class.java).apply {
    putExtra(Liveness3DActivity.PARAM_LIVENESS3D_USER, liveness3DUser)
    putExtra(Liveness3DActivity.PARAM_TEXTS, texts)
})

Novas tags

Ready Screen

Novo identificadorAntiga tag do arquivo XML
READY_HEADER_1FaceTec_instructions_header_ready_1
READY_HEADER_2FaceTec_instructions_header_ready_2
READY_MESSAGE_1FaceTec_instructions_message_ready_1
READY_MESSAGE_2FaceTec_instructions_message_ready_2
READY_BUTTONFaceTec_action_im_ready

Retry Screen

Novo identificadorAntiga tag do arquivo XML
RETRY_HEADERFaceTec_retry_header
RETRY_SUBHEADERFaceTec_retry_subheader_message
RETRY_MESSAGE_SMILEFaceTec_retry_instruction_message_1
RETRY_MESSAGE_LIGHTINGFaceTec_retry_instruction_message_2
RETRY_MESSAGE_CONTRASTFaceTec_retry_instruction_message_3
RETRY_YOUR_PICTUREFaceTec_retry_your_image_label
RETRY_IDEAL_PICTUREFaceTec_retry_ideal_image_label
RETRY_BUTTONFaceTec_action_try_again

Result Screen

Novo identificadorAntiga tag do arquivo XML
RESULT_UPLOAD_MESSAGEFaceTec_result_facescan_upload_message
RESULT_SUCCESS_MESSAGEFaceTec_result_success_message

Feedback

Novo identificadorAntiga tag do arquivo XML
FEEDBACK_CENTER_FACEFaceTec_feedback_center_face
FEEDBACK_FACE_NOT_FOUNDFaceTec_feedback_face_not_found
FEEDBACK_FACE_NOT_LOOKING_STRAIGHT_AHEADFaceTec_feedback_face_not_looking_straight_ahead
FEEDBACK_FACE_NOT_UPRIGHTFaceTec_feedback_face_not_upright
FEEDBACK_HOLD_STEADYFaceTec_feedback_hold_steady
FEEDBACK_MOVE_PHONE_AWAYFaceTec_feedback_move_phone_away
FEEDBACK_MOVE_PHONE_CLOSERFaceTec_feedback_move_phone_closer
FEEDBACK_MOVE_PHONE_TO_EYE_LEVELFaceTec_feedback_move_phone_to_eye_level
FEEDBACK_USE_EVEN_LIGHTINGFaceTec_feedback_use_even_lighting
FEEDBACK_FRAME_YOUR_FACEFaceTec_presession_frame_your_face
FEEDBACK_LOOK_STRAIGHT_IN_OVALFaceTec_presession_position_face_straight_in_oval
FEEDBACK_HOLD_STEADY_1FaceTec_presession_hold_steady_1
FEEDBACK_HOLD_STEADY_2FaceTec_presession_hold_steady_2
FEEDBACK_HOLD_STEADY_3FaceTec_presession_hold_steady_3
FEEDBACK_REMOVE_DARK_GLASSESFaceTec_presession_remove_dark_glasses
FEEDBACK_NEUTRAL_EXPRESSIONFaceTec_presession_neutral_expression
FEEDBACK_EYES_STRAIGHT_AHEADFaceTec_presession_eyes_straight_ahead
FEEDBACK_CONDITIONS_TOO_BRIGHTFaceTec_presession_conditions_too_bright
FEEDBACK_BRIGHTEN_YOUR_ENVIRONMENTFaceTec_presession_brighten_your_environment