Customizações Sdk

Customização​

Com objetivo de deixar a experiência de captura mais próxima da sua identidade visual, é possível realizar customizações de alguns componentes no layout da tela de Instrução e Câmera.

Formas de customização​

Atualmente existem duas formas de customizar o SDK:

  • Via FortfaceCustomizer, usando a função de entrada FortfaceSDK.setCustomizer(customizer).
  • Via arquivo JSON, usando a função de entrada FortfaceSDK.setCustomization("nome_do_arquivo").

As duas formas coexistem, mas o FortfaceCustomizer será depreciado futuramente. Para novas integrações, recomendamos usar a customização via JSON.

Tela de instrução​

Tela de instrução

1-Tela​

a.Visualização on/off

customizer.instructionScreen = true

2-Botão Voltar (X)​

a.Imagem do ícone

customizer.cancelButton.image = *imagem de X

b.Visualização on/off

customizer.cancelButtonEnable = true

c.Posição

customizer.cancelPosition = CancelPosition.

3-Textos​

a.Título

customizer.instructionTextFont.header = poppins_bold customizer.instructionMessage.setInstructionHeader("Dicas importantes para a foto do seu rosto!") customizer.instructionMessageColor.setHeaderTextColor("#332D41")

b.Itens

customizer.instructionTextFont.Int = poppins_regular customizer.instructionMessage.setInstructionNoItems("Deixe o rosto visível e retire itens como óculos e boné") customizer.instructionMessage.setInstructionPlace("Busque um local iluminado") customizer.instructionMessage.setInstructionExpression("Mantenha a sua expressão neutra") customizer.instructionMessage.setInstructionPosition("Posicione seu celular na altura do seu rosto") customizer.instructionMessageColor.setMessageTextColor("#332D41")

4-Ícones​

a.Cor do ícone

customizer.instructionIcon.setColor("#00A594")

b.Cor do fundo do Ícone

customizer.instructionIcon.setBackgroundColor("#F1F1F1")

5-Botão Continuar​

a.Cor do botão

customizer.InstructionButton.setColor("#00A594")

b.Cor do texto

customizer.InstructionButton.setTextColor("#FFFFFFFF")

c.Texto

customizer.instructionButton.setText("Continuar")

d.Fonte do texto

customizer.instructionButton.font = R.font.poppins_font_family

e.Borda Arredondada

customizer.InstructionButton.radius = 10

6-Fundo da tela​

a.Cor do fundo

customizer.instructionBackground.setColor("#FAFAFA")

Tela da Câmera - Captura Biométrica​

Tela de Câmera

1-Timeout​

a.Tempo

customizer.cameraTimeout = 30
customizer.cameraMinStabilizationTime = 2
customizer.cameraMaxStabilizationTime = 3
customizer.brightnessValidationTimeout = 10

2-Botão Voltar (X)​

a.Imagem do ícone

customizer.cancelButton.image = *imagem de X

b.Visualização on/off

customizer.cancelButtonEnable = true

c.Posição

customizer.cancelPosition = CancelPosition.Left

3-Mensagens de feedback​

a.Fonte

customizer.cameraFont.cameraMessageFont = poppins_semibold

b.Textos

Propriedades deprecadas

customizer.cameraMessage.setStartMessage("Enquadre o seu rosto dentro da forma oval")
customizer.cameraMessage.setFaceNoCenter("Centralize seu rosto")

customizer.cameraMessage.setFacePositioned("Aguarde a validação, tente não se mexer")
customizer.cameraMessage.setNoFace("Posicione seu rosto na área indicada")
customizer.cameraMessage.setFaceFar("Aproxime o seu rosto")
customizer.cameraMessage.setFaceNear("Afaste o seu rosto")
customizer.cameraMessage.setFaceCenterLeft("Mova a câmera\npara a esquerda")
customizer.cameraMessage.setFaceCenterRight("Mova a câmera\npara a direita")
customizer.cameraMessage.setFaceCenterUp("Mova a câmera\npara cima")
customizer.cameraMessage.setFaceCenterDown("Mova a câmera\npara baixo")
customizer.cameraMessage.setFacePitchIsUp("Abaixe seu rosto")
customizer.cameraMessage.setFacePitchIsDown("Levante seu rosto")
customizer.cameraMessage.setNoFaceYaw("Olhe para frente")
customizer.cameraMessage.setNoFaceRoll("Deixe sua cabeça reta")
customizer.cameraMessage.setFaceRollLeft("Incline sua cabeça para a esquerda")
customizer.cameraMessage.setFaceRollRight("Incline sua cabeça para a direita")
customizer.cameraMessage.setFaceBrightnessLow("Melhore a iluminação")
customizer.cameraMessage.setFaceBrightnessHigh("Diminua a luz no seu rosto")

