Temas - Plugin TapOnPhone

Temas

Configurando temas

Durante o fluxo de inicialização do plugin, é possível fazer as seguintes configurações:

Configuração de atributos de tela

activityTop

data class TapOnPhoneTheme(
    val logo: Drawable? = null,
    val backgroundColor: Int? = null,
    val footerBackgroundColor: Int? = null,
    val amountTextColor: Int? = null,
    val paymentTypeTextColor: Int? = null,
    val statusTextColor: Int? = null,
    val cardAnimation: Int? = null,
    val cardAnimationArrangement: CardAnimationArrangement = CardAnimationArrangement.MIDDLE,
    val cardAnimationSize: Int? = null,
    val brandBackgroundColor: String? = null,
    val pinPadType: PinPadType? = PinPadType.STANDARD,
    val marginTopDPStatusMessages: Float? = null,
    val headerTextContent: HeaderTextContent? = null,
    val marginTopDPAmount: Float? = null,
    val marginTopDPPaymentType: Float? = 8f,
    val topCancelIcon: Drawable? = null
)

Propriedade	Tipo	Descrição	null
logo	Drawable?	Logo exibido na parte superior direita da tela.	sem logo
backgroundColor	Int?	Cor de fundo	`android:colorBackground` do tema
footerBackgroundColor	Int?	Cor de fundo da area de informações de pagamento	`android:colorBackground` do tema
amountTextColor	Int?	Cor do texto de valor	`android:textColor`
paymentTypeTextColor	Int?	Cor do texto de método de pagamento	`android:textColor`
statusTextColor	Int?	Cor do texto de status	`android:textColor`
cardAnimation	Int?	Loader em formato json	`R.raw.card_animation` do loader
cardAnimationArrangement	Int?	Posicionamento vertical do loader	Padrão: CardAnimationArrangement.MIDDLE
brandBackgroundColor	String?	Cor de fundo da tela de animação Visa	cor padrão: `0x1434CB`
pinPadType	PinPadType?	Tipo de exibição do teclado PIN	Padrão: PinPadType.STANDARD
marginTopDPStatusMessages	Float?	Margem entre a cardAnimation e statusTextColor	`android:layout_marginTop`
marginTopDPAmount	Float?	Margem superior do texto de valor	`android:layout_marginTop`
marginTopDPPaymentType	Float?	Margem entre o texto de valor e o texto de método de pagamento	Padrão: `8dp`
topCancelIcon	Drawable?	Ícone de cancelamento exibido na parte superior direita da tela.	Padrão: Ícone default da configuração da tela
headerTextContent	HeaderTextContent?	Conteúdo e configurações dos textos no header

HeaderTextContent

As propriedades title e subtitle são definidas na estrutura TextConfiguration que possues as informações de conteúdo e estilo.

Propriedade	Tipo	Descrição	null
title	TextConfiguration?	Cor do texto de valor
subtitle	TextConfiguration?	Margem enrtre a cardAnimation e statusTextColor
updateFromEvents	Boolean?	Flag para habilitar a atualização dos textos com o status	true ou false

TextConfiguration

Propriedade	Tipo	Descrição	null
marginTop	Float?	Margem superior do texto	`android:layout_marginTop`
text	String?	Texto	`android:text`
textColor	Int?	Cor do texto	`android:textColor`
fontSize	Int?	Tamanho do texto	`android:fontSize`

Como configurar cores válidas para o tema

Os parâmetros backgroundColor, footerBackgroundColor, amountTextColor, paymentTypeTextColor, e statusTextColor precisam ser passados como valores inteiros. Para garantir que as cores sejam interpretadas corretamente pelo SDK, elas devem ser do tipo hexadecimal ou RGB.

Você pode usar os métodos abaixo, por exemplo:

Color.parseColor("#FF000000"),
0xFF000000.toInt(),
Color.rgb(255, 0, 0)
Color.argb(255, 255, 0, 0)

O SDK aceita cores em dois formatos hexadecimais:

#AARRGGBB (com transparência/opacidade)
#RRGGBB (sem transparência, opaco)

Observações:

#AARRGGBB: O primeiro par de caracteres AA representa o nível de transparência (Alpha). Por exemplo, FF indica opacidade total e 00 indica completamente transparente.
#RRGGBB: Neste formato, as cores são totalmente opacas, sem transparência.

Exemplo com Hexadecimal:

TapOnPhoneTheme(
    backgroundColor = Color.parseColor("#FFFFFFFF"),
    amountTextColor = Color.parseColor("#000000"),
    paymentTypeTextColor = Color.parseColor("#FFFF0000"),
    statusTextColor = Color.parseColor("#FF000000"),
)

Exemplo com RGB:

TapOnPhoneTheme(
    backgroundColor = Color.rgb(255, 255, 255),
    amountTextColor = Color.rgb(0, 0, 0),
    paymentTypeTextColor = Color.rgb(255, 255, 0),
    statusTextColor = Color.rgb(255, 0, 0),
)

Load na tela de pedir a leitura do cartão (cardAnimation)

Durante o processo de leitura de cartão, caso queira adicionar uma animação, deve seguir os seguintes passos:

Adicione a biblioteca Lottie em build.gradle

    dependencies {
        implementation 'com.airbnb.android:lottie:$lottieVersion'
    }

