Doc Core

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.

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.

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".

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.

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.

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.

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.

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".

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.

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.

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:

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.

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.