Acessibilidade

A propriedade setNoFaceRoll é substituída pelas propriedades setFaceRollLeft e setFaceRollRight para usuários com leitores de tela ativos.

c.Cor

customizer.cameraColor.setMessageTextColor("#263238")

4-Status​

Propriedades deprecadas

customizer.cameraColor.setNeutralColor("#CDCDCD")

a.Alerta

customizer.cameraColor.setAlertColor("#FF9902")

b.Sucesso

customizer.cameraColor.setSuccessColor("#5FC213")

c.Luminosidade

customizer.cameraColor.setBrightnessAlertColor("#24B8C2")

5-Frames de mensagem​

a.Visualização on/off

customizer.cameraFrameText.visible = true

6-Loading do status de sucesso​

a.Cor

customizer.cameraLoading.setCameraLoadingColor("#5FC213")

7-Fundo da tela​

a.Cor

customizer.cameraBackground.setColor(R.color.new_color_1)

8-Logo no rodapé​

a.Imagem

customizer.cameraLogo.logo = R.drawable.ic_small_logo

9-Modo Modal​

a.Ativação do modo modal

customizer.screenMode = ScreenMode.Modal

b.Fundo

customizer.modalBackground.setOverlayColor("#000000")
customizer.modalBackground.overlayOpacity = 0.2f

c.Orientação

customizer.screenOrientation = ScreenOrientation.Automatic

10-Ícone de Luminosidade​

a.Imagem

customizer.cameraIcon.setHighBrightnessIcon(R.drawable.ic_brightness_high) customizer.cameraIcon.setLowBrightnessIcon(R.drawable.ic_brightness_low)

b.Cor

customizer.cameraIcon.setBackgroundColor("#F1F1F1")

Tela da Câmera - Captura de Documentos​

Tela de Câmera

1-Timeout máximo​

customizer.cameraTimeout = 60
customizer.documentAutomaticCaptureTimeout = 20

2-Status dos frames​

a.Neutro

customizer.document.setFrameNeutralColor("#F44336")

b.Sucesso

customizer.document.setFrameSuccessColor("#9C27B0")

3-Loading dos status de sucesso​

a.Cor do fundo

customizer.document.setLoadingBackgroundColor("#F44336")

b.Cor do traço

customizer.document.setLoadingStrokeColor("#9C27B0")

4-Botão voltar (X)​

a.Imagem do Ícone

customizer.cancelButton.image = *imagem de X

b.Visualização on/off

customizer.cancelButtonEnable = true

c.Posição

customizer.cancelPosition = CancelPosition.Left

5-Texto de posicionamento​

a.Fonte

customizer.cameraFont.cameraMessageFont = R.font.poppins_semibold

b.Textos

customizer.docCameraMessage.setStartMessage("Encaixe seu documento\nna marcação")
customizer.docCameraMessage.setDocPositionedMessage("Mantenha seu celular parado")
customizer.docCameraMessage.setDocOutOfFrameMessage("Posicione seu documento\ndentro da área indicada")
customizer.docCameraMessage.setDocMisalignedMessage("Deixe seu documento reto")
customizer.docCameraMessage.setDocNotFoundMessage("Nenhum documento encontrado,\ntente posicionar novamente")
customizer.docCameraMessage.setDocFarMessage("Aproxime a câmera\ndo seu documento")
customizer.docCameraMessage.setDocNearMessage("Afaste a câmera\ndo seu documento")
customizer.docCameraMessage.setDocCapturedMessage("Não se mova")
customizer.docCameraMessage.setWrongFaceMessage("Mostre o verso do documento")
customizer.docCameraMessage.setDocTapToFocusMessage("Toque na tela para focar")

c. Cores

customizer.docCameraMessage.setFeedbackMessageColor("#FFFFFF")

6-Botão de captura​

a.Cor do fundo

customizer.documentCameraButton.setColor("#00A594")

b.Cor do texto

customizer.documentCameraButton.setTextColor(R.color.white) customizer.documentCameraButton.setPressedColor("#00A594")

