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 imagem | Tipo | Descrição |
---|---|---|
(1) @+id/backButton | ImageView | Parâmetro referente ao botão de voltar. |
(2) @+id/contentView | ViewGroup | Parâmetro referente ao container da tela. |
(3) @+id/continueButton | View | Parâmetro referente ao botão para iniciar o fluxo de envio. |
(4) @+id/activityIndicatorView | View | Parâmetro referente ao loading exibido na tela. |
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_ENVIRONMENT
e PARAM_APP_KEY.
Parâmetro | Descrição | Opcional |
---|---|---|
PARAM_ENVIRONMENT | Parâmetro referente ao ambiente que será executada a documentoscopia. | Não |
PARAM_APP_KEY | Parâmetro referente a APP_KEY gerada na Certiface API | Não |
PARAM_THEME | Nesse parâmetro é passado a função criada para gerenciar o tema. | Sim |
PARAM_DEBUG_ON | Permite o retorno de informações do SDK no logcat. | Sim |
PARAM_CUSTOM_HOME_FRAGMENT | Permite a customização da home onde é selecionado RG ou CNH. | Sim |
PARAM_CUSTOM_CAM_INSTRUCTION_FRONT | Permite a customização do texto na tela da face frontal do documento. | Sim |
PARAM_CUSTOM_CAM_INSTRUCTION_BACK | Permite a customização do texto na tela da parte de trás do documento. | Sim |
PARAM_CUSTOM_FEEDBACK_FRAGMENT | Refere-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 startActivityForResult
para 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.black
ou a passagem direta utilizando uma hex string ao qual ficaria no seguinte formato "#ff0000"
.
Propriedade | Tipo |
---|---|
(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.
Propriedade | Tipo |
---|---|
(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.
Propriedade | Tipo |
---|---|
(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.ubuntu
quanto 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.
Propriedade | Tipo |
---|---|
(8) .setInstructionOptionDocumentTextFont() | R.font / String |
(9) .setInstructionOptionLightingTextFont() | R.font / String |
(10) .setInstructionContinueButtonTextFont() | R.font / String |
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 Imagem | Tipo | Propriedade |
---|---|---|
(1) @+id/backButton | ImageButton | Parâmetro referente ao botão de voltar. |
(2) @+id/chck_front | RadioButton | Ícone indicativo da face do documento frontal do documento. |
(2) @+id/chck_back | RadioButton | Ícone indicativo da face do documento traseira do documento. |
(3) @+id/instructionsTextView | TextView | Texto exibido tanto para face quanto para o verso do documento. |
(4) @+id/previewImageView | ImageView | Exibição do preview da imagem apresentada. |
(4) @+id/cameraFrameLayout | FrameLayout | Preview da foto tirada. |
(5) @+id/captureButton | ImageButton | Botão de capturar imagem. |
(6) @+id/closeButton | ImageButton | Referente ao botão de fechar. |
(7)@layout/layout_doc_camera_preview | R.layout | Layout para realizar o preview da câmera. |
(8) @+id/bottomSheetTitleTextView | TextView | Texto apresentado para confirmar se a imagem ficou boa |
(9) @+id/takeNewPictureButton | AppCompatButton | Tirar uma nova foto. |
(10) @+id/usePictureButton | Button | Confirmação de que a imagem ficou boa. |
(0) @+id/activityIndicatorView | View | Parâmetro referente ao loading da tela. |
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.black
ou a passagem direta utilizando uma hex string ao qual ficaria no seguinte formato "#ff0000"
.
Propriedade | Tipo |
---|---|
(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.
Propriedade | Tipo |
---|---|
(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.
Propriedade | Tipo |
---|---|
(2) .setCaptureInstructionGuideTextFront() | String |
(2) .setCaptureInstructionGuideTextBack() | String |
(2) .setCaptureInstructionGuideReviewText() | String |
(7) .setTextConfirmation() | String |
(8) .setTextRedo() | String |
(10) .setTextOk() | String |
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 Imagem | Tipo | Propriedade |
---|---|---|
(1) @+id/successView | LinearLayout | Parâmetro referente a tela de sucesso. |
(2) @+id/failureView | ViewGroup | Parâmetro referente a tela de falha. |
(3) @+id/failureTextView | TextView | Parâmetro referente ao texto da tela de falha. |
(4) @+id/failureCloseButton | Button | Parâmetro referente ao botão de tentar novamente. |
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 entendi
seja clicado, ocorre a chamada de uma permissão nativa para permissão de câmera. Atualmente esse ponto no fluxo não é customizável.
Updated about 1 month ago