Marca Blanca - ReconoSERID/SDK-ReconoSERID-Android GitHub Wiki

****
+ Próximamente - Marca Blanca - SDK 3.1.0

Este apartado describe cómo customizar el SDK para ajustarse a la colorimetría y estilo visual de tu desarrollo. A través de las configuraciones disponibles, puedes adaptar las vistas y elementos visuales del SDK a los requerimientos específicos de tu aplicación.

Puntos que se pueden customizar por vista:

1. Cambio de color de botones primarios y secundarios por vista:

Permite personalizar los colores de los botones, tanto primarios como secundarios, de acuerdo con la vista actual.

2. Cambio de logo por vista:

Permite sustituir el logo por una imagen personalizada en cada vista.

3. Cambio de color de texto en mensajes por vista:

Puedes personalizar el color del texto en los mensajes de las vistas.

4. Cambio de tamaño de letra de los textos por vista:

Se puede ajustar el tamaño de la tipografía de los textos en cada vista del SDK.

Consideraciones a tener en cuenta:

No se permite el cambio del tipo de fuente: El SDK usa fuentes predeterminadas y no permite modificarlas.
No se permite cambiar el fondo de la Vista de Cámara: El fondo de la Vista de Cámara (tanto en documento como en facial) permanecerá blanco en todo momento.

Implementación y ejemplo

La personalización de la interfaz de usuario se realiza mediante un objeto UiCustomization, el cual se pasa a través de un Intent cuando se inicia cualquiera de las actividades relevantes.

Requisitos:

Los archivos que van en el parametro customLogo debe ser un SVG un drawable de Android (preferentemente en formato XML para asegurar escalabilidad).
El tamaño del logo esta restringido a un ancho de 188 dp y una altura de 41 dp para evitar que la UI se desajuste. Estos valores aseguran que el logo se vea correctamente en diversas pantallas y que no cause problemas de diseño en la interfaz.

Pasos para la implementación:

Crear una instancia de UiCustomization:
Define los cambios de personalización para cada vista del SDK utilizando las clases UiCustomization, TextUiCustomization, ButtonUiCustomization, etc.
Enviar la personalización al Intent:
Una vez configurada la personalización, se pasa al Intent correspondiente de cada actividad.

Ejemplo en Kotlin:

// Crear una instancia de UiCustomization
val customizationUi = UiCustomization(
    customLogo = LogoTheme(
        mainLogo = R.drawable.logo_light,
        darkLogo = R.drawable.logo_dark
    ),
    documentScannerView = DocumentScannerView(
        titleCustomization = TextUiCustomization(textColor = R.color.colorPrimary, textSize = 16f),
        contentTextColor = TextUiCustomization(textColor = R.color.colorAccent),
        primaryButtonCustomization = ButtonUiCustomization(
            textSize = 14f,
            buttonTextColor = R.color.white,
            buttonBackgroundColor = R.color.buttonPrimary
        )
    ),
    documentTutorialView = DocumentTutorialView(
        titleCustomization = TextUiCustomization(textColor = R.color.colorPrimary, textSize = 18f),
        primaryButtonCustomization = ButtonUiCustomization(
            textSize = 16f,
            buttonTextColor = R.color.white,
            buttonBackgroundColor = R.color.buttonPrimary
        )
    ),
    // Agregar personalización para las demás vistas...
)

// Enviar la personalización a la actividad correspondiente
val intent = Intent(context, BlackBoxActivity::class.java)
intent.putExtra(UI_CUSTOMIZATION, customizationUi)
startActivity(intent)

Ejemplo en Java:


// Crear una instancia de UiCustomization
UiCustomization customizationUi = new UiCustomization(
    new LogoTheme(R.drawable.logo_light, R.drawable.logo_dark),
    new DocumentScannerView(
        new TextUiCustomization(R.color.colorPrimary, 16f),
        new TextUiCustomization(R.color.colorAccent),
        new ButtonUiCustomization(14f, R.color.white, R.color.buttonPrimary)
    ),
    new DocumentTutorialView(
        new TextUiCustomization(R.color.colorPrimary, 18f),
        new ButtonUiCustomization(16f, R.color.white, R.color.buttonPrimary)
    )
    // Agregar personalización para las demás vistas...
);

