Customizing the Account Kit UI in Android

The user interface for the login screens are provided by the SDK. The login screens are launched as part of a new Activity, and customized to fit with the look and feel of your app. For guidelines on customizing the UI, see Customize the UI in Best Practices.

Account Kit offers two ways to customize the the user interface:

  • Basic UI with three skins and limited customizability
  • Advanced UI with the ability to customize individual elements

If you already customized your UI with version 4.19.0 or earlier of the SDK, your customization will continue to work, but you can easily migrate your customization to the new the new SDK. For more information, see Migrating Your Customization.

Basic UI

The basic UI offers three skins to choose from.

For each skin you can optionally add a background image. If you add a background image, you can also choose a color and the background tint opacity as a value between 55-85%. The background tint also determines the color of the disclosure text, whether the text appears in black disclosure on a white background, or white on a black background.

The skin and the options you choose controls the appearance of phone-number and email screens and all other screens in the login flow, including the instant verification screens.

Classic Skin

The following pictures illustrate the classic skin without a background image, with an background image and a white tint, and with an image and a black tint.

The other screens in the login flow follow the skin and options you choose. For example, the following verification screen represents the classic skin with a background image and a white tint.

Translucent Skin

The following pictures illustrate the translucent skin without a background image, with an background image and a white tint, and with an image and a black tint.

Contemporary Skin

The following pictures illustrate the contemporary skin without a background image, with an background image and a white tint, and with an image and a black tint.

Adding a Skin for your App

You choose a skin for your app by creating a UIManager to hold your settings and then using the AccountKitConfigurationBuilder object to set them for your app. The following code shows how to create a skin without a background image.

// constructor without a background image
AccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder;
UIManager uiManager;

// Skin is CLASSIC, CONTEMPORARY, or TRANSLUCENT

uiManager = new SkinManager(
            Skin <skin>,
            @ColorInt int <primaryColor>);

configurationBuilder.setUIManager(uiManager);

The following codes shows how to create a skin with a background image.

// constructor with a background image imageAccountKitConfiguration.AccountKitConfigurationBuilder configurationBuilder;
UIManager uiManager;

// Skin is CLASSIC, CONTEMPORARY, or TRANSLUCENT
// Tint is WHITE or BLACK
// TintIntensity is a value between 55-85%

uiManager = new SkinManager(
            Skin <skin>,
            @ColorInt int <primaryColor>,
            @DrawableRes int <backgroundImage>,
            Tint <tint>,
            double <tintIntensity>);

configurationBuilder.setUIManager(uiManager);

Advanced UI

The advanced UI gives you the ability to customize many elements of the interface independently. With the advanced UI, you can customize the following elements.

The following table shows the full set of customizable options for the various screens.

Property Name Description Type

com_accountkit_primary_color

Primary color for the UI elements

Color

com_accountkit_primary_text_color

Primary color for the text

Color

com_accountkit_secondary_color

The background color of the input boxes

Color

com_accountkit_secondary_text_color

This colors the input text and the legal text

Color

com_accountkit_background

Background image underneath the UI elements. References an image resource

Reference

com_accountkit_background_color

Color for the background of the UI if an image is not used

Color

com_accountkit_button_background_color

Creates a background for the Next and Continue Button

Color

com_accountkit_button_border_color

Creates a border for the Next and Continue Button

Color

com_accountkit_button_disabled_background_color

Color for the Next and Continue buttons when inactive

Color

com_accountkit_button_disabled_border_color

Color for the Next and Continue button border when inactive

Color

com_accountkit_button_disabled_text_color

Text color while the Next and Continue Buttons are disabled

Color

com_accountkit_button_pressed_background_color

Button color while buttons are in a depressed state

Color

com_accountkit_button_pressed_border_color

Button border color while buttons are in a depressed state

Color

com_accountkit_button_pressed_text_color

Button text while buttons are in a depressed state

Color

com_accountkit_button_text_color

Button text in the default state

Color

com_accountkit_input_accent_color

Color for input accents, such as the drop down for country code selector

Color

com_accountkit_input_background_color

Color for the background of the input boxes. Overrides com_accountkit_secondary_color

Color

com_accountkit_input_border_color

Color of the input boxes' border

Color

com_accountkit_input_text_color

Text color of the input text for Phone Number and Confirmation Code

Color

Instant Verification Screens

If you are using version 4.17 or later of the Facebook SDK for Android, you can also customize three screens for instant verification. For more information on this feature, see Instant Verification in the Overview.

In the instant-verification login flow, which doesn't use an SMS code, three screens replace the screens for the SMS state, as shown in the following table. For a complete list of states, see LoginFlowState.

Instant-Verification Flow SMS Flow

ACCOUNT_VERIFIED

SENT_CODE

CONFIRM_ACCOUNT_VERIFIED

CODE_INPUT

CONFIRM_INSTANT_VERIFICATION_LOGIN

VERIFYING_CODE

Note: Please don't obscure any elements of the Account Kit user interface when you adjust the text and background colors. This is required by our platform policy.

