Stylizace komponent

Komponenty knihovny lze stylovat prostřednictvím update bloku v Jetpack Compose nebo pomocí XML atributů v layoutu. Oba přístupy lze kombinovat.

SecureTextField (vstupní pole)

Atributy a metody se vztahují na všechny vstupní komponenty typu SecureTextField: SecurePanField, SecureExpiryField, SecureCvvField a SecureFullNameField.

Metody stylování

Metoda	Parametr	Popis
setHint(hint)	String	Nastaví placeholder text.
setTextColor(color)	Int	Nastaví barvu textu.
setHintColor(color)	Int	Nastaví barvu placeholder textu.
setTextSize(sp)	Float	Nastaví velikost textu v sp.
setFontFamily(family)	String	Nastaví rodinu písma dle názvu.
setTypeface(typeface)	Typeface	Nastaví písmo pomocí instance Typeface.
setBackgroundColor(color)	Int	Nastaví barvu pozadí.
setBorderColor(color)	Int	Nastaví barvu ohraničení v normálním stavu.
setFocusedBorderColor(color)	Int	Nastaví barvu ohraničení při zaměření.
setBorderWidth(widthPx)	Int	Nastaví šířku ohraničení v pixelech.
setBorderWidthDp(widthDp)	Float	Nastaví šířku ohraničení v dp.
setCornerRadius(radiusPx)	Float	Nastaví zaoblení rohů v pixelech.
setCornerRadiusDp(radiusDp)	Float	Nastaví zaoblení rohů v dp.
setErrorColor(color)	Int	Nastaví barvu chyby (text i ohraničení).
setErrorTextSize(sp)	Float	Nastaví velikost chybového textu v sp.
setPadding(horizontalPx, verticalPx)	Int, Int	Nastaví vnitřní odsazení v pixelech.
setPaddingDp(horizontalDp, verticalDp)	Float, Float	Nastaví vnitřní odsazení v dp.
showLabel	Boolean	Zobrazení labelu nad polem (true/false). Výchozí true.
labelText	String?	Vlastní text labelu. Při null se použije výchozí přeložený label.
setLabelColor(color)	Int	Nastaví barvu labelu.
setLabelTextSize(sp)	Float	Nastaví velikost labelu v sp.

Informace

Pro většinu případů doporučujeme používat *Dp varianty setterů (setBorderWidthDp, setCornerRadiusDp, setPaddingDp). Vstupy jsou v dp a knihovna převod na pixely zajistí interně. Parametry těchto metod jsou v API anotované @Dimension(unit = Dimension.DP), takže je zřejmé, jakou jednotku očekávají.

field.setBorderWidthDp(2f)
field.setCornerRadiusDp(12f)

Příklad v Compose (update blok)

SecurePanField(
    state = panState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        setBackgroundColor(Color.parseColor("#FAFAFA"))
        setBorderColor(Color.parseColor("#1976D2"))
        setFocusedBorderColor(Color.parseColor("#0D47A1"))
        setBorderWidthDp(2f)
        setCornerRadiusDp(12f)
        setTextColor(Color.parseColor("#212121"))
        setHintColor(Color.parseColor("#9E9E9E"))
        setTextSize(16f)
        setErrorColor(Color.parseColor("#C62828"))
        setPaddingDp(horizontalDp = 14f, verticalDp = 10f)
        setFontFamily("sans-serif-medium")
        showLabel = true
        labelText = null // null = použije se výchozí překlad dle session.translation
        setLabelColor(Color.parseColor("#616161"))
        setLabelTextSize(12f)
    }
)

Pokud chcete label skrýt:

update = {
    showLabel = false
}

XML atributy

XML atribut	Formát	Popis
app:secureFieldHint	string	Placeholder text zobrazený v prázdném poli.
app:secureFieldTextColor	color	Barva textu.
app:secureFieldHintColor	color	Barva placeholder textu.
app:secureFieldTextSize	dimension	Velikost textu (např. 18sp).
app:secureFieldFontFamily	string	Rodina písma (např. "monospace", "sans-serif-medium").
app:secureFieldBackgroundColor	color	Barva pozadí pole.
app:secureFieldBorderColor	color	Barva ohraničení v normálním stavu.
app:secureFieldBorderWidth	dimension	Šířka ohraničení (např. 2dp).
app:secureFieldCornerRadius	dimension	Zaoblení rohů (např. 12dp).
app:secureFieldFocusedBorderColor	color	Barva ohraničení při zaměření (focus).
app:secureFieldErrorColor	color	Barva chybového textu a ohraničení v chybovém stavu.
app:secureFieldErrorTextSize	dimension	Velikost chybového textu.
app:secureFieldPaddingHorizontal	dimension	Horizontální vnitřní odsazení.
app:secureFieldPaddingVertical	dimension	Vertikální vnitřní odsazení.
app:secureFieldLabel	string	Vlastní text labelu nad polem. Pokud není uveden, použije se výchozí přeložený label.
app:secureFieldShowLabel	boolean	Zobrazení labelu (true/false). Výchozí true.
app:secureFieldLabelColor	color	Barva labelu.
app:secureFieldLabelTextSize	dimension	Velikost labelu (např. 12sp).

