Overview

You can use App Messaging of AppGallery Connect to send relevant messages to target users actively using your app to encourage them to use key app functions. For example, you can send in-app messages to encourage users to subscribe to certain products, provide tips on passing a game level, or recommend activities of a restaurant.
App Messaging even allows you to customize how your messages look and the way they will be sent, and define events for triggering message sending to your users at the right moment.

What You Will Create

In this codelab, you will build an app that integrates App Messaging. The app will display the message created in AppGallery Connect in advance and message display box you define.

What You Will Learn

Development Environment and Skill Requirements

Device Requirements

To integrate App Messaging, you must complete the following preparations:

For details, please refer to Preparations for Integration in AppGallery Connect.

If you are using Android Studio, you need to integrate the App Messaging SDK into your Android Studio project before development.

  1. Sign in to AppGallery Connect and select My projects.
  2. Select the app for which you need to enable App Messaging from the app list in your project.
  3. On the Project Setting page, click agconnect-services.json to download the configuration file.
    Copy the agconnect-services.json file to the app root directory.
  4. Open the app-level build.gradle file and add the following code to integrate HUAWEI Analytics Kit and the App Messaging SDK:
    dependencies { // Configure the following address: implementation 'com.huawei.hms:hianalytics:5.0.3.300' implementation 'com.huawei.agconnect:agconnect-appmessaging:1.4.1.300' }
  5. Click Sync Now to synchronize the configuration.
  1. Sign in to AppGallery Connect and select My projects.
  2. Find your project from the project list and click the app for which you want to enable App Messaging on the project card.
  3. Go to Growing > App Messaging and click Enable now.
  4. Download the agconnect-services.json file again.

If you enable the App Messaging service for the first time and have not set the data storage location, you need to download the agconnect-services.json file again and integrate it into your project after the service is enabled.

  1. Sign in to AppGallery Connect and select My projects.
  2. Select the app for which you need to enable App Messaging from the app list in your project.
  3. Go to Growing > App Messaging.
  4. Click New.
  5. Set Name and Description.
  6. Set the style and content. In this codelab, set Type to Banner. Set other parameters as required. Click Next.
  7. Set the sending target, set the condition as sending messages by app, and select the package name of the current app.
  8. Set the sending time.
  9. Ignore the conversion event configuration. Click Save in the upper right corner to save the configurations.

In this codelab, you can create a layout page in your Android Studio project and design the UI according to the following figure, with one TextView and two buttons required. The TextView displays the anonymous application identifier (AAID) of the current mobile phone for subsequent function testing. You can click Set Custom View to use the custom pop-up window layout and click Dismiss Custom View to cancel the custom layout and restore to the default one.

  1. Create a layout for the home page.
    <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Button android:id="@+id/add_custum_view" android:text="Set Custom View" android:textAllCaps="false" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/textview" /> <Button android:id="@+id/remove_custum_view" android:text="Dismiss Custom View" android:textAllCaps="false" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/add_custum_view" /> </androidx.constraintlayout.widget.ConstraintLayout>
  2. Initialize the AGConnectAppMessaging instance.
    private AGConnectAppMessaging appMessaging; appMessaging = AGConnectAppMessaging.getInstance();
  3. Obtain the device AAID in asynchronous mode and generate the AAID in the TextView of the project for subsequent testing.
    HmsInstanceId inst = HmsInstanceId.getInstance(this); Task<AAIDResult> idResult = inst.getAAID(); idResult.addOnSuccessListener(new OnSuccessListener<AAIDResult>() { @Override public void onSuccess(AAIDResult aaidResult) { String aaid = aaidResult.getId(); textView.setText(aaid); Log.d(TAG, "getAAID success:" + aaid ); } }).addOnFailureListener(new OnFailureListener() { @Override public void onFailure(Exception e) { Log.d(TAG, "getAAID failure:" + e); } });
  4. Set the flag for forcibly requesting message data from the AppGallery Connect server so that data can be obtained in real time during testing.
    AGConnectAppMessaging.getInstance().setForceFetch();
  5. Set the pop-up message layout. Different messages are displayed for the tap and closing events.
    appMessaging.addOnDisplayListener(new AGConnectAppMessagingOnDisplayListener() { @Override public void onMessageDisplay(AppMessage appMessage) { Toast.makeText(MainActivity.this, "Message showed", Toast.LENGTH_LONG).show(); } }); appMessaging.addOnClickListener(new AGConnectAppMessagingOnClickListener() { @Override public void onMessageClick(AppMessage appMessage) { Toast.makeText(MainActivity.this, "Button Clicked", Toast.LENGTH_LONG).show(); } }); appMessaging.addOnDismissListener(new AGConnectAppMessagingOnDismissListener() { @Override public void onMessageDismiss(AppMessage appMessage, AGConnectAppMessagingCallback.DismissType dismissType) { Toast.makeText(MainActivity.this, "Message Dismiss, dismiss type: " + dismissType, Toast.LENGTH_LONG).show(); } });
  6. Set the button tap event for applying the custom layout.
    addView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { CustomView customView = new CustomView(MainActivity.this); appMessaging.addCustomView(customView); } });
  7. Set the button tap event for canceling the custom layout.
    rmView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { appMessaging.removeCustomView(); } });
  8. Customize the layout.
    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="500dp" android:layout_height="300dp" android:orientation="vertical"> <TextView android:textSize="20sp" android:gravity="center" android:text="Custom view" android:layout_width="match_parent" android:layout_height="wrap_content"/> <TextView android:id="@+id/id" android:text="test text" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button android:text="CLICK" android:id="@+id/click" android:layout_width="match_parent" android:layout_height="wrap_content"/> <Button android:layout_marginTop="10dp" android:text="DISMISS" android:id="@+id/dismiss" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>
  9. Customize the layout file, inherit the AGConnectMessagingDisplay class, and rewrite the displayMessage method to display the layout.
    public class CustomView implements AGConnectAppMessagingDisplay { private static final String TAG = "CustomView"; MainActivity activity; public CustomView(MainActivity activity) { this.activity = activity; } @Override public void displayMessage(@NonNull AppMessage appMessage, @NonNull AGConnectAppMessagingCallback callback) { Log.d(TAG, appMessage.getId() + ""); showDialog(appMessage, callback); } private void showDialog(@NonNull final AppMessage appMessage, @NonNull final AGConnectAppMessagingCallback callback) { View view = LayoutInflater.from(activity).inflate(R.layout.custom_view, null, false); final AlertDialog dialog = new AlertDialog.Builder(activity).setView(view).create(); Button click = view.findViewById(R.id.click); Button dismiss = view.findViewById(R.id.dismiss); TextView id = view.findViewById(R.id.id); id.setText("MessageID: " + appMessage.getId()); click.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // set button callback callback.onMessageClick(appMessage); callback.onMessageDismiss(appMessage, AGConnectAppMessagingCallback.DismissType.CLICK); dialog.dismiss(); } }); dismiss.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //set button callback callback.onMessageDismiss(appMessage, AGConnectAppMessagingCallback.DismissType.CLICK); dialog.dismiss(); } }); dialog.show(); dialog.getWindow().setLayout((getScreenWidth(activity) / 4 * 3), LinearLayout.LayoutParams.WRAP_CONTENT); callback.onMessageDisplay(appMessage); } public static int getScreenWidth(Context context) { return context.getResources().getDisplayMetrics().widthPixels; } }
  1. Run the Android Studio project to generate an APK and install the APK on the test mobile phone.
  2. Launch the app. You can view the AAID of the device.
  3. Select the created message from the message list of AppGallery Connect and click Test.
  4. Click Add test user in the upper right corner.
  5. Enter the AAID of the test mobile phone.

    Save the test.

  6. Click Set Custom View in the app of the test mobile phone to use the custom layout. Repeat steps 3 and 4 and click Save to reset the test mobile phone. Switch the app to the background and then to the foreground at least one second later. The message in the custom layout is displayed.
  7. Click Dismiss Custom View to restore the custom layout to the default one. Set the test mobile phone again. Switch the app to the background and then to the foreground at least one second later. The default layout is displayed.

Well done. You have successfully built an app that integrates App Messaging of AppGallery Connect and learned how to integrate the App Messaging SDK and create and test new messages in AppGallery Connect.

For details about App Messaging APIs, please refer to API Reference.
Download the demo source code used in this codelab from the following address:

Download source code

Code copied