Doc Core

Guia de customização de telas e textos para o Doc Core Android.

Customização Doc Core

📝

Uso do termo Doc Core

Nesta seção, compreende-se por Doc Core o módulo Documentscopy dentro do SDK.

Nesta seção, abordaremos o processo de customização da Doc Core, focando em três telas principais: Tela de Instruções, Tela de Captura de Documentos e Tela de Feedback.

A capacidade de personalizar essas telas oferece flexibilidade para adaptar a experiência do usuário conforme as necessidades do seu projeto.

Ao final do guia, você encontra exemplos de XML customizados das telas mencionadas, que podem servir como referência para suas próprias personalizações.

💡

Elementos adicionais

Além das telas obrigatórias, a tela customizada pode conter outros elementos, apenas tomando cuidado para que estes itens adicionais não interfiram no comportamento dos elementos obrigatórios.


1. Tela de instruções

👍

Para personalizações dos layouts a seguir:

É possível personalizar completamente os layouts, usando como exemplo o parâmetro PARAM_CUSTOM_HOME_FRAGMENT ao qual possui alguns parâmetros obrigatórios como descrito abaixo.

Para customizar a tela de instruções, é necessário passar um XML por meio de um Bundle, que deve conter alguns IDs obrigatórios (@+id/contentView <ConstraintLayout />, @+id/backButton <ImageButton />, @+id/continueButton <AppCompatButton />, @+id/activityIndicatorView <ProgressBar />) para construir e atribuir as funções internamente. Ao fornecer esses IDs, é possível personalizar completamente o XML.

Número na imagemTipoDescrição
(1) @+id/backButtonImageViewParâmetro referente ao botão de voltar.
(2) @+id/contentViewViewGroupParâmetro referente ao container da tela.
(3) @+id/continueButtonViewParâmetro referente ao botão para iniciar o fluxo de envio.
(4) @+id/activityIndicatorViewViewParâmetro referente ao loading exibido na tela.
Tela de seleção do tipo de documento.

Tela de seleção do tipo de documento.


1.1 Descrição do inicio de jornada Doc Core

Para realizar o Inicio da jornada da doc core possuímos alguns parâmetros necessários e alguns opcionais aos quais serão descritos abaixo. Neste tópico nos referimos a chamada via intent da DocumentsCopyActivity.

Descrição dos parâmetros:

Como podemos observar na seguinte tabela possuímos somente 2 parâmetros obrigatórios, sendo eles PARAM_ENVIRONMENTe PARAM_APP_KEY.

ParâmetroDescriçãoOpcional
PARAM_ENVIRONMENTParâmetro referente ao ambiente que será executada a documentoscopia.Não
PARAM_APP_KEY Parâmetro referente a APP_KEY gerada na Certiface APINão
PARAM_THEME Nesse parâmetro é passado a função criada para gerenciar o tema.Sim
PARAM_DEBUG_ONPermite o retorno de informações do SDK no logcat.Sim
PARAM_CUSTOM_HOME_FRAGMENTPermite a customização da home onde é selecionado RG ou CNH.Sim
PARAM_CUSTOM_CAM_INSTRUCTION_FRONTPermite a customização do texto na tela da face frontal do documento.Sim
PARAM_CUSTOM_CAM_INSTRUCTION_BACKPermite a customização do texto na tela da parte de trás do documento.Sim
PARAM_CUSTOM_FEEDBACK_FRAGMENTRefere-se a customização da tela de feedback.Sim

Exemplo de implementação:

Aqui podemos observar um exemplo de implementação ao qual realizamos a passagem dos parâmetros descritos acima. Observação para a passagem dos layouts, realizamos a passagem direta da referência sendo assim o R.layout.

fun onLivenessDocClick() {
    startActivityForResult?.launch(Intent(this, DocumentscopyActivity::class.java).apply {
        putExtra(DocumentscopyActivity.PARAM_ENVIRONMENT, Environment.HML)
        putExtra(DocumentscopyActivity.PARAM_APP_KEY, appKey)
        putExtra(DocumentscopyActivity.PARAM_THEME, getNewTheme())
        putExtra(DocumentscopyActivity.PARAM_DEBUG_ON, false)
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_HOME_FRAGMENT,
            R.layout.fragment_doc_home_custom
        )
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_CAM_INSTRUCTION_FRONT,
            R.layout.fragment_doc_camera_custom
        )
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_CAM_INSTRUCTION_BACK,
            R.layout.fragment_doc_camera_custom
        )
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_FEEDBACK_FRAGMENT,
            R.layout.fragment_doc_feedback_custom
        )
    })
}

