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

Para cambiar los colores y el logo del SDK, se deben incluir Assets en la carpeta Resources de la aplicación del cliente.

Generales (SDK)

sdkAccentColor
sdkBackgroundColor
sdkBackgroundDisabled
sdkBodyTextColor
sdkDisabledBackgroundColor
sdkButtonTextColor
sdkErrorColor
sdkNeutralColor
sdkPrimaryColor
sdkSecondaryColor
sdkSuccessColor
sdkTitleTextColor
sdkTopIconsColor

Video llamadas (específico del componente)

sdkActionsBackgroundColor
sdkButtonBackgroundColor

Video identificación (específico del componente)

sdkTopIconsVideoColor

Nota sobre animaciones

Las animaciones aplican estilos basados en los siguientes cinco colores fundamentales:

sdkPrimaryColor
sdkErrorColor
sdkSuccessColor
sdkNeutralColor
sdkAccentColor

Cambiar cualquiera de ellos afectará directamente a la apariencia de las animaciones de los componentes.

Los componentes Selphi y SelphID utilizan su propio paquete de recursos (zip), por lo que no se ven afectados por esta personalización.

Animaciones

Si se desea modificar las animaciones (Lottie) de la SDK, basta con incluir las nuevas animaciones con el mismo nombre en la carpeta Resources de la aplicación.

Los nombres exactos de las animaciones están documentados en la sección de personalización de cada componente.

Textos

Los textos pueden personalizarse sobrescribiendo el valor de las claves en un fichero Localizable.strings.

• Las claves con sufijo _alt son los textos utilizados en las etiquetas de accesibilidad necesarias para la funcionalidad de VoiceOver.

• Cada componente incluye el listado de claves disponibles para modificación.

Fuentes

Para modificar la tipografía de la SDK:

1. Agregar los ficheros .ttf en la carpeta font de la aplicación.

2. Renombrarlos según la siguiente imagen.

Iconos de la barra superior

Para personalizar los iconos de la barra superior, se deben crear los siguientes recursos en la carpeta drawables:

ic_fphi_close_arrow
ic_fphi_close
ic_fphi_info