Stavy ohraničení

Ohraničení pole se automaticky mění podle aktuálního stavu:

Stav	Barva ohraničení	Priorita
Chyba	errorColor	Nejvyšší
Zaměřeno (focus)	focusedBorderColor	Střední
Normální	borderColor	Nejnižší

Stylování více polí najednou

Pomocí rozšiřující funkce lze aplikovat stejný styl na všechna pole přes update blok:

fun SecureTextField.applyCommonStyle() {
    setBackgroundColor(Color.parseColor("#FAFAFA"))
    setBorderColor(Color.parseColor("#1976D2"))
    setFocusedBorderColor(Color.parseColor("#0D47A1"))
    setBorderWidthDp(2f)
    setCornerRadiusDp(12f)
    setTextColor(Color.parseColor("#212121"))
    setTextSize(16f)
}

SecurePanField(
    state = panState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setFontFamily("sans-serif-medium")  // specifické pro PAN pole
    }
)
SecureExpiryField(
    state = expiryState,
    modifier = Modifier.fillMaxWidth(),
    update = { applyCommonStyle() }
)
SecureCvvField(
    state = cvvState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setTypeface(Typeface.MONOSPACE)  // specifické pro CVV pole
    }
)
SecureFullNameField(
    state = fullNameState,
    modifier = Modifier.fillMaxWidth(),
    update = {
        applyCommonStyle()
        setHint("Jméno a příjmení") // specifické pro jméno plátce
    }
)

Použití android:background

U SecureField lze v XML použít také standardní atribut android:background:

<cz.comgate.sdk.SecurePanField
    android:background="#E8F5E9"
    ... />

Pro čitelnější konfiguraci doporučujeme preferovat atribut app:secureFieldBackgroundColor, který je určen přímo pro stylování pozadí pole.

SecurePayButton (platební tlačítko)

Metody stylování

Metoda	Parametr	Popis
setText(text)	String	Nastaví text tlačítka.
setButtonTextColor(color)	Int	Nastaví barvu textu (aktivní stav).
setButtonTextSize(sp)	Float	Nastaví velikost textu v sp.
setButtonFontFamily(family)	String	Nastaví rodinu písma.
setButtonTypeface(typeface)	Typeface	Nastaví písmo pomocí instance Typeface.
setButtonBackgroundColor(color)	Int	Nastaví barvu pozadí (aktivní stav).
setButtonBorderColor(color)	Int	Nastaví barvu ohraničení.
setButtonBorderWidth(widthPx)	Int	Nastaví šířku ohraničení v pixelech.
setButtonBorderWidthDp(widthDp)	Float	Nastaví šířku ohraničení v dp.
setButtonCornerRadius(radiusPx)	Float	Nastaví zaoblení rohů v pixelech.
setButtonCornerRadiusDp(radiusDp)	Float	Nastaví zaoblení rohů v dp.
setDisabledBackgroundColor(color)	Int	Nastaví barvu pozadí v deaktivovaném stavu.
setDisabledTextColor(color)	Int	Nastaví barvu textu v deaktivovaném stavu.
setButtonPadding(horizontalPx, verticalPx)	Int, Int	Nastaví vnitřní odsazení v pixelech.
setButtonPaddingDp(horizontalDp, verticalDp)	Float, Float	Nastaví vnitřní odsazení v dp.
setLoadingAnimationEnabled(enabled)	Boolean	Povoluje nebo zakazuje shimmer sweep animaci během zpracování platby. Výchozí: true.

Informace

Pro většinu případů doporučujeme používat *Dp varianty setterů (setButtonBorderWidthDp, setButtonCornerRadiusDp, setButtonPaddingDp). Vstupy jsou v dp a knihovna převod na pixely zajistí interně.

Příklad v Compose (update blok)

SecurePayButton(
    session = session,
    collector = collector,
    onPaymentResult = { result -> /* ... */ },
    paymentParamsProvider = { /* ... */ },
    modifier = Modifier.fillMaxWidth(),
    update = {
        setText("Zaplatit")
        setButtonBackgroundColor(Color.parseColor("#1E88E5"))
        setButtonTextColor(Color.WHITE)
        setButtonCornerRadiusDp(12f)
        setButtonBorderColor(Color.parseColor("#1565C0"))
        setButtonBorderWidthDp(1f)
        setDisabledBackgroundColor(Color.parseColor("#CFD8DC"))
        setDisabledTextColor(Color.parseColor("#78909C"))
        setButtonTextSize(16f)
        setLoadingAnimationEnabled(true)
    }
)

XML atributy