c.Fonte do texto

customizer.documentCameraButton.font = R.font.poppins_regular

d.Texto

customizer.docCameraMessage.setDocManualCaptureButtonMessage("Tirar foto")

7-Texto de confirmação​

a.Fonte

customizer.cameraFont.cameraMessageFont = R.font.poppins_semibold

b. Texto

customizer.docCameraMessage.setDocPreviewMessage("Seu documento está\nnítido e legível?")

c. Cores

customizer.docCameraMessage.setDocPreviewMessageTextColor("#FFFFFF")

8-Botões de confirmação​

a.Fonte

customizer.documentPreviewButtons.font = R.font.poppins_regular

b.Cor do texto

customizer.documentPreviewButtons.setAcceptTextColor(R.color.white) customizer.documentPreviewButtons.setCancelTextColor(R.color.white)

c.Cor de fundo

customizer.documentPreviewButtons.setAcceptColor("#367C14") customizer.documentPreviewButtons.setPressedColor("#26570E") customizer.documentPreviewButtons.setCancelColor("#B3261E") customizer.documentPreviewButtons.setPressedCancelColor("#B3261E")

d. Texto

customizer.docCameraMessage.setDocPreviewConfirmCapture("Sim, enviar")
customizer.docCameraMessage.setDocPreviewRetryCapture("Tirar nova foto")

Upload de Documentos​

Upload de Documentos

1 - Botão cancelar (X)​

a.Imagem do Ícone

customizer.cancelButton.image = *imagem de X

b.Visualização on/off

customizer.cancelButtonEnable = true

c.Posição

customizer.cancelPosition = CancelPosition.Left

2 - Textos​

a. Mensagens

customizer.uploadDocMessage.setUploadDocTitle("Confirme seu documento")
customizer.uploadDocMessage.setUploadDocSubtitle("Sua imagem deve estar com os dados legíveis e em boa qualidade.")

b. Cores

customizer.uploadDocMessage.setUploadDocTitleTextColor("#000000") customizer.uploadDocMessage.setUploadDocSubtitleTextColor("#AAAAAA")

3 - Botões de confirmação e reenvio​

a. Confirmação

customizer.uploadDocMessage.setUploadDocPreviewContinue("Enviar documento")
customizer.uploadDocMessage.setUploadDocPreviewContinueButtonColor("#00A594")
customizer.uploadDocMessage.setUploadDocPreviewContinueButtonTextColor("#FFFFFF")
customizer.uploadDocMessage.setUploadDocWaitMessage("Aguarde")
customizer.uploadDocMessage.setUploadDocPreviewRetryTextColor("#00A594")

b. Reenvio

customizer.uploadDocMessage.setUploadDocPreviewRetry("Carregar novamente")

4 - Cor de fundo​

a. Cor

customizer.uploadDoc.setBackgroundColor("#FFFFFF")

Como funciona?​

Cada uma das variáveis possui seu valor padrão.

  • Se você atribuir um novo valor conforme o tipo da variável, o novo valor será redenrizado;
  • Se nenhum novo valor for atribuído, será renderizado o padrão inicial.
  • No caso da logo da tela de captura, se não for inicializada nenhuma imagem, não irá aparecer nada

Entendendo o trecho de código​

Primeiro, inicialize a classe FortfaceCustomizer:

val customizer = FortfaceCustomizer()

Depois, altere os parâmetros desejados:

customizer.cameraColor.setNeutralColor(R.color.new_color_1) customizer.cameraColor.setSuccessColor("#9C27B0") customizer.cameraMessage.setFaceNear(R.string.text_1) customizer.cameraMessage.setStartMessage("Vamos começar")

Então, sobrescreva customizer padrão:

FortfaceSDK.customizer=customizer

Lembrete​

Todos os itens específicos, como: ícones, imagens, família de fonte, etc., devem estar importados na pasta Assets do seu app.

Customização via JSON​

A customização via JSON permite aplicar a identidade visual e os textos do SDK a partir de um arquivo .json incluído no bundle do aplicativo integrador.

Função de entrada​

A função de entrada para customização via JSON é FortfaceSDK.setCustomization("nome_do_arquivo").

Como configurar​

  1. Adicione o arquivo JSON ao projeto integrador.
  2. Garanta que o arquivo esteja incluído no bundle do app em Copy Bundle Resources.
  3. Chame FortfaceSDK.setCustomization informando apenas o nome do arquivo, sem a extensão .json.
