Introduction

The SAP BTP SDK for Android version 5.1 introduces a new set of onboarding screens implemented using Android Jetpack Compose. The compose version flows component uses these screens for the onboarding processes and you can also use them in your project.

Design

The basic design concept of these compose onboarding screens is the same as before. Each screen has a corresponding screen setting reference with which the client code can provide customizations to the screens.

For example, here is the definition of BasicAuthenticationScreen and its settings:

@Composable
fun BasicAuthenticationScreen(
    state: BasicAuthenticationScreenState,
    basicAuthenticationScreenSettings: BasicAuthenticationScreenSettings? = null,
    cancelButtonClickListener: ViewClickListener? = null,
    confirmButtonClickListener: ((userName: String, password: String) -> Unit)? = null,
) { ... }

data class BasicAuthenticationScreenSettings(
    @StringRes val title: Int = R.string.basic_auth_screen_title,
    @StringRes val description: Int = R.string.basic_auth_screen_desc,
    @StringRes val userName: Int = R.string.label_user_name,
    @StringRes val userNamePlaceholder: Int = R.string.basic_auth_screen_user_placeholder,
    @StringRes val password: Int = R.string.label_password,
    @StringRes val passwordPlaceholder: Int = R.string.basic_auth_screen_passwd_placeholder,
    @StringRes val signInButtonCaption: Int = R.string.basic_auth_screen_title,
    @StringRes val cancelButtonCaption: Int = android.R.string.cancel,
): BaseScreenSettings

The screen settings class only provides the customizations regarding the labels, images, etc., for the screen. For logic such as button click handling, they're in the screen itself.

Installation

dependencies {
    implementation 'com.sap.cloud.android:onboarding-compose:${versions.sapCloudAndroidSdk}'
}

Screens

Name	Description
Launch Screen	The launch screen.
EULA Screen	The EULA screen.
Activation Selection	The screen to choose the activation method, either Discovery Service or QR code scan.
Discovery Service Activation	The screen to retrieve the application configuration from Discovery Service.
QR Code Reader	The screen to scan QR codes.
QR Code Confirmation	The screen to confirm the scanned QR code.
Basic Authentication Screen	The screen to authenticate the user using the basic authentication method.
Passcode Creation Screen	The screen to create the passcode to protect the app.
Passcode Verification Screen	The screen to verify the passcode.
Biometric Screen	The biometric screen, used for both the biometric enablement and unlock screens.
Sign-In Screen	The screen to sign in to the app.
User List Screen	The screen to show the user list.
Loading Screen	The loading screen.
Consent Screen	The consent screen.
Offline Sychronization Screen	The offline synchronization screen.
Offline Network Issue Screen	The offline network issue screen.
Offline Transaction Issue Screen	The offline transaction issue screen.

Note

All the customizable images in the onboarding composable screens only support 'png', 'jpeg' or vector drawable resources. For example, the logo image, the content image of the launch screen, etc.

---

Last update: February 20, 2023