Skip to content

Components

Android Components

Our SDK at Ansa also allows direct component usage in your Jetpack Compose application for you to build out your own UI.

Outlined below are the components available and examples on how to use them.

ActionView

ActionView's are akin to an actionable ListItem, that when clicked trigger an action or navigation to another screen.

ActionView has two overloads that share similar parameters, with you optionally being able to control the whole endSlot for a more interactive list item (e.g with a switch or the ability to display another component such as the CardInfoIndicator.)

ActionView(
   icon = painterResource(R.drawable.refresh),
   title = "Auto reload",
   endLabel = "Off",
   onClick = ::navigateToReloadConfig
)

ActionView(
    title = "Reload source",
    endSlot = {
        Text(
            text = "Add payment",
            style = AnsaTheme.typography.bodyMedium,
            color = AnsaTheme.colors.text.link
        )
    },
    onClick = ::navigateToReloadSource
)

Buttons

We utilize a few different button definitions, styled based on the provided theme. Thus, they are named according to the color they utilize as their foundation as well their size definition.

PrimaryButtonLarge(text = "Click me") { }
PrimaryButtonSmall(text = "Or click me") { }
SecondaryButtonLarge(text = "Nah, click me") { }
IconButtonSmall(icon = painterResource(R.drawable.ic_cute_bunny) { }

CardInfoIndicator

We provide (and utilize in our screens) a reusable Card indicators, displaying - The card's bordered brand logo and the last 4 digits of the card in a Row - The card's bordered brand logo only.

CardInfoIndicator(
    card = usersCard,
    expired = false
)

CardIcon(card = usersCard)

InlineAlert

Our inline alert is similarly to a tooltip, or a call-to-action that renders inline with other content as opposed to floating overtop.

InlineAlert(
    icon = painterResource(R.drawable.ic_warning),
    primaryText = "Your balance is running low",
    secondaryText = "Top up soon to prevent being without coffee"
)

RadioListItem

Our RadioButton is primarily used for listing monetary amounts, and as such the RadioListItemType's are currently tied to a MonetaryAmount. The current types supported are Predefined and Custom, where custom allows for free-form numerical entry within the RadioListItem. Each type has a lambda for checking if a bonus if available for the desired amount, and Custom supports constraints for ensuring the user remains within an upper and lower bounds.

Types are defined as: 

/**
 * A predefined radio list item with a specific amount.
 *
 * @property amount The fixed amount for the item.
 * @property bonus A function to calculate the bonus based on the [amount].
 */
public data class Predefined(
    val amount: MonetaryAmount,
    override val bonus: (MonetaryAmount) -> MonetaryAmount? = { null }
) : RadioListItemType {
    override fun toString(): String {
        return "Predefined:: ${amount.rawAmount}, bonus=${bonus(amount)}"
    }
}

/**
 * A customizable radio list item where the amount can be specified within certain constraints.
 *
 * @property amount The user-defined amount (nullable).
 * @property constraints The range of acceptable values for the custom amount.
 * @property bonus A function to calculate the bonus based on the custom [amount].
 */
public data class Custom(
    val amount: MonetaryAmount? = null,
    val constraints: ClosedRange<Double> = (0.0..Double.MAX_VALUE),
    override val bonus: (MonetaryAmount) -> MonetaryAmount? = { null },
) : RadioListItemType {
    override fun toString(): String {
        return "Custom"
    }
}

To use a RadioListItem, 

RadioListItem(
    type = Predefined(amount = MonetaryAmount(5.00, "USD")),
    isSelected = false,
    onSelected = {
        // The receiver here is a stateful [RadioListItemResult], which is one of:
        // UnSelected - indicating that the user unselected this item
        // CustomEntryStarted - indicating that the user started a custom entry process in this item
        // or Finalized - inidicating that the user has selected (or finalized) the item.
    }
)

RadioGroup

A RadioGroup is simply a collection of a group of RadioListItem's, maintaining the selection state between items for you.

RadioGroup(
    items = itemList,
    initialSelected = null,
    onSelectionChanged = { index, finalizedResult ->
         // in a group context we provide the index of the selected item (for list lookup) as well as the finalized result.
    }
)

We also provide a LazyListScope extension to help place the RadioGroup within a LazyList.

TextInputField

To utilize a themed text field (seen in our RadioListItem when using a Custom RadioListItemType), we provide that as our TextInputField. As seen in that use case, our text field supports leading and trailing icons, hint/placeholder text, as well as keyboard options and actions like you would expect.

val focusRequester = remember { FocusRequester() }
var focused by remember { mutableStateOf(false) }
TextInputField(
    modifier = Modifier.weight(1f).onFocusChanged { focused = it.hasFocus },
    focusRequester = focusRequester,
    leadingIcon = null,
    value = enteredAmount,
    onValueChange = { onAmountChanged(it) },
    keyboardOptions =
        KeyboardOptions(keyboardType = KeyboardType.Number, imeAction = ImeAction.None),
    hint = "Custom amount"
)

ToggleItem

ToggleItem is a toggle, or switch, themed accordingly.

ToggleItem(
    text = "Notifications",
    isChecked = false,
    onCheckedChange = { checked -> }
)

TransactionItem

TransactionItem is a convenience, ListItem typed component that renders details about a given Transaction.

TransactionItem(
    transaction = someTransaction,
)

We also provide a lower level component with direct access to fields within the component for rendering as you'd please.

TransactionItem(
    title = "Coffee",
    dateTime = "formatted date string (01/01/2025 @ 10:00 am)",
    amount = "$5.99",
    adjustment = BalanceAdjustment.Debit,
)