XML atribut	Formát	Popis
app:payButtonText	string	Text tlačítka (výchozí: "Pay").
app:payButtonTextColor	color	Barva textu v aktivním stavu.
app:payButtonTextSize	dimension	Velikost textu.
app:payButtonFontFamily	string	Rodina písma.
app:payButtonBackgroundColor	color	Barva pozadí v aktivním stavu.
app:payButtonBorderColor	color	Barva ohraničení.
app:payButtonBorderWidth	dimension	Šířka ohraničení.
app:payButtonCornerRadius	dimension	Zaoblení rohů.
app:payButtonDisabledBackgroundColor	color	Barva pozadí v deaktivovaném stavu.
app:payButtonDisabledTextColor	color	Barva textu v deaktivovaném stavu.
app:payButtonPaddingHorizontal	dimension	Horizontální vnitřní odsazení.
app:payButtonPaddingVertical	dimension	Vertikální vnitřní odsazení.
app:payButtonLoadingAnimation	boolean	Povoluje/zakazuje shimmer sweep animaci během zpracování platby. Výchozí: true.

Automatický deaktivovaný stav

Pokud nejsou explicitně nastaveny barvy pro deaktivovaný stav (payButtonDisabledBackgroundColor, payButtonDisabledTextColor), tlačítko automaticky vypočítá tlumenou variantu z aktivních barev snížením průhlednosti na 50 %.

Animace během zpracování platby

Po stisku tlačítka je nad jeho obsahem zobrazena shimmer sweep animace — poloprůhledný třpytivý pruh, který neustále přejíždí zleva doprava přes tlačítko. Tlačítko přitom zachovává plnou barvu pozadí a původní text — animace nese informaci o probíhajícím zpracování.

Animaci lze vypnout v update bloku nebo přímo na stavu:

SecurePayButton(
    // ...
    update = {
        setLoadingAnimationEnabled(false)
    }
)

Po vypnutí animace zůstává tlačítko během zpracování v klidném deaktivovaném vzhledu bez vizualního efektu.

SecurePaymentStatusView (stavový banner)

Použití v Compose

V Compose se komponenta používá přes rememberPaymentStatusState(). Vizuální stylování není v Compose API přímo exponováno — komponenta automaticky aplikuje příslušné barvy (zelená/oranžová/červená) podle stavu platby. Překlad zpráv lze nastavit přes translation na stavu:

val statusState = rememberPaymentStatusState()
statusState.translation = Translation.Czech

SecurePaymentStatusView(state = statusState)

// Zobrazení výsledku:
statusState.showStatus(paymentResult)
// nebo:
statusState.showError("Vlastní chybová zpráva")
// Skrytí:
statusState.clear()

XML atributy

XML atribut	Formát	Popis
app:statusViewText	string	Počáteční text zprávy (volitelné).
app:statusViewTextColor	color	Barva textu.
app:statusViewTextSize	dimension	Velikost textu.
app:statusViewFontFamily	string	Rodina písma.
app:statusViewBackgroundColor	color	Barva pozadí banneru.
app:statusViewBorderColor	color	Barva ohraničení.
app:statusViewBorderWidth	dimension	Šířka ohraničení.
app:statusViewCornerRadius	dimension	Zaoblení rohů.
app:statusViewPaddingHorizontal	dimension	Horizontální vnitřní odsazení.
app:statusViewPaddingVertical	dimension	Vertikální vnitřní odsazení.

Metody stylování

Metoda	Parametr	Popis
setTextColor(color)	Int	Nastaví barvu textu.
setTextSize(sp)	Float	Nastaví velikost textu v sp.
setFontFamily(family)	String	Nastaví rodinu písma.
setTypeface(typeface)	Typeface	Nastaví písmo pomocí instance Typeface.
setStatusBackgroundColor(color)	Int	Nastaví barvu pozadí.
setBorderColor(color)	Int	Nastaví barvu ohraničení.
setBorderWidth(widthPx)	Int	Nastaví šířku ohraničení v pixelech.
setBorderWidthDp(widthDp)	Float	Nastaví šířku ohraničení v dp.
setCornerRadius(radiusPx)	Float	Nastaví zaoblení rohů v pixelech.
setCornerRadiusDp(radiusDp)	Float	Nastaví zaoblení rohů v dp.
setStatusPadding(horizontalPx, verticalPx)	Int, Int	Nastaví vnitřní odsazení v pixelech.
setStatusPaddingDp(horizontalDp, verticalDp)	Float, Float	Nastaví vnitřní odsazení v dp.

Informace

Pro většinu případů doporučujeme používat *Dp varianty setterů (setBorderWidthDp, setCornerRadiusDp, setStatusPaddingDp). Vstupy jsou v dp a knihovna převod na pixely zajistí interně.

Tip

Komponenta začíná ve stavu GONE (skrytá). Zobrazí se automaticky po zavolání showStatus() a skryje se po zavolání clear(). Více informací o zobrazování stavů naleznete v sekci Výsledky platby.