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.

Add the lockup

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

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.

<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.

Attributes and properties