Facetec

O SDK permite personalizar a interface da Facetec. Através do FacetecTheme, é possível ajustar cores, fontes, textos e até mesmo os layouts. Esta documentação guiará você pelas opções de customização, apresentando exemplos detalhados para facilitar a implementação.

Passo a Passo de Configuração

Para aplicar uma customização, você define o FacetecTheme usando o FacetecTheme.Builder, passando as propriedades que deseja personalizar. Em seguida, aplica o tema no FacetecProvider e adiciona esse provider ao HubManager.

Exemplo de Configuração do Tema Facetec

Veja como definir um tema básico, incluindo cores para botões e fontes para textos:

val facetecProvider = FacetecProvider(getFacetecThemeBuilder(this))
hubManager.addProvider(facetecProvider)

Criamos a função getFacetecThemeBuilder, que é responsável por retornar o FacetecTheme configurado com cores personalizadas e fontes. Para a configuração, você pode utilizar tanto R.color e R.font quanto referências diretas por string ou integer, para máxima flexibilidade.

Exemplo Completo de Tema

fun getFacetecThemeBuilder(context: Context): FacetecTheme {
    return FacetecTheme.Builder()
        // Customização de cores das instruções
        .guidanceBackgroundColors("#73997d") // Hexadecimal como String
        .guidanceForegroundColor("#3b3bd4")

        // Customização das cores de instruções "ready"
        .guidanceReadyScreenHeaderTextColor("#5e3766") // Hexadecimal
        .guidanceReadyScreenOvalFillColor(ContextCompat.getColor(context, R.color.purple_500)) // Usando ID de cor

        // Personalizando botões
        .guidanceButtonBackgroundNormalColor("#15abad")
        .guidanceButtonTextNormalColor("#fefefe")

        // Customização das fontes
        .setFacetecFontsMap(getFacetecFonts()) // Map de fontes
        .build()
}

Customização de Cores

Para personalizar as cores, você pode utilizar strings hexadecimais (#FF5733) ou ContextCompat.getColor para obter as cores dos recursos do seu aplicativo. Dessa forma, é possível garantir a consistência com a identidade visual do app.

Exemplos de uso de cores:

.guidanceReadyScreenOvalFillColor("#7c1bd1") // Usando hexadecimal como String
.guidanceReadyScreenTextBackgroundColor(ContextCompat.getColor(context, R.color.black)) // Usando ID de cor

Tabela de Referência: Cores

Customização de Fontes

O FacetecTheme permite personalizar as fontes em diferentes áreas da interface. Para isso, você define um HashMap com as chaves FacetecFontsKey e o valor correspondente da fonte, podendo usar tanto R.font para referências de recursos de fonte quanto o caminho completo da fonte no assets como String.

Exemplo de configuração de fontes:

fun getFacetecFonts(): HashMap<FacetecFontsKey, *> {
    return hashMapOf(
        FacetecFontsKey.GUIDANCE_CUSTOMIZATION_HEADER_FONT to R.font.sixty,
        FacetecFontsKey.GUIDANCE_CUSTOMIZATION_SUBTEXT_FONT to "fonts/sixty.ttf", // Usando path no assets
        FacetecFontsKey.RESULT_SCREEN_CUSTOMIZATION_MESSAGE_FONT to R.font.sixty,
        FacetecFontsKey.FEEDBACK_CUSTOMIZATION_TEXT_FONT to "fonts/sixty.ttf"
    )
}

Tabela de Referência: Fontes

Customização da tela de instruções

Para personalizar a tela de instruções, utilize o InstructionCustomsBuilder como parâmetro no FacetecTheme. Abaixo, você encontra alguns exemplos de como ajustar os elementos visuais e textos.

Customizando Textos e Mensagens

Você pode definir textos personalizados em diferentes áreas do Facetec utilizando um HashMap com as chaves FacetecTextKey e o texto que deseja exibir.

Exemplo de configuração de mensagens:

fun getFacetecTexts(): HashMap<FacetecTextKey, String> {
    return hashMapOf(
        FacetecTextKey.READY_HEADER_1 to "Prepare-se para a verificação",
        FacetecTextKey.RESULT_SUCCESS_MESSAGE to "Verificação concluída com sucesso!"
    )
}

Exemplo de Personalização com Fontes e Cores

Aqui está um exemplo mais avançado, utilizando diversas opções de customização:

fun getFacetecThemeBuilder(context: Context): FacetecTheme {
    return FacetecTheme.Builder()
        // Configuração de cores gerais
        .guidanceBackgroundColors("#f0f4f8")
        .guidanceForegroundColor("#1648CD")

        // Botões
        .guidanceButtonBackgroundNormalColor("#4CAF50")
        .guidanceButtonTextNormalColor("#FFFFFF")
        .guidanceButtonBackgroundHighlightColor("#81C784")

        // Tela de resultado
        .resultScreenBackgroundColors("#3E2723")
        .resultScreenActivityIndicatorColor("#FF5722")
        .resultScreenUploadProgressFillColor("#D32F2F")

        // Customização de fontes
        .setFacetecFontsMap(getFacetecFonts()) // Configuração das fontes
        .build()
}

Exemplo de Customização de Textos

Nesta seção, vamos explorar detalhadamente como personalizar os textos da Facetec para refletir a linguagem e o tom desejados pelo seu aplicativo. A seguir, você verá tabelas e imagens ilustrativas que mostram onde cada texto personalizado aparece na interface, ajudando a entender o impacto de cada configuração visualmente.

Exemplo Visual de Personalização dos Textos

Abaixo, explore como as mensagens personalizadas aparecem visualmente no Facetec e identifique facilmente as propriedades específicas de cada tela.

Ready Screen

Feedback

Result Screen

Retry Screen