Loading Indicator
SecureLoadingIndicator (Jetpack Compose), SecureLoadingView (XML/View) and SecureLoadingOverlay are optional library components that display an animated loading indicator during payment processing. Once bound to ComgateSecureSession, the component shows and hides automatically based on payment state.
The component is optional - payment works correctly even without it. It serves only as visual feedback for users.
Structure
Loading indicator consists of two visual elements:
- Animated spinner - circular spinner with smoothly rotating arc over static track
- Text label - optional text shown below spinner; default text is automatically derived from session language
By default, component is hidden (visibility GONE) and appears only when payment processing starts.
Jetpack Compose usage
import cz.comgate.sdk.compose.*
val loadingState = rememberLoadingIndicatorState(session)
SecureLoadingIndicator(
state = loadingState,
modifier = Modifier
.fillMaxWidth()
.padding(top = 12.dp)
)
rememberLoadingIndicatorState(session) creates LoadingIndicatorState, automatically binds component to session, and remembers it across recompositions. No additional initialization call is needed.
XML (View) usage
Add SecureLoadingView to layout:
<cz.comgate.sdk.SecureLoadingView
android:id="@+id/loadingView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
app:loadingSpinnerColor="#1E88E5"
app:loadingTrackColor="#BBDEFB"
app:loadingStrokeWidth="5dp"
app:loadingSpinnerSize="52dp"
app:loadingBackgroundColor="#F5F9FF"
app:loadingCornerRadius="12dp"
app:loadingPaddingHorizontal="16dp"
app:loadingPaddingVertical="20dp" />
Then bind component to session in activity/fragment code:
binding.loadingView.setup(session)
Automatic session integration
After binding (setup(session) or rememberLoadingIndicatorState(session)), component behaves automatically:
- Shows when payment processing starts (user presses payment button)
- Hides when terminal payment result arrives (
Paid,Cancelled,Failed, orPending)
Automatic behavior can be disabled anytime, for example if you control loading visibility yourself:
// Compose (via state)
loadingState.isLoadingEnabled = false
// View
binding.loadingView.isLoadingEnabled = false
With isLoadingEnabled = false, show() / hide() methods remain fully functional. Only automatic state-driven visibility is disabled.
Manual control
Component can be controlled independently from session, for custom loading scenarios unrelated to payment:
// Compose
loadingState.show()
loadingState.hide()
// View
binding.loadingView.show()
binding.loadingView.hide()
Text label translation
Default text under spinner is automatically derived from selected payment session language - no manual setup required.
Custom label text can be set like this:
// Compose (via LoadingIndicatorState)
loadingState.setLoadingText("Processing payment...")
// View
binding.loadingView.setLoadingText("Processing payment...")
After custom text is set, automatic session-based translation is no longer applied to this label, even if payment language changes.
Hide label by passing null or empty string:
loadingState.setLoadingText(null)
Styling
Methods
All methods below are available in composable SecureLoadingIndicator update block (direct access to SecureLoadingView instance) and via direct calls on View.
Subset marked as View only is not exposed through LoadingIndicatorState or Compose update block.
| Method | Parameter | Description |
|---|---|---|
setSpinnerColor(color) | Int | Rotating arc color. |
setTrackColor(color) | Int | Static spinner track color. |
setStrokeWidthDp(dp) | Float | Arc/track thickness in dp. |
setSpinnerSizeDp(dp) | Float | Spinner diameter in dp. |
setLoadingText(text) | String? | Label text below spinner. null or "" hides label. |
setLoadingTextColor(color) | Int | Label text color. |
setLoadingTextSizeSp(sp) | Float | Label text size in sp. |
setLoadingBackgroundColor(color) | Int | Background color of whole component. |
setLoadingCornerRadiusDp(dp) | Float | Background corner radius in dp. |
setLoadingPaddingDp(horizontalDp, verticalDp) | Float, Float | Component inner padding in dp. |
setLoadingTextGapDp(dp) | Float | Gap between spinner and label in dp. (View only) |
setLoadingFontFamily(family) | String | Label font family (for example "sans-serif-medium"). (View only) |
setLoadingTypeface(typeface) | Typeface | Label font using Typeface instance. (View only) |
In Compose, LoadingIndicatorState exposes a reduced method set: setSpinnerColor, setTrackColor, setStrokeWidthDp, setSpinnerSizeDp, setLoadingText, setLoadingTextColor, and setLoadingTextSizeSp. Other methods (background, corner radius, padding, etc.) are available only through update block, see example below.
Compose example (update block)
SecureLoadingIndicator(
state = loadingState,
modifier = Modifier.fillMaxWidth(),
update = {
setSpinnerColor(Color.parseColor("#FF0000"))
setTrackColor(Color.parseColor("#FFEBEE"))
setStrokeWidthDp(4f)
setSpinnerSizeDp(48f)
setLoadingBackgroundColor(Color.WHITE)
setLoadingCornerRadiusDp(12f)
setLoadingPaddingDp(16f, 20f)
}
)
XML attributes
| XML attribute | Format | Default | Description |
|---|---|---|---|
app:loadingSpinnerColor | color | #4287f5 | Rotating arc color. |
app:loadingTrackColor | color | #E0E0E0 | Static spinner track color. |
app:loadingStrokeWidth | dimension | 4dp | Arc and track thickness. |
app:loadingSpinnerSize | dimension | 48dp | Spinner diameter. |
app:loadingText | string | (session translation) | Custom label text. If not provided, translated session text is used. |
app:loadingTextColor | color | #666666 | Label text color. |
app:loadingTextSize | dimension | 14sp | Label text size. |
app:loadingTextGap | dimension | 8dp | Gap between spinner and label. |
app:loadingBackgroundColor | color | Transparent | Background color of whole component. |
app:loadingCornerRadius | dimension | 0dp | Background corner radius. |
app:loadingPaddingHorizontal | dimension | 16dp | Horizontal inner padding. |
app:loadingPaddingVertical | dimension | 16dp | Vertical inner padding. |
app:loadingEnabled | boolean | true | Enables/disables automatic visibility during payment processing. |
SecureLoadingOverlay
SecureLoadingOverlay is an alternative loading indicator variant. Unlike SecureLoadingView, which is embedded in your layout, SecureLoadingOverlay appears as a floating panel rendered on top of the entire screen with a dimmed background.
It is not a View — do not add it to an XML layout or Compose tree. Create it as a plain object in code.
The component is optional — payment works correctly even without it.
Usage
Create an instance, optionally configure styling, and call setup(session, activity):
import cz.comgate.sdk.ui.SecureLoadingOverlay
val loadingOverlay = SecureLoadingOverlay()
loadingOverlay.setup(session, this) // 'this' is an Activity / AppCompatActivity
After calling setup, the overlay shows and hides automatically:
- Shows when payment processing starts
- Hides when a terminal payment result arrives (
Paid,Cancelled,Failed) - Detaches when the activity is destroyed (automatically, if the activity implements
LifecycleOwner, whichAppCompatActivitydoes)
If the activity does not implement LifecycleOwner, call detach() manually in onDestroy.
Background dim
The dimAmount property (Float, default 0.5) controls the opacity of the dim layer behind the overlay card:
loadingOverlay.dimAmount = 0.0f // no dim
loadingOverlay.dimAmount = 0.5f // default — semi-transparent black
loadingOverlay.dimAmount = 1.0f // fully opaque black
Styling
The styling API of SecureLoadingOverlay mirrors SecureLoadingView exactly. All methods can be called before or after setup:
| Method | Description | Default |
|---|---|---|
setSpinnerColor(color: Int) | Rotating arc color | #4287f5 |
setTrackColor(color: Int) | Static track color | #E0E0E0 |
setStrokeWidthDp(dp: Float) | Spinner stroke width in dp | 4f |
setSpinnerSizeDp(dp: Float) | Spinner size in dp | 48f |
setLoadingText(text: String?) | Text below spinner; null or empty string hides label | auto from session translation |
setLoadingTextColor(color: Int) | Label text color | #666666 |
setLoadingTextSizeSp(sp: Float) | Label text size in sp | 14f |
setLoadingTextGapDp(dp: Float) | Gap between spinner and label in dp | 8f |
setLoadingFontFamily(family: String) | Label font family (e.g. "sans-serif-medium") | system default |
setLoadingTypeface(typeface: Typeface) | Label typeface directly | system default |
setLoadingBackgroundColor(color: Int) | Card background color; Color.TRANSPARENT for a card-less spinner | white |
setLoadingCornerRadiusDp(dp: Float) | Card corner radius in dp | 16f |
setLoadingPaddingDp(horizontalDp: Float, verticalDp: Float) | Card inner padding in dp | 28f × 28f |
Example:
val loadingOverlay = SecureLoadingOverlay()
loadingOverlay.setSpinnerColor(Color.parseColor("#1E88E5"))
loadingOverlay.setTrackColor(Color.parseColor("#BBDEFB"))
loadingOverlay.setStrokeWidthDp(4f)
loadingOverlay.setSpinnerSizeDp(52f)
loadingOverlay.setLoadingCornerRadiusDp(16f)
loadingOverlay.setLoadingPaddingDp(28f, 28f)
loadingOverlay.dimAmount = 0.6f
loadingOverlay.setup(session, this)
Automatic session integration
Automatic behavior can be disabled via isLoadingEnabled — for example if you manage loading visibility yourself:
loadingOverlay.isLoadingEnabled = false
With isLoadingEnabled = false, show() / hide() methods remain fully functional. Only automatic state-driven visibility is disabled.
Manual control
The overlay can be shown and hidden independently of a session — for custom loading scenarios unrelated to payment:
loadingOverlay.show(activity)
loadingOverlay.hide()
Detaching from session
loadingOverlay.detach()
detach() removes the session listener and dismisses any visible overlay. When using AppCompatActivity, this is called automatically on onDestroy.