Using the Advanced UI Manager

Account Kit offers deeper customization of the login UI by allowing you to define an Advanced UI manager.

You can customize the dotted regions below, as well as the text for the different buttons.

You do this by creating a class that methods to return custom fragments to be inserted in the login UI. For each fragment you want to customize, you must provide customizations appropriate to the current state of the login flow. If you do not wish to customize a section of the UI, simply either do not implement the method, or return nil to fall back to the default view for that portion of the screen.

public class MyAdvancedUIManager extends BaseUIManager {

    private final ButtonType confirmButton;
    private final ButtonType entryButton;
    private final TextPosition textPosition;

    public MyAdvancedUIManager(
            final ButtonType confirmButton,
            final ButtonType entryButton,
            final LoginType loginType,
            final TextPosition textPosition,
            final int themeResourceId) {
        super(loginType, themeResourceId);
        this.confirmButton = confirmButton;
        this.entryButton = entryButton;
        this.textPosition = textPosition;
    }

    private MyAdvancedUIManager(final Parcel source) {
        super(source);
        String s = source.readString();
        final ButtonType confirmButton = s == null ? null : ButtonType.valueOf(s);
        s = source.readString();
        final ButtonType entryButton = s == null ? null : ButtonType.valueOf(s);
        s = source.readString();
        final TextPosition textPosition = s == null ? null : TextPosition.valueOf(s);
        this.confirmButton = confirmButton;
        this.entryButton = entryButton;
        this.textPosition = textPosition;
    }

    @Override
    @Nullable
    public Fragment getHeaderFragment(final LoginFlowState state) {
        Fragment headerFragment;
        switch (state) {
            case PHONE_NUMBER_INPUT:
            case EMAIL_INPUT:
            case EMAIL_VERIFY:
            case SENDING_CODE:
            case SENT_CODE:
            case CODE_INPUT:
            case VERIFYING_CODE:
            case VERIFIED:
            case ACCOUNT_VERIFIED:
            case CONFIRM_ACCOUNT_VERIFIED:
            case CONFIRM_INSTANT_VERIFICATION_LOGIN:
                // insert appropriate customizations for headerFragment
            case ERROR:
                // handle appropriate error for headerFragment
            default:
                headerFragment = new Fragment();
        }

        return headerFragment;
    }

    public @Nullable ButtonType getButtonType(final LoginFlowState state) {
        switch (state) {
            case PHONE_NUMBER_INPUT:
                return entryButton;
            case EMAIL_INPUT:
                return entryButton;
            case CODE_INPUT:
                return confirmButton;
            default:
                return null;
        }
    }

    @Override
    public void onError(final AccountKitError error) {
        // handle error
    }

    @Override
    public void writeToParcel(final Parcel dest, final int flags) {
        super.writeToParcel(dest, flags);
        dest.writeString(confirmButton != null ? confirmButton.name() : null);
        dest.writeString(entryButton != null ? entryButton.name() : null);
        dest.writeString(textPosition != null ? textPosition.name() : null);
    }

    public static final Creator<MyAdvancedUIManager> CREATOR
            = new Creator<MyAdvancedUIManager>() {
        @Override
        public MyAdvancedUIManager createFromParcel(final Parcel source) {
            return new MyAdvancedUIManager(source);
        }

        @Override
        public MyAdvancedUIManager[] newArray(final int size) {
            return new MyAdvancedUIManager[size];
        }
    };
}

Migrating Your Customization

If you've customized your app with version 4.19.0 or earlier of the SDK, you will not need to update your app immediately when you adopt the newest SDK. Your customization will continue to be supported for a limited time. This is to give time to test the new skins make the necessary changes when you are ready. Even though the old customization is supported, you should use the new customization methods as soon as possible because the old ones will eventually be deprecated.

Although the new customization is backwards compatible, it has a new default. If you have not specified an Advanced UI manager and have not chosen multiple colors, the customization will default to the classic skin. If you have specified an Advanced UI manager or specified multiple colors, the new customization reproduces your choices.

To migrate your customization, if your customization uses an advanced UI manager, use the following code. In this example, configuration is an instance of AccountKitConfigurationBuilder.

public class CustomAdvancedUIManager extends BaseUIManager {
    /*implementation here */
}

UIManager advancedUIManager = new CustomAdvancedUIManager(loginType, themeId, ...);
configuration.setUIManager(advancedUIManager);

If your customization uses a theme, use the following code to migrate you customization.

UIManager themeManager = new ThemeUIManager(loginType, themeId);
configuration.setUIManager(themeManager);

UI Extras

Localization

Localization support is also provided by the SDK. The locales within the supported country list here are packaged with the SDK, and don't require anything extra to display text in the appropriate locale.

If you don't want localization or want localization only for certain locals, remove the localization strings for the ones you don't want from the SDK. This can significantly reduce the size of the SDK.

Legal Text

If you have links to your Privacy Policy and Terms of Service set in the App Details tab of your app's dashboard, these will be automatically included in the login screen.