// Enviar la personalización a la actividad correspondiente
Intent intent = new Intent(context, BlackBoxActivity.class);
intent.putExtra(UI_CUSTOMIZATION, customizationUi);
startActivity(intent);

Descripción de las clases y objetos utilizados en la implementación

UiCustomization:

Es el objeto principal que contiene todas las personalizaciones visuales del SDK. Puede incluir personalizaciones para las vistas de escaneo de documentos, tutoriales, vista de biometría, entre otros.

DocumentScannerView, DocumentTutorialView, etc.:

Estas son clases específicas para cada vista que se quiere customizar. En cada una de ellas, puedes modificar la apariencia del título, subtítulo, color del texto, y los botones.

TextUiCustomization:

Permite personalizar los textos (color y tamaño) en cada vista.

ButtonUiCustomization:

Permite modificar las características de los botones (tamaño de texto, color de fondo, color de texto).

Clase UiCustomization y sus subclases:

`UiCustomization`

La clase UiCustomization permite la personalización de diferentes vistas que forman parte de la interfaz de usuario, como el logo, el escáner de documentos, y las vistas de tutoriales y biometría.

data class UiCustomization(
    var customLogo: LogoTheme? = null,
    val documentScannerView: DocumentScannerView? = null,
    var documentTutorialView: DocumentTutorialView? = null,
    val documentPreviewView: DocumentPreviewView? = null,
    val aTDPView: ATDPView? = null,
    var biometricTutorialView: BiometricTutorialView? = null,
    var biometricPreviewView: BiometricPreviewView? = null,
    var biometricReaderView: BiometricReaderView? = null,
) : Serializable

`LogoTheme`

Esta clase se usa para la configuración del logo del cliente se envían 2 logos uno para cuando el dispositivo esta bajo el tema light y otro cuando esta en dark ambos valores pueden ir en null y se tomara el logo de Olimpia

data class LogoTheme(  
    @DrawableRes var mainLogo: Int? = null,  
    @DrawableRes var darkLogo: Int? = null,  
) : Serializable

`ColorTheme`

Esta clase se usa para la configuración del color de las vistas se envían 2 logos uno para cuando el dispositivo esta bajo el tema light y otro cuando esta en dark ambos valores pueden ir en null.

data class ColorTheme(  
    @ColorRes var mainColor: Int? = null,  
    @ColorRes var darkColor: Int? = null,  
) : Serializable

`ButtonUiCustomization`

Clase utilizada para personalizar los botones en la interfaz de usuario.

data class ButtonUiCustomization(  
    var textSize: Float? = null,  
    var buttonTextColor: ColorTheme? = null,  
    var buttonBackgroundColor: ColorTheme? = null,  
    var buttonText: String? = null,  
) : Serializable

`TextUiCustomization`

Clase utilizada para personalizar el texto en la interfaz de usuario.

data class TextUiCustomization(  
    var textColor: ColorTheme? = null,  
    var textSize: Float? = null,  
    var text: String? = null,  
) : Serializable

Propiedades

customLogo (LogoTheme?): Recurso del logo personalizado (ambos se envian en formato drawable).
documentScannerView (DocumentScannerView?): Personalización de la vista del escáner de documentos.
documentTutorialView (DocumentTutorialView?): Personalización de la vista del tutorial de documentos.
documentPreviewView (DocumentPreviewView?): Personalización de la vista previa del documento.
aTDPView (ATDPView?): Personalización de la vista ATDP.
biometricTutorialView (BiometricTutorialView?): Personalización de la vista tutorial de biometría.
biometricPreviewView (BiometricPreviewView?): Personalización de la vista previa biométrica.
biometricReaderView (BiometricReaderView?): Personalización de la vista del lector biométrico.

Advertencia:

Los valores proporcionados en los parámetros pueden ser null. En caso de que alguno de estos valores se pase como null, se utilizará el valor por defecto establecido en el SDK. Además, las pantallas DocumentScannerView y BiometricReaderView mantendrán el fondo por defecto del SDK.

========================================================

- Anterior - Marca Blanca - SDK <3.0.2