Personalización del SDK

Esta guía explica cómo personalizar la apariencia del SDK en tu aplicación. Se pueden modificar colores, logos, animaciones, textos, fuentes e iconos.

Se recomienda agregar las modificaciones tanto en el tema claro como oscuro (night).

Colores y logo

Para cambiar los colores principales y el logo del SDK:

1. Crea un archivo sdk_styles.xml en la aplicación del cliente.

2. Añade o modifica el valor hex (RGB) color y logo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- SdkTheme -->
    <color name="sdkPrimaryColor">#7636FC</color>
    <color name="sdkSecondaryColor">#03DAC5</color>
    <color name="sdkBackgroundColor">#FFFFFF</color>
    <color name="sdkErrorColor">#DD3631</color>
    <!-- SdkColorsPalette -->
    <color name="sdkTitleTextColor">#1D2C4D</color>
    <color name="sdkBodyTextColor">#526080</color>
    <color name="sdkSuccessColor">#07A13A</color>
    <color name="sdkNeutralColor">#202C4B</color>
    <color name="sdkAccentColor">#EA7547</color>
    <color name="sdkTopIconsColor">#243760</color>
    <color name="sdkButtonTextColor">#FFFFFF</color>
    <!-- SDK BUTTONS -->
    <dimen name="sdk_buttons_corner_dimen">32dp</dimen>
    <!-- SDK LOGO -->
    <drawable name="sdk_logo">@drawable/ic_demo_logo</drawable>

  <!-- ..Add particulars of each component... -->

</resources>

• Los colores principales que afectan también a animaciones son: sdkPrimaryColor, sdkErrorColor, sdkSuccessColor, sdkNeutralColor, sdkAccentColor.

• Para incluir el logo hay que añadir en el fichero la siguiente línea, con el nombre configurado.

<!-- SDK LOGO -->
<drawable name="sdk_logo">@drawable/logo_name</drawable>

Se recomienda formato vectorial (.xml).

Los componentes de Selphi y SelphID lleva su zip de recursos asociados que se mantiene ajeno a esta característica del SDK.

Animaciones

Las animaciones (Lottie) pueden sobrescribirse colocando archivos en res/raw/ con el mismo nombre que los usados por el SDK.

anim_cancelled.json
anim_success.json

Textos

Los textos del SDK se pueden modificar, añadiendo el siguiente fichero XML en la aplicación del cliente y modificar los string.

    <string name="sdk_permissions_exit_alert_title">Permiso denegado</string>
    <string name="sdk_permissions_exit_alert_question">Para poder continuar es necesario que </string>
    <string name="sdk_permissions_exit_alert_question_other">permitas el acceso al permiso necesario.</string>
    <string name="sdk_permissions_exit_alert_question_camera">permitas el acceso a la cámara.</string>
    <string name="sdk_permissions_exit_alert_question_microphone">permitas el acceso al micrófono.</string>
    <string name="sdk_permissions_exit_alert_confirm">Reintentar</string>
    <string name="sdk_permissions_exit_alert_confirm_settings">Ir a ajustes</string>
    <string name="sdk_exit_alert_title">Cancelar el proceso</string>
    <string name="sdk_exit_alert_question">¿Quieres abandonar el proceso?</string>
    <string name="sdk_exit_alert_finish">Abandonar</string>
    <string name="sdk_exit_alert_cancel">Cancelar</string>
    <string name="sdk_exit_finish_exit">Finalizar</string>
    <string name="sdk_text_video_error">Ha ocurrido un error en la conexión con el vídeo. Inténtelo de nuevo.</string>
    <string name="sdk_text_socket_error">Ha ocurrido un problema con la conexión hacia el servidor. Inténtelo de nuevo.</string>
    <string name="sdk_text_data_error">Ha ocurrido un error con la configuración del sistema. Inténtelo de nuevo.</string>
    <string name="sdk_text_timeout_error">Lo sentimos, la operación ha excedido el tiempo de espera. Por favor, inténtalo de nuevo más tarde.</string>
    <string name="sdk_network_connection_error_title">Revisa tu conexión a internet</string>
    <string name="sdk_network_connection_error_desc">Comprueba que tu conexión es estable e inténtalo de nuevo.</string>
    <string name="sdk_network_connection_error_button">Salir</string>
    <string name="sdk_close">Cerrar proceso</string>
    <string name="sdk_info">Mostrar tutorial</string>
    <string name="sdk_previous_page">Página anterior</string>
    <string name="sdk_next_page">Próxima página</string>
    <string name="sdk_image_captured">Imagen capturada</string>
    <string name="sdk_confirmation_retry">Reintentar</string>
    <string name="sdk_confirmation_continue">Continuar</string>
    <string name="sdk_skip">OMITIR</string>

Fuentes

• Añade los archivos .ttf en la carpeta res/font/.

• Asigna el nombre exacto esperado por el SDK. Si el nombre no coincide, la fuente no se aplicará.

Iconos de la barra superior

Para personalizar los iconos de la barra superior:

1. Crea los recursos en la carpeta res/drawable/.

2. Usa los siguientes nombres:

ic_fphi_close_arrow
ic_fphi_close
ic_fphi_info