Adicionar arquivo .json dentro da pasta app/res/raw.
Dentro da classe TapOnPhoneTheme deve atribuir o valor ao atributo cardAnimation com o caminho do arquivo.

TapOnPhoneTheme(
    cardAnimation = R.raw.card_animation
)

O SDK não aplica a cor do tema na imagem(loader). É recomendado criar uma imagem com suas próprias cores.

Posicionamento da animação na tela

É possível ajustar o posicionamento vertical da animação alterando o valor do atributo * cardAnimationArrangement*. Os possíveis valores são:

// Para a animação ficar anexada ao topo da tela, logo abaixo da logo e do botão de cancelar
val topWithoutMargin = CardAnimationArrangement.TOP()

// Para a animação ficar anexada ao topo da tela, porém com margem customizável
val topWithMargin = CardAnimationArrangement.TOP(64)

// Para a animação ficar centralizada no seu espaço livre
val middle = CardAnimationArrangement.MIDDLE

// Para a animação ficar anexada no fim da tela, logo acima ao footer com o valor
val bottomWithoutMargin = CardAnimationArrangement.BOTTOM()

// Para a animação ficar anexada no fim da tela, porém com margem customizável
val bottomWithMargin = CardAnimationArrangement.BOTTOM(64)

TOP	TOP (com margem 64)	MIDDLE	BOTTOM (com margem 64)	BOTTOM

Customização do teclado PIN (pinPadType)

Durante a configuração do tema da sua aplicação, caso queira mudar a exibição do teclado PIN, deve seguir o passo seguinte:

Dentro da classe TapOnPhoneTheme deve atribuir o valor ao atributo pinPadType como a opção de exemplo abaixo:

TapOnPhoneTheme(
    pinPadType = PinPadType.SHUFFLED
)

STANDARD	SHUFFLED	SHIFTED

Configurando a tela de erros

Durante a configuração do tema da sua aplicação, é possível customizar a tela de erro:

activityTop

data class ErrorScreenConfiguration(
    var backIconConfiguration: BackIconConfiguration? = null,
    var screenBackgroundColor: Int? = null,
    var errorAnimation: Int? = null,
    var errorCodeTextStyle: ErrorCodeTextStyle? = null,
    var errorMessageTextStyle: ErrorMessageTextStyle? = null,
    var backButtonConfiguration: BackButtonConfiguration? = null
)

data class BackIconConfiguration(
    val icon: Drawable? = null,
    val isVisible: Boolean? = true,
)

data class ErrorCodeTextStyle(
    val textColor: Int? = null,
    val fontSize: Int? = null,
)

data class ErrorMessageTextStyle(
    val text: String? = null,
    val textColor: Int? = null,
    val fontSize: Int? = null,
)

data class BackButtonConfiguration(
    val text: String? = null,
    val containerColor: Int? = null,
    val contentColor: Int? = null,
    val isVisible: Boolean? = false,
)

Propriedade	Tipo	Descrição	default (Padrão)
backIconConfiguration	BackIconConfiguration(icon: Drawable?, isVisible: Boolean?)	Logo exibido na parte superior esquerdo da tela	Ícone padrão da SDK. Habilitado por padrão
screenBackgroundColor	Int?	Cor de fundo da tela de erro	0xFFFFFFFF (White)
errorAnimation	Int? (JSON)	Animação de erro	Animação de erro padrão da SDK
errorCodeTextStyle	ErrorCodeTextStyle (textColor: Int?, fontSize: Int?)	Texto do código de erro	textColor: 0xFF000000 (Black), fontSize: 24.sp
errorMessageTextStyle	ErrorMessageTextStyle (text: String?, textColor: Int?, fontSize: Int?)	Texto da mensagem de erro	text: Texto padrão de erro SDK, textColor: 0xFF000000 (Black), fontSize: 22.sp
backButtonConfiguration	BackButtonConfiguration (text: String?, containerColor: Int?, contentColor: Int?, isVisible: Boolean?)	Botão de retorno	text: Try again, containerColor: 0xFF3700B3, contentColor: 0xFFFFFFFF (White), isVisible: false

A seguir, apresentamos um exemplo de como utilizar o parâmetro errorScreenConfiguration na classe TapOnPhoneTheme:

TapOnPhoneTheme(
    errorScreenConfiguration = ErrorScreenConfiguration(
        backIconConfiguration = BackIconConfiguration(
            icon = getDrawable(R.drawable.ic_arrow_back_24),
            isVisible = false
        ),
        screenBackgroundColor = Color.parseColor("#FFBFBFBF"),
        errorCodeTextStyle = ErrorCodeTextStyle(
            textColor = Color.parseColor("#FF8B0000"),
            fontSize = 26
        ),
        errorMessageTextStyle = ErrorMessageTextStyle(
            textColor = Color.parseColor("#FF000000"),
            fontSize = 24
        ),
        backButtonConfiguration = BackButtonConfiguration(
            isVisible = true,
            text = getString(R.string.return_to_home),
            containerColor = Color.parseColor("#FF8B0000"),
            contentColor = Color.parseColor("#FFFFFFFF")
        ),
    ),
)

Se algum desses parâmetros não for especificado, a SDK aplicará as configurações padrão.

Todos os parâmetros são opcionais.

o backButton só será exibido se o parametro isVisible estiver como true.