> This page is for version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.clearpay.co.uk/v-2/llms.txt
> - v1: https://developers.clearpay.co.uk/v-1/llms.txt

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

# Logo

The SDK provides two logo views:

* `AfterpayLockup`: the logo lockup. It shows the Clearpay wordmark.
* `AfterpayBadge`: the Clearpay badge.

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](/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.

## Add the badge

`AfterpayBadge` shows the Clearpay badge 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" />
```

## Visibility

Both logo views hide themselves when the SDK isn't enabled for the current configuration. See [When components are hidden](/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`) |