Caso esteja utilizando versões mais antigas do kotlin, a passagem ficaria dessa forma. Utilizamos do startActivityForResultpara garantir maior compatibilidade.

fun onLivenessDocClick() {
    val intent = Intent(this, DocumentscopyActivity::class.java).apply {
        putExtra(DocumentscopyActivity.PARAM_ENVIRONMENT, Environment.HML)
        putExtra(DocumentscopyActivity.PARAM_APP_KEY, appKey)
        putExtra(DocumentscopyActivity.PARAM_THEME, getNewTheme())
        putExtra(DocumentscopyActivity.PARAM_DEBUG_ON, false)
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_HOME_FRAGMENT,
            R.layout.fragment_doc_home_custom
        )
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_CAM_INSTRUCTION_FRONT,
            R.layout.fragment_doc_camera_custom
        )
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_CAM_INSTRUCTION_BACK,
            R.layout.fragment_doc_camera_custom
        )
        putExtra(
            DocumentscopyActivity.PARAM_CUSTOM_FEEDBACK_FRAGMENT,
            R.layout.fragment_doc_feedback_custom
        )
    }
    startActivityForResult(intent, LIVENESS_3D_RESULT)
}

1.2 Customização utilizando o parâmetro PARAM_THEME

Para customizar cores, textos ou ícones, é necessário criar uma função com Builder que irá passar no parâmetro de PARAM_THEME, adicionando a propriedade de customização que deseja.

Nesta Sessão estamos nos referindo aos parâmetros utilizados para customização da Tela de Instruções.

Tabela de Cores

Nessa sessão utilizamos de dois formatos de passagem de cores sendo eles passando diretamente um R.color.blackou a passagem direta utilizando uma hex string ao qual ficaria no seguinte formato "#ff0000".

PropriedadeTipo
(2) .instructionBackgroundColor()Hex String
(3) .instructionTitleColor()Hex String
(4) .setInstructionOptionDocumentIconColor()Hex String
(4) .setInstructionOptionDocumentBorderColor()Hex String
(4) .setInstructionOptionDocumentBackgroundColor()Hex String
(5) .setInstructionOptionLightingIconColor()Hex String
(5) .setInstructionOptionLightingBorderColor()Hex String
(5) .setInstructionOptionLightingBackgroundColor()Hex String
(6) .instructionBottomSheetBackgroundColor()Hex String
(7) .instructionCaptionColor()Hex String
(8) .setInstructionOptionDocumentTextColor()Hex String
(9) .setInstructionOptionLightingTextColor()Hex String
(10) .setInstructionContinueButtonTextColor()Hex String
(10) .setInstructionContinueButtonBackgroundColor()Hex String

Tabela de Ícones

Nessa tabela utilizamos apenas do recurso de drawable, sendo assim necessitamos apenas da referencia do R.drawable para que aja o processamento interno da referência.

PropriedadeTipo
(1) .instructionBackButtonIcon()R.drawable

Tabela de Textos

Nessa tabela também necessitamos apenas de uma String, ao chamar a propriedade deve ser passado um .setTextFront("example")com isso ocorre a tratativa interna para aplicação da customização do texto do campo relacionado a propriedade desejada.

PropriedadeTipo
(3) .instructionTitleText()String
(7) .instructionCaptionText()String
(8) .setInstructionOptionDocumentText()String
(9) .setInstructionOptionLightingText()String

Tabela de Fontes

Para o caso dessa tabela utilizamos uma tratativa interna que aceita tanto a referencia da fonte R.font.ubuntuquanto a passagem do path utilizando o assets dentro de resources, no caso fica assim .setInstructionOptionDocumentTextFont("ubuntu_regular").

❗️

Importante:

Caso utilize da passagem via string do path da fonte, certifique-se de incluir o arquivo de fonte dentro da pasta res/assets, para assim referenciar somente o nome do arquivo na função.