FortfaceSDK.setCustomization("customization")

Atenção:​

Use apenas uma forma de customização por inicialização. Se setCustomizer for chamado antes, setCustomization não será aplicado. Se setCustomization for chamado antes, setCustomizer não substituirá a configuração carregada.

Estrutura esperada​

O JSON deve declarar as configurações diretamente na raiz do arquivo, a partir de blocos como theme, face_recognition, document_recognition e document_upload.

Compatibilidade​

Configurações antigas que usam o array examples continuam suportadas pelo SDK. Para novas integrações, prefira declarar os módulos diretamente na raiz do JSON.

{
  "version": "1.0.0",
  "theme": {
    "appearance": {
      "font_family": "Poppins-SemiBold",
      "background_color": "#FFFFFF",
      "orientation": "automatic",
      "modal": {
        "enabled": false
      }
    }
  },
  "face_recognition": {
    "instructions_screen": {
      "visible": true,
      "background_color": "#FAFAFA",
      "title": {
        "content": "Dicas importantes\npara a foto\ndo seu rosto!",
        "color": "#332D41"
      },
      "topics": {
        "messages": {
          "no_items": {
            "content": "Deixe o rosto visível\ne retire itens como\nóculos e boné",
            "color": "#332D41"
          },
          "well_lit": {
            "content": "Busque um local\niluminado",
            "color": "#332D41"
          },
          "neutral_expression": {
            "content": "Mantenha a sua\nexpressão neutra",
            "color": "#332D41"
          },
          "straight_position": {
            "content": "Posicione seu celular\nna altura do seu rosto",
            "color": "#332D41"
          }
        },
        "icons": {
          "color": "#00A594",
          "background_color": "#F1F1F1"
        }
      },
      "continue_button": {
        "content": "Continuar",
        "background_color": "#00A594",
        "text_color": "#FFFFFF",
        "corner_radius": 10
      }
    },
    "camera_screen": {
      "background_color": "#FFFFFF",
      "timeout": 30,
      "min_stabilization_time": 1.0,
      "max_stabilization_time": 2.0,
      "close_button": {
        "visible": true,
        "position": "top-left"
      },
      "positioning_messages": {
        "color": "#263238",
        "frame_text_visible": true,
        "loading_stroke_color": "#FFFFFF",
        "content": {
          "positioned": "Aguarde a validação,\ntente não se mexer",
          "no_face": "Posicione seu rosto na área indicada",
          "face_far": "Aproxime o seu rosto",
          "face_near": "Afaste o seu rosto",
          "face_pitch_up": "Abaixe seu rosto",
          "face_pitch_down": "Levante seu rosto",
          "no_face_yaw": "Olhe para frente",
          "no_face_roll": "Deixe sua cabeça reta",
          "face_roll_left": "Incline sua cabeça para a esquerda",
          "face_roll_right": "Incline sua cabeça para a direita",
          "face_center_left": "Mova a câmera para a esquerda",
          "face_center_right": "Mova a câmera para a direita",
          "face_center_up": "Mova a câmera para cima",
          "face_center_down": "Mova a câmera para baixo"
        }
      },
      "feedback_colors": {
        "alert": "#FF9902",
        "luminosity": "#24B8C2",
        "success": "#5FC213"
      },
      "brightness_validation": {
        "timeout": 10,
        "messages": {
          "too_dark": "Melhore a iluminação",
          "too_bright": "Diminua a luz no seu rosto"
        }
      }
    }
  },
  "document_recognition": {
    "camera_screen": {
      "timeout": 60,
      "automatic_capture_timeout": 20,
      "close_button": {
        "visible": true,
        "position": "top-right"
      },
      "feedback_colors": {
        "neutral": "#F44336",
        "success": "#9C27B0"
      },
      "positioning_messages": {
        "color": "#FFFFFF",
        "loading_stroke_color": "#FFFFFF",
        "font": {
          "family": "Poppins-SemiBold"
        },
        "content": {
          "start": "Encaixe seu documento\nna marcação",
          "positioned": "Mantenha seu celular parado",
          "out_of_frame": "Posicione seu documento\ndentro da área indicada",
          "misaligned": "Deixe seu documento reto",
          "not_detected": "Nenhum documento encontrado,\ntente posicionar novamente",
          "too_far": "Aproxime a câmera\ndo seu documento",
          "too_near": "Afaste a câmera\ndo seu documento",
          "capturing": "Não se mova",
          "wrong_face": "Mostre o verso do documento",
          "tap_to_focus": "Toque na tela para focar"
        }
      },
      "manual_capture_button": {
        "content": "Tirar foto",
        "background_color": "#00A594",
        "text_color": "#FFFFFF",
        "font": {
          "family": "Poppins-SemiBold"
        }
      }
    },
    "review_screen": {
      "title": {
        "content": "Seu documento está\nnítido e legível?",
        "color": "#FFFFFF",
        "font": {
          "family": "Poppins-SemiBold"
        }
      },
      "confirm_button": {
        "content": "Sim, enviar",
        "background_color": "#367C14",
        "text_color": "#FFFFFF"
      },
      "retry_button": {
        "content": "Tirar nova foto",
        "background_color": "#B3261E",
        "text_color": "#FFFFFF"
      }
    }
  },
  "document_upload": {
    "review_screen": {
      "background_color": "#FFFFFF",
      "close_button": {
        "visible": true,
        "position": "top-right"
      },
      "title": {
        "content": "Confirme seu documento",
        "color": "#000000",
        "font": {
          "family": "Poppins-SemiBold"
        }
      },
      "description": {
        "content": "Sua imagem deve estar com\nos dados legíveis e em boa qualidade.",
        "color": "#AAAAAA",
        "font": {
          "family": "Poppins-Regular"
        }
      },
      "confirm_button": {
        "content": "Enviar documento",
        "wait_message": "Aguarde",
        "background_color": "#00A594",
        "text_color": "#FFFFFF",
        "font": {
          "family": "Poppins-SemiBold"
        }
      },
      "retry_button": {
        "content": "Carregar novamente",
        "text_color": "#00A594",
        "font": {
          "family": "Poppins-SemiBold"
        }
      }
    }
  }
}

