Overview

Jetpack Compose is a modern UI toolkit for building native Android user interfaces using a declarative programming model. It's part of the larger Jetpack suite of libraries provided by Google to help developers build high-quality Android apps more quickly and effectively. This documentation outlines the steps required to integrate Smartech Nudges SDK into your Android project built with Jetpack Compose.

Integrate Jetpack Compose

Follow these steps to integrate Smartech Nudges SDK with Jetpack Compose for enhanced user experience:

Step 1: Basic Setup

Begin by integrating your Android project with CEE. For more information on basic integration step, refer here.

Step 2: Product Experience Setup

Integrate Smartech Nudges SDK into your Android project to enable the product experience.

For more information on product experience setup, refer here.

Step 3: Jetpack Compose Meta-data

If your application comprises a combination of native screens and Jetpack Compose screens, add the following meta-data tag to the activities that are using Jetpack Compose UI:

<activity android:name=".activity.compose.ComposeActivity">
   <meta-data
       android:name="SMT_COMPOSE_ACTIVITY"
       android:value="true" />
</activity>

• For applications utilising only Jetpack Compose UI, the above SMT_COMPOSE_ACTIVITY meta-data tag is not required. Instead add the application level meta-data tag in AndroidManifest.xml as shown below.

<application
   android:name=".ComposeApp"
   ...  />
<meta-data
       android:name="SMT_COMPOSE_APP"
       android:value="true" />
</application>

Step 4: Assign Screen Names

Before loading each Jetpack Compose screen, it is essential to assign a unique screen name using the following method.

SmtCompose.screenName = “login_screen"

For Example: If library androidx.navigation:navigation-compose is used in project, addOnDestinationChangedListener can be registered as below.

val navController = rememberNavController()
navController.addOnDestinationChangedListener { _, destination, _ ->
       SmtCompose.screenName = destination.route.toString()
   }

Step 5: Apply smtTag Modifier

Apply smtTag modifier to all the UI elements that require identification, allowing for the placement of nudges as necessary. The smtTag requires the name of the screen used in step four and a unique tag within the screen to identify it later.

 fun Modifier.smtTag(screenName: String, tag: String): Modifier

 //For Example
 Column {
   Text(
       text = "Hello",
       modifier = Modifier
           .clickable { say(“Hello”) }
           .padding(10.dp)
     .smtTag(screenName = "login_screen", tag = "label_hello")
   )
   Text(
       text = "World",
       modifier = Modifier
           .clickable { say(“World”) }
           .padding(10.dp)
     .smtTag(screenName = "login_screen", tag = "label_world")
   )
 }

Step 6: Manage Visibility Flag

When an element's visibility is governed by a boolean state flag, represented by a condition if (visible) { Element() }, it is imperative to ensure that the same visibility state flag is consistently updated whenever the state changes. This can be achieved through the utilisation of the following method.

SmtCompose.updateVisibility(String screenName, String tag, boolean isVisible)

//For Example
@Composable
fun VisibilityScreen() {
   var visible by remember { mutableStateOf(true) }
   Column(
       modifier = Modifier.fillMaxSize(),
       horizontalAlignment = Alignment.CenterHorizontally
   ) {
       Button(
           onClick = {
               visible = !visible
               SmtCompose.updateVisibility("login_screen", "red_box", visible)
           }, modifier = Modifier
               .offset(0.dp, 100.dp)
               .smtTag("login_screen", "show_hide_button")
               .padding(10.dp)
       ) {
           Text(text = if (visible) "Hide" else "Show")
       }


       if (visible) {
           Box(
               modifier = Modifier
                   .offset(0.dp, 200.dp)
                   .background(Color.Red)
                   .size(100.dp)
                   .smtTag("login_screen", "red_box")
           )
       }


   }
}

📘

Note

• Show nudges on Jetpack compose UI: In case if the app needs to make an API call to fetch the data before rendering the screen, then raise a nudge trigger event once the API call returns and the screen is completely rendered with the expected UI element.
• Lazy List: In case of a lazy list, make sure the expected lazy list item is scrolled and visible within the screen bounds before raising the nudge trigger event.