PropriedadeTipo
(8) .setInstructionOptionDocumentTextFont()R.font / String
(9) .setInstructionOptionLightingTextFont()R.font / String
(10) .setInstructionContinueButtonTextFont()R.font / String
Tela de captura do documento.

Mapa de propriedades customizaveis da Tela de Instruções.

Exemplo de implementação:

Aqui podemos observar as propriedades disponiveis para customização, cada uma realizando sua determinada função com base no seu nome indicativo.

private fun getNewTheme() = DocCopyTheme.Builder()

        // NewCustom Instruction
        .instructionBackButtonIcon(R.drawable.cancel_button)
        .instructionTitleText("title custom")
        .instructionTitleColor("#A5CD39")
        .instructionCaptionColor("#A5CD39")
        .instructionCaptionText("caption Custom")
        .instructionBackgroundColor("#A5CD39")
        .instructionBottomSheetBackgroundColor("#333333")


        //Options Icons Colors
        .setInstructionOptionDocumentIconColor("#A5CD39")
        .setInstructionOptionLightingIconColor("#fc0000")
        //Options Sphere Border/background Colors
        .setInstructionOptionDocumentBorderColor("#fc0000")
        .setInstructionOptionDocumentBackgroundColor("#0E1979")
        .setInstructionOptionLightingBorderColor("#fc0000")
        .setInstructionOptionLightingBackgroundColor("#A5CD39")

        //Options Texts
        .setInstructionOptionDocumentTextColor("#A5CD39")
        //path da fonte: assets/fonts
        .setInstructionOptionDocumentTextFont("ubuntu_regular")
        .setInstructionOptionLightingTextColor("#A5CD39")
        .setInstructionOptionLightingTextFont(R.font.ubuntu_regular)

        .setInstructionOptionDocumentText("title One")
        .setInstructionOptionLightingText("title Two")

        //Continue Button
        .setInstructionContinueButtonBackgroundColor("#FFFFFF")
        .setInstructionContinueButtonTextColor("#A5CD39")
        .setInstructionContinueButtonTextFont(R.font.ubuntu_regular)
        
        // capture screen
        .setCaptureBackgroundColor("#333333")
        .setCaptureInstructionGuideTextFront("front GuideText")
        .setCaptureInstructionGuideTextBack("back GuideText Back")
        .setTextConfirmation("confimation example")
        .setCaptureInstructionGuideReviewText("review")
        .setCapturePreviewBorderColorForCapture("#FF0000")
        .setBackgroundOkColor("#000000")
        .setBackgroundDismissColor("#333333")
        .setCaptureBottomSheetShapeColor("#A5CD39")
        .setCaptureBackButtonColorsIcon("#A5CD39")
        .setCaptureCloseButtonColorsIcon("#A5CD39")
        .setTextOk("text ok")
        .setTextRedo("text voltar")

        .build()

2. Tela de captura de documento

👍

Para personalizações dos layouts a seguir:

É possível personalizar completamente os layouts, usando como exemplo o parâmetro PARAM_CUSTOM_CAMERA_FRAGMENT ao qual possui alguns parâmetros obrigatórios como descrito abaixo.

Propriedades relacionadas a componentes necessários caso opte por personalizar o layout a seguir sem a inclusão dos seguintes componentes, estará sujeito(a) a problemas ao executar o fluxo.

Número na ImagemTipoPropriedade
(1) @+id/backButtonImageButtonParâmetro referente ao botão de voltar.
(2) @+id/chck_frontRadioButtonÍcone indicativo da face do documento frontal do documento.
(2) @+id/chck_backRadioButtonÍcone indicativo da face do documento traseira do documento.
(3) @+id/instructionsTextViewTextViewTexto exibido tanto para face quanto para o verso do documento.
(4) @+id/previewImageViewImageViewExibição do preview da imagem apresentada.
(4) @+id/cameraFrameLayoutFrameLayoutPreview da foto tirada.
(5) @+id/captureButtonImageButtonBotão de capturar imagem.
(6) @+id/closeButtonImageButtonReferente ao botão de fechar.
(7)@layout/layout_doc_camera_previewR.layoutLayout para realizar o preview da câmera.
(8) @+id/bottomSheetTitleTextViewTextViewTexto apresentado para confirmar se a imagem ficou boa
(9) @+id/takeNewPictureButtonAppCompatButtonTirar uma nova foto.
(10) @+id/usePictureButtonButtonConfirmação de que a imagem ficou boa.
(0) @+id/activityIndicatorViewViewParâmetro referente ao loading da tela.
Tela de captura do documento.