Campos aceitos​

CampoDescrição
theme.appearance.font_familyFonte padrão aplicada aos textos e botões suportados.
theme.appearance.background_colorCor de fundo padrão para telas suportadas.
theme.appearance.orientationOrientação da SDK: automatic, portrait ou landscape.
theme.appearance.modal.enabledDefine abertura modal (true) ou fullscreen (false).
face_recognition.instructions_screenCustomiza tela de instrução da captura facial.
face_recognition.camera_screenCustomiza câmera da captura facial.
document_recognition.camera_screenCustomiza câmera da captura de documentos.
document_recognition.review_screenCustomiza tela de revisão da captura de documentos.
document_upload.review_screenCustomiza tela de revisão do upload de documentos.

Observações​

  • As cores devem ser informadas em hexadecimal, por exemplo #00A594.
  • O nome passado em setCustomization deve ser o nome do recurso no bundle sem .json.
  • Campos ausentes mantêm os valores padrão do SDK.
  • No iOS, font.size e font.weight podem existir no JSON, mas apenas font.family é aplicado nos campos suportados.
  • Para imagens, como face_recognition.camera_screen.logo, informe o nome de um asset do app integrador ou uma imagem em base64.

Modo Modal ou Fullscreen​

Além das customizações de interface, também temos a opção de usar o nosso SDK em abertura de modal ou fullscreen, ambos funcionando tanto em orientação retrato quando em paisagem, com a responsividade se adequando ao cenário selecionado.

A SDK é exibida em modo tela cheia na orientação vertical (portrait) por padrão em todos os dispositivos suportados. Em tablets, é possível configurar a orientação para horizontal (landscape) ou automática, permitindo que a SDK se ajuste à orientação do dispositivo, além de configurar para exibição em modal.

Exemplos​

Modo Modal (Portrait e Landscape)​

Modal portraitModal landscape

Modo Fullscreen (Portrait e Landscape) - Valor padrão​

Fullscreen portraitFullscreen landscape

Para configurar esses modos, é preciso alterar os seguintes atributos:

Kotlin​

1-Ativação do modo modal​

customizer.screenMode = ScreenMode.Modal

2-Ativação do modo fullscreen​

customizer.screenMode = ScreenMode.FullScreen

3-Orientação​

customizer.screenOrientation = ScreenOrientation.Automatic customizer.screenOrientation = ScreenOrientation.Landscape customizer.screenOrientation = ScreenOrientation.Portrait

Última atualização em por Mariela Andrade