> This page is for Afterpay Online Developer, version Main (default).
> For other versions, use one of these documentation indexes:
> - Main (default): https://developers.afterpay.com/afterpay-online-developer/main/llms.txt
> - v1: https://developers.afterpay.com/afterpay-online-developer/v-1/llms.txt
> - Chinese: https://developers.afterpay.com/afterpay-online-developer/chinese/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.afterpay.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.afterpay.com/_mcp/server.

# Logo

The SDK provides two logo views:

* `AfterpayLockup`: the logo lockup. It shows the Afterpay wordmark, or the Clearpay wordmark for UK merchants. For US merchants, it shows the Cash App Afterpay lockup: the Cash App icon next to the Afterpay wordmark.
* `AfterpayBadge`: the Afterpay or Clearpay badge for merchants outside the US. It's always hidden for US merchants.

Before you add a logo, set the merchant configuration. The logo views read the configuration only when you create them or set their style. See [UI components](/afterpay-online-developer/guides/sdk/android-sdk/ui-components#configure-the-sdk-first).

## Add the lockup

#### XML

```xml
<com.afterpay.android.view.AfterpayLockup
  android:layout_width="120dp"
  android:layout_height="wrap_content"
  app:afterpayStyle="default_style" />
```

#### Kotlin

```kotlin
val lockup = AfterpayLockup(context).apply {
  style = AfterpayWidgetStyle.Default
}
container.addView(lockup)
```

The lockup scales to the width you give it and keeps its aspect ratio. Its minimum width is `64dp`.

The view sets its content description to the brand name and is focusable, so screen readers announce it.

## Lockup styles

The lockup has no background, so choose a style that contrasts with the color behind it. The default style is `Default`.

| Style                                 | XML value         | Use on            | Appearance |
| ------------------------------------- | ----------------- | ----------------- | ---------- |
| `AfterpayWidgetStyle.Default`         | `default_style`   | Light backgrounds |            |
| `AfterpayWidgetStyle.Alt`             | `alt`             | Dark backgrounds  |            |
| `AfterpayWidgetStyle.MonochromeDark`  | `monochromeDark`  | Dark backgrounds  |            |
| `AfterpayWidgetStyle.MonochromeLight` | `monochromeLight` | Light backgrounds |            |

The lockup shows the wordmark in the foreground color of the matching color scheme, so `Default` and `MonochromeLight` look the same. UK merchants see the Clearpay wordmark in the same colors.

For US merchants, `Default` and `Alt` render the full-color Cash App Afterpay lockup, with the Cash App icon in Cash App green, and the background guidance is reversed: use `Default` on dark backgrounds and `Alt` on light backgrounds. The monochrome styles render the lockup in a single color. See [Styles and color schemes](/afterpay-online-developer/guides/sdk/android-sdk/ui-components#styles-and-color-schemes).

## Add the badge

`AfterpayBadge` shows the Afterpay badge, or the Clearpay badge for UK merchants, on a colored background. With the `Default` style, the badge is mint with a black wordmark. It has the same `style` property and `app:afterpayStyle` attribute as the lockup, and a minimum width of `64dp`.

```xml
<com.afterpay.android.view.AfterpayBadge
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  app:afterpayStyle="default_style" />
```

> **The badge is hidden for US merchants**
>
> Cash App Afterpay branding doesn't include a badge. When the configured locale is `en-US`, `AfterpayBadge` sets its visibility to `View.GONE`. Use `AfterpayLockup` for US merchants.

## Visibility

Both logo views hide themselves when the SDK isn't enabled for the current configuration. See [When components are hidden](/afterpay-online-developer/guides/sdk/android-sdk/ui-components#when-components-are-hidden).

## Attributes and properties

| View             | XML attribute       | Kotlin property | Default                     |
| ---------------- | ------------------- | --------------- | --------------------------- |
| `AfterpayLockup` | `app:afterpayStyle` | `style`         | `default_style` (`Default`) |
| `AfterpayBadge`  | `app:afterpayStyle` | `style`         | `default_style` (`Default`) |