Tela de captura do documento.


2.1 Customização utilizando o parâmetro PARAM_THEME

Para customizar cores, textos ou ícones, é necessário criar uma função com Builder que irá passar no parâmetro de PARAM_THEME, adicionando a propriedade de customização que deseja.

Nesta Sessão estamos nos referindo aos parâmetros utilizados para customização da Tela de Captura de Documento.

💡

Atenção

Os indicadores desta seção estão representados na imagem posterior a Tabela de Textos.

Tabela de Cores

Nessa sessão utilizamos de dois formatos de passagem de cores sendo eles passando diretamente um R.color.blackou a passagem direta utilizando uma hex string ao qual ficaria no seguinte formato "#ff0000".

PropriedadeTipo
(3) .setFrameBorder()R.color
(3) .setCapturePreviewBorderColorForCapture()Hex String
(4) .setBackgroundCameraColor()R.color
(4) .setCaptureBackButtonColorsIcon()Hex String
(5) .setCaptureCloseButtonColorsIcon()Hex String
(6) .setCaptureBackgroundColor()Hex String
(8) .setTryAgainColor()R.color
(8) .setBackgroundDismissColor()R.color
(9) .setCaptureBottomSheetShapeColor()Hex String
(10) .textOkColor()R.color
(10) .setBackgroundOkColor()Hex String

Tabela de Ícones

Nessa tabela utilizamos apenas do recurso de drawable, sendo assim necessitamos apenas da referencia do R.drawable para que aja o processamento interno da referência.

PropriedadeTipo
(1) .setIconBack()R.drawable
(4) .setIconCamera()R.drawable

Tabela de Textos

Nessa tabela também necessitamos apenas de uma String, ao chamar a propriedade deve ser passado um .setTextFront("example")com isso ocorre a tratativa interna para aplicação da customização do texto do campo relacionado a propriedade desejada.

PropriedadeTipo
(2) .setCaptureInstructionGuideTextFront()String
(2) .setCaptureInstructionGuideTextBack()String
(2) .setCaptureInstructionGuideReviewText()String
(7) .setTextConfirmation()String
(8) .setTextRedo()String
(10) .setTextOk()String
Tela de captura do documento.

Mapa de propriedades customizaveis da Tela de Captura de Documentos.


3. Tela de Feedback

👍

Para personalizações dos layouts a seguir:

É possível personalizar completamente os layouts, usando como exemplo o parâmetro PARAM_CUSTOM_FEEDBACK_FRAGMENT ao qual possui alguns parâmetros obrigatórios como descrito abaixo.

Para realizar a customização da tela de feedback utilizamos dos seguintes componentes:

Número na ImagemTipoPropriedade
(1) @+id/successViewLinearLayoutParâmetro referente a tela de sucesso.
(2) @+id/failureViewViewGroupParâmetro referente a tela de falha.
(3) @+id/failureTextViewTextViewParâmetro referente ao texto da tela de falha.
(4) @+id/failureCloseButtonButtonParâmetro referente ao botão de tentar novamente.
Telas de feedback apresentadas no final da jornada.

Telas de feedback apresentadas no final da jornada.


4. Exemplos de customização XML

Nessa sessão apresentamos um repositório onde podemos encontrar alguns exemplos de customização para os layouts das telas citadas acima.

📘

Layouts de exemplo XML

Confira no seguinte repositório: https://github.com/oititec/custom-views-examples/tree/main/Android/DocCore


5. Permissionamento de Câmera

Tela relacionada a permissão de câmera. Ao acessar o fluxo sem a permissão de câmera fornecida, é executado um bottom sheet informando que é necessária a permissão para executar o fluxo.

Telas de feedback apresentadas no final da jornada.

Bottom sheet utilizado para solicitar a permissão nativa de câmera.

Caso o botão entendiseja clicado, ocorre a chamada de uma permissão nativa para permissão de câmera. Atualmente esse ponto no fluxo não é customizável.