Forem: HarmonyOS

P2P Communication Between Android and (Sport) Lite Wearable Device - Technical Guide

HarmonyOS — Mon, 11 May 2026 01:31:00 +0000

Read the original article：P2P Communication Between Android and (Sport) Lite Wearable Device - Technical Guide

Problem Description

Establishing reliable peer-to-peer (P2P) communication between Android phone applications and wearable device applications presents several technical challenges. Developers often encounter issues with message delivery, file transfer limitations, connection stability, and proper synchronization between the two platforms. The complexity increases when dealing with different device types (lite wearable vs smart wearable) and ensuring both applications are properly installed and running.

Background Knowledge

Communication Architecture

The P2P communication system uses the HiWear SDK to establish a bidirectional communication channel between phone and wearable applications. This system enables:

Message Communication: Short text messages up to 1KB
File Transfer: Files up to 100MB (phone to wearable) or 4MB (wearable to phone)
Status Checking: Verification of app installation and running status
Device Management: Connection monitoring and device pairing

Key Components

P2pClient: Core communication object for both platforms
Message/Builder: Objects for constructing messages and files
Callbacks: Event handlers for success, failure, and progress tracking
Receivers: Listeners for incoming messages and files

Prerequisites

DEVICE_MANAGER permission on the phone application
Both applications must be installed on their respective devices
Wearable device must be connected to Huawei Health app
Proper signing certificate fingerprint configuration

Troubleshooting Process

Step 1: Verify Device Connection and App Installation

Android Side (Phone):

// Step 2: Obtain the P2P communication object.
P2pClient p2pClient = HiWear.getP2pClient(this);
// Package name of an app on a specific device.
String devicePkgName = "com.*.*";

// Step 3: Obtain the version number of your app on the wearable device.
if (connectedDevice != null && connectedDevice.isConnected()) {
    p2pClient.getAppVersion(connectedDevice, devicePkgName)
        .addOnSuccessListener(new OnSuccessListener<Integer>() {
            @Override
            public void onSuccess(Integer versionCode) {
                // -1: The app has not been installed.
            }
        })
        .addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(Exception e) {
            }
        });
}

Wearable Side (JavaScript):

// Step 1: Create a P2P communication object.
var p2pClient = new P2pClient();
var peerPkgName = "com.*.*";

// Step 2: Set the package name of your phone app to be communicated with.
p2pClient.setPeerPkgName(peerPkgName);

// Step 3: Check whether your app has been installed on the phone.
p2pClient.ping({
  onSuccess: function() {
    console.log('ping success.');
  },
  onFailure: function() {
    console.log('ping failed');
  },
  onPingResult: function(resultCode) {
    console.log(resultCode.data + resultCode.code);
  },
});

Step 2: Establish Communication Channel

Android Configuration:

P2pClient p2pClient = HiWear.getP2pClient(this);
p2pClient.setPeerPkgName("com.example.wearableapp");
p2pClient.setPeerFingerPrint("FINGERPRINT");

Wearable Configuration:

var p2pClient = new P2pClient();
p2pClient.setPeerPkgName("com.example.phoneapp");
p2pClient.setPeerFingerPrint("FINGERPRINT");

Step 3: Test Communication with Ping

Android Ping Test:

// Step 2: Obtain the P2P communication object.
P2pClient p2pClient = HiWear.getP2pClient(this);

// Step 3: Set the package name of your wearable app to be communicated with.
String peerPkgName = "com.*.*";
p2pClient.setPeerPkgName(peerPkgName);

// Step 4: Check whether your wearable app is running.
if (connectedDevice != null && connectedDevice.isConnected()) {
    p2pClient.ping(connectedDevice, new PingCallback() {
        @Override
        public void onPingResult(int errCode) {
            // 200: app not installed; 201: installed but not started; 202: started.
        }
    }).addOnSuccessListener(new OnSuccessListener<Void>() {
        @Override
        public void onSuccess(Void successVoid) {
        }
    }).addOnFailureListener(new OnFailureListener() {
        @Override
        public void onFailure(Exception e) {
        }
    });
}

Wearable Ping Test:

// Step 1: Create a P2P communication object.
var p2pClient = new P2pClient();
var peerPkgName = "com.*.*";

// Step 2: Set the package name of your phone app to be communicated with.
p2pClient.setPeerPkgName(peerPkgName);

// Step 3: Check whether your app has been installed on the phone.
p2pClient.ping({
  onSuccess: function() {
    console.log('ping success.');
  },
  onFailure: function() {
    console.log('ping failed');
  },
  onPingResult: function(resultCode) {
    console.log(resultCode.data + resultCode.code);
  },
});

Step 4: Implement Message Sending

Android to Wearable:

// Step 2: Send a message.
String messageStr = "Hello, Wear Engine!";
Message.Builder builder = new Message.Builder();
builder.setPayload(messageStr.getBytes(StandardCharsets.UTF_8));
Message sendMessage = builder.build();

// Step 3: Obtain the P2P communication object.
P2pClient p2pClient = HiWear.getP2pClient(this);

// Step 4: Specify the package name of your wearable app.
String peerPkgName = "com.*.*";
p2pClient.setPeerPkgName(peerPkgName);

// Step 5: Specify the signing certificate fingerprint.
String peerFingerPrint = "*******";
p2pClient.setPeerFingerPrint(peerFingerPrint);

// Step 6: Send short messages.
SendCallback sendCallback = new SendCallback() {
    @Override
    public void onSendResult(int resultCode) {
        // 207: success
    }
    @Override
    public void onSendProgress(long progress) {
    }
};
if(connectedDevice != null && connectedDevice.isConnected()){
    p2pClient.send(connectedDevice, sendMessage, sendCallback)
        .addOnSuccessListener(new OnSuccessListener<Void>() {
            @Override
            public void onSuccess(Void successVoid) {
            }
        })
        .addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(Exception e) {
            }
        });
}

Wearable to Android:

// Step 1: Create a P2P communication object.
var p2pClient = new P2pClient();
var peerPkgName = "com.*.*";
var peerFinger = "67DFB7FD********";

// Step 2: Set the package name.
p2pClient.setPeerPkgName(peerPkgName);

// Step 3: Set fingerprint.
p2pClient.setPeerFingerPrint(peerFinger);

// Step 4: Send a short message.
var builderClient = new Builder();
var messageStr = "Hello, Wear Engine!";
builderClient.setDescription(messageStr);

var sendMessage = new Message();
sendMessage.builder = builderClient;

var sendCallback = {
  onSuccess: function() {},
  onFailure: function() {},
  onSendResult: function(resultCode) {
    console.log(resultCode.data + resultCode.code);
  },
}

if(sendMessage != null){
  p2pClient.send(sendMessage, sendCallback);
}

Step 5: Set Up Message Receivers

Android Receiver:

Receiver receiver = new Receiver() {
    @Override
    public void onReceiveMessage(Message message) {
        if (message.getType() == Message.MESSAGE_TYPE_DATA) {
            // Process messages.
        } else if (message.getType() == Message.MESSAGE_TYPE_FILE) {
            // Process files.
        }
    }
};

Wearable Receiver:

var p2pClient = new P2pClient();
var peerPkgName = "com.*.*";
var peerFinger = "67DFB7FD********";

p2pClient.setPeerPkgName(peerPkgName);
p2pClient.setPeerFingerPrint(peerFinger);

var flash = this;
var receiver = {
  onSuccess: function() {
    flash.receiveMessageOK="Succeeded in receiving the message";
  },
  onFailure: function() {
    flash.receiveMessageOK="Failed to receive the message";
  },
  onReceiveMessage: function (data) {
    if (data && data.isFileType) {
      flash.receiveMessageOK = "file:"+data.name;
    } else {
      flash.receiveMessageOK = "message:"+data;
    }
  },
}
p2pClient.registerReceiver(receiver);

// Step 5: Cancel reception
p2pClient.unregisterReceiver({
    onSuccess:function() {
        console.log = ("Stopped receiving messages"); 
    },
    onFailure:function() {
        console.log = ("Failed to stop receiving messages");
    }
});

Analysis Conclusion

Critical Success Factors

Proper Permission Management
Certificate Fingerprint Matching
Package Name Consistency
Connection State Verification
Lifecycle Management

Solution

Complete Implementation Template

Wearable App Implementation Example (Android):

public class P2PCommunicationManager {
    private P2pClient p2pClient;
    private Device connectedDeice;
    private static final String PEER_PKG_NAME = "com.example.wearableapp";
    private static final String PEER_FINGERPRINT = "FINGERPRINT";

    public void initializeP2P(Context context) {
        p2pClient = HiWear.getP2pClient(context);
        p2pClient.setPeerPkgName(PEER_PKG_NAME);
        p2pClient.setPeerFingerPrint(PEER_FINGERPRINT);
    }

    public void sendMessage(String message) {
        if (isDeviceReady()) {
            Message.Builder builder = new Message.Builder();
            builder.setPayload(message.getBytes(StandardCharsets.UTF_8));
            Message sendMessage = builder.build();

            p2pClient.send(connectedDevice, sendMessage, new SendCallback() {
                @Override
                public void onSendResult(int resultCode) {
                    handleSendResult(resultCode);
                }

                @Override
                public void onSendProgress(long progress) {
                }
            });
        }
    }

    public void registerMessageReceiver() {
        if (isDeviceReady()) {
            Receiver receiver = new Receiver() {
                @Override
                public void onReceiveMessage(Message message) {
                    processReceivedMessage(message);
                }
            };

            p2pClient.registerReceiver(connectedDevice, receiver);
        }
    }

    private boolean isDeviceReady() {
        return connectedDevice != null && connectedDevice.isConnected();
    }
}

Wearable App Implementation Example (JavaScript):

var p2pClient = new P2pClient();
var messageClient = new Message();
var builderClient = new Builder();

export default {
    data: {
    },
    onInit() {
        p2pClient.setPeerPkgName("com.example.phoneapp");
        p2pClient.setPeerFingerPrint("PEER_FINGERPRINT");
        this.registerMessage()
    },
    onDestroy() {
        this.unregisterMessage();
    },
    registerMessage() {
        var flash = this;
        console.log('Register message button click');
        p2pClient.registerReceiver({
            onSuccess: function () {
                console.log('Message receive success');
            },
            onFailure: function () {
                console.log('Message receive fail');
            },
            onReceiveMessage: function (data) {
                if (data && data.isFileType) {
                    console.log("Receive file name:" + data.name);
                } else {
                    console.log('Received message: ' + data);
                }
            },
        });
    },
    unregisterMessage() {
        p2pClient.unregisterReceiver({
            onSuccess: function () {
                console.log("Stop receiving messages is sent");
            },
        });
    },
    sendMessage() {
        builderClient.setDescription("hello wearEngine");
        messageClient.builder = builderClient;
        p2pClient.send(messageClient, {
            onSuccess: function () {
                console.log("Message sent successfully");
            },
            onFailure: function () {
                console.log("Failed to send message");
            },
            onSendResult: function (resultCode) {
                console.log(resultCode.data + resultCode.code);
            },
            onSendProgress: function (count) {
                console.log(count);
            },
        });

    },
}

Verification Result

Testing Checklist

Both apps installed and permissions granted
Device connection established
Ping test successful
Two-way messages working
File transfer functional
Receivers registered correctly
Error handling functional
App launch via ping verified

Written by Emine INAN

Gesture Events in HarmonyOS ArkTS

HarmonyOS — Mon, 11 May 2026 01:26:00 +0000

Read the original article：Gesture Events in HarmonyOS ArkTS

Requirement Description

Gesture events in HarmonyOS ArkTS enable developers to handle user interactions such as taps, long presses, pans, pinches, and swipes.

These events are essential for creating responsive and intuitive UI components. This document provides a detailed guide on implementing gesture binding, single gestures, combined gestures, multi-level gesture events, and gesture judgment logic.

Background Knowledge

HarmonyOS ArkTS provides a flexible gesture system that allows developers to bind gestures to UI components, prioritize gestures, and handle complex interactions. Key concepts include:

Gesture Binding: Associating gestures with components using .gesture(), .priorityGesture(), and .parallelGesture().
Single Gestures: Individual interactions like taps, long presses, pans, pinches, and swipes.
Combined Gestures: Layered or simultaneous interactions using GestureGroup with modes like Sequence, Parallel, and Exclusive.
Multi-level Gesture Events: Handling gestures in nested UI hierarchies with responseRegion and hitTestBehavior.
Gesture Judgment: Resolving conflicts and prioritizing gestures using APIs like onGestureJudgeBegin and shouldBuiltInRecognizerParallelWith.

Implementation Steps

Gesture Binding

.gesture(): Bind a single gesture to a component.

Example: Tap, LongPress, Pan, Pinch, Rotation, or Swipe gestures.

.priorityGesture(): Prioritize parent gestures over child components.

Example: Ensure parent components respond to gestures even if child components are overlapping.

.parallelGesture(): Enable both parent and child components to respond to the same gesture.

Example: Simultaneous pan gestures on nested components.

Single Gesture

Define the gesture type: Use TapGesture, LongPressGesture, PanGesture, etc.
Bind the gesture: Use .gesture() to associate the gesture with a component.
Implement action logic: Use .onAction() to define the behavior triggered by the gesture.

Combined Gestures

Use GestureGroup: Combine multiple gestures with GestureMode (Sequence, Parallel, Exclusive).
Define parameters: Adjust count, distance, speed, fingers, etc., to customize gesture behavior.
Handle recognition: Use .onAction() or .onActionUpdate() to process gesture events.

Multi-level Gesture Events

Use responseRegion: Control the touch target area of a component.
Set hitTestBehavior: Define how components interact with touch events (Block, Transparent, None).
Manage priority: Use .priorityGesture() or .parallelGesture() to control gesture priority.

Gesture Judgment

Use onGestureJudgeBegin: Dynamically decide whether to trigger a gesture based on component state.
Use shouldBuiltInRecognizerParallelWith: Control parallel gesture recognition between nested components.
Adjust recognizer states: Enable or disable gesture recognizers based on boundary.

Code Snippet / Configuration

Single Gesture

Tap Gesture

Text("Tap Me")  
  .gesture(TapGesture({ count: 2 })  
    .onAction(() => {  
      console.info("Double tap detected");  
    })  
  )

Long Press Gesture

Text("LongPress OnAction:" + this.count)  
  .gesture(LongPressGesture({ repeat: true })  
    .onAction(() => {  
      this.count++;  
    })  
  )

Pan Gesture

 Text("PanGesture Offset:\nX: " + this.offsetX + "\nY: " + this.offsetY)  
  .gesture(PanGesture()  
    .onActionUpdate((event) => {  
      this.offsetX = event.offsetX;  
      this.offsetY = event.offsetY;  
    })  
  )

Pinch Gesture

 Column()  
  .scale({ x: this.scaleValue, y: this.scaleValue })  
  .gesture(PinchGesture({ fingers: 3 })  
    .onActionUpdate((event) => {  
      this.scaleValue = event.scale;  
    })  
  )

Rotation Gesture

Text("RotationGesture angle:" + this.angle)  
  .rotate({ angle: this.angle })  
  .gesture(RotationGesture()  
    .onActionUpdate((event) => {  
      this.angle = event.angle;  
    })  
  )

Swipe Gesture

Column()  
  .rotate({ angle: this.rotateAngle })  
  .gesture(SwipeGesture({ direction: SwipeDirection.Vertical })  
    .onAction((event) => {  
      this.rotateAngle = event.angle;  
    })  
  )

Combined Gestures Examples

Parallel Recognition

gesture(GestureGroup(GestureMode.Parallel,  
  TapGesture({ count: 1 })  
    .onAction(() => { this.count1++; }),  
  TapGesture({ count: 2 })  
    .onAction(() => { this.count2++; })  
))

Exclusive Recognition

gesture(GestureGroup(GestureMode.Exclusive,  
  TapGesture({ count: 1 })  
    .onAction(() => { this.count1++; }),  
  TapGesture({ count: 2 })  
    .onAction(() => { this.count2++; })  
))

Gesture Judgment Examples

shouldBuiltInRecognizerParallelWith

.shouldBuiltInRecognizerParallelWith((current, others) => {  
  for (let i = 0; i < others.length; i++) {  
    let target = others[i].getEventTargetInfo();  
    if (target.getId() == "inner" && others[i].isBuiltIn() && others[i].getType() == GestureControl.GestureType.PAN_GESTURE) {  
      return others[i];  
    }  
  }  
  return undefined;  
})

onGestureRecognizerJudgeBegin

.onGestureRecognizerJudgeBegin((event, current, others) => {  
  let target = current.getEventTargetInfo();  
  if (target.getId() == "outer" && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN_GESTURE) {  
    for (let i = 0; i < others.length; i++) {  
      let target = others[i].getEventTargetInfo() as ScrollableTargetInfo;  
      if (target instanceof ScrollableTargetInfo && target.getId() == "inner") {  
        let panEvent = event as PanGestureEvent;  
        this.childRecognizer.setEnabled(true);  
        this.currentRecognizer.setEnabled(false);  
        if (target.isEnd()) {  
          if (panEvent && panEvent.offsetY < 0) {  
            this.childRecognizer.setEnabled(false);  
            this.currentRecognizer.setEnabled(true);  
          }  
        }  
      }  
    }  
  }  
  return GestureJudgeResult.CONTINUE;  
})

Test Results

Single Gestures:

Tap, LongPress, Pan, Pinch, Rotation, and Swipe gestures are recognized correctly.
Parameters like count, distance, speed, and fingers affect gesture behavior.

Combined Gestures:

Sequence Mode: Gestures are recognized in order; if one fails, others are ignored.
Parallel Mode: Gestures are recognized simultaneously (e.g., Tap and Double-Tap).
Exclusive Mode: Only the first recognized gesture is processed (e.g., Tap overrides Double-Tap if bound first).

Multi-level Gesture Events:

hitTestBehavior controls whether child components receive touch events.
responseRegion defines the area where gestures are recognized.

Gesture Judgment:

onGestureJudgeBegin dynamically decides whether to trigger gestures based on component state.
shouldBuiltInRecognizerParallelWith enables parallel recognition between nested components.

Limitations or Considerations

Conflict Resolution:

Use responseRegion and hitTestBehavior to avoid unintended behavior in nested hierarchies.
Test thoroughly to resolve conflicts between parent and child components.

Performance:

Optimize gesture parameters (e.g., distance, speed, count) for smooth interactions.
Avoid overusing gestures in complex UIs to prevent performance issues.

User Experience:

Ensure gestures align with user expectations (e.g., long press feedback).
Provide visual or auditory feedback for gestures like taps and swipes.

Testing:

Always test on real devices to ensure expected behavior in nested hierarchies.
Validate gesture recognition under different conditions (e.g., overlapping components, touch targets).

Written by Emine INAN

The scrollbar size changes when a List nests a LazyForEach

HarmonyOS — Mon, 11 May 2026 01:19:00 +0000

Read the original article：The scrollbar size changes when a List nests a LazyForEach

Problem Description

When using LazyForEach to load multiple ListItemGroups and their internal items, the scrollbar may experience length changes during scrolling.

Background Knowladge

ForEach loads the entire dataset into a List at once. Since the scroll height of the interface is predetermined, the size of the scrollbar does not change. However, when dealing with large volumes of data, this approach can lead to high memory usage and slow page loading.
LazyForEach adopts a lazy loading strategy, loading a small amount of data based on the visible range of the interface, and gradually loading new data as the List scrolls.

Solution

When using nested LazyForEach structures (with the outer layer loading ListItemGroup and the inner layer loading ListItem), due to the lazy loading feature of LazyForEach, the scrollbar length is dynamically calculated based on the number of ListItem's currently loaded within the visible s, rather than the total number of items across all ListItemGroup's. This results in frequent changes in the scrollbar size during scrolling, which negatively affects the visual experience.

A hybrid rendering strategy can be used:

The outer layer uses ForEach to load ListItemGroup in one go, ensuring that the total length of the scrollbar is calculated based on the complete number of list items.
The inner layer uses LazyForEach to load ListItem on demand, implementing lazy loading of child items within ListItemGroup to maintain performance optimization advantages.

Use ForEach to load two ListItemGroups, with the first ListItemGroup lazily loading 30 ListItems and the second ListItemGroup lazily loading 350 ListItems.

Code Snippet / Configuration

@Entry
@Component
struct MultiGroupListDemo {
  private groupDataSource: GroupDataSource = new GroupDataSource() // Data Source 

  // Initialize data 
  aboutToAppear() {
    const group1 = new GroupItem(`Group 1`);
    for (let itemIndex = 1; itemIndex <= 30; itemIndex++) {
      group1.addItem(`Group 1 - Item${itemIndex}`);
    }
    this.groupDataSource.addGroup(group1);
    const group2 = new GroupItem(`Group 2`);
    for (let itemIndex = 1; itemIndex <= 350; itemIndex++) {
      group2.addItem(`Group 2 - Item${itemIndex}`);
    }
    this.groupDataSource.addGroup(group2);
  }

  // Group header builder
  @Builder
  groupHeader(title: string) {
    Text(title)
      .fontSize(20)
      .backgroundColor(Color.White)
      .width('100%')
      .padding(10)
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.groupDataSource.groups, (group: GroupItem) => {
          ListItemGroup({ header: this.groupHeader(group.title) }) {
            LazyForEach(group.itemSource, (item: string) => {
              ListItem() {
                Text(item)
                  .fontSize(18)
                  .width('100%')
                  .height(60)
                  .textAlign(TextAlign.Center)
                  .backgroundColor(Color.White)
              }
            }, (item: string) => item) // Use the content itself as the unique identifier 
          }
          .divider({ strokeWidth: 1, color: Color.Gray })
        }, (group: GroupItem) => group.title) // Use group titles as unique identifiers 
      }.width('100%').height('100%')
    }.backgroundColor(0xF5F5F5)
  }
}Copy codeCopy code
// Group Data Source Implementation 
class GroupItem {
  title: string;
  itemSource: ItemDataSource;

  constructor(title: string) {
    this.title = title;
    this.itemSource = new ItemDataSource();
  }

  addItem(item: string) {
    this.itemSource.pushData(item);
  }
}

// Master Data Source Class 
class GroupDataSource implements IDataSource {
  groups: GroupItem[] = [];
  private listeners: DataChangeListener[] = [];

  addGroup(group: GroupItem) {
    this.groups.push(group);
    this.notifyDataReload();
  }

  totalCount(): number {
    return this.groups.length;
  }

  getData(index: number): GroupItem {
    return this.groups[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listeners.push(listener);
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const index = this.listeners.indexOf(listener);
    if (index >= 0) {
      this.listeners.splice(index, 1);
    }
  }

  private notifyDataReload() {
    this.listeners.forEach(listener => listener.onDataReloaded());
  }
}

//Sub-item Data Source Class
class ItemDataSource implements IDataSource {
  private items: string[] = [];
  private listeners: DataChangeListener[] = [];

  pushData(item: string) {
    this.items.push(item);
    this.notifyDataAdd(this.items.length - 1);
  }

  totalCount(): number {
    return this.items.length;
  }

  getData(index: number): string {
    return this.items[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    this.listeners.push(listener);
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const index = this.listeners.indexOf(listener);
    if (index >= 0) {
      this.listeners.splice(index, 1);
    }
  }

  private notifyDataAdd(index: number) {
    this.listeners.forEach(listener => listener.onDataAdd(index));
  }
}

Limitations or Considerations

This example supports API Version 19 Release and above.
This example supports HarmonyOS 5.1.1 Release SDK and above.
This example requires DevEco Studio 5.1.1 Release and above for compilation and execution.

Written by Mehmet Emir Ucar

The problem of multiple components in HarmonyOS using animateTo animations not being synchronized

HarmonyOS — Fri, 08 May 2026 01:51:00 +0000

Read the original article：The problem of multiple components in HarmonyOS using animateTo animations not being synchronized

Problem Description

In a HarmonyOS application, when using the animateTo method to implement property animations for two Column components, the animations are not executed synchronously.
The problematic code is as follows:

import { display } from '@kit.ArkUI';

const SCREEN_WIDTH = display.getDefaultDisplaySync().width;

@Entry
@Component
struct Index {
  @State translateX: number = SCREEN_WIDTH
  @State lastTranslateX: number = 0

  build() {
    Column() {
      Button('Triggering an animation')
        .onClick(() => this.startAnimation())
        .margin(100)
      Column() {
        Text('B')
          .fontSize(20)
      }
      .width('100%')
      .height(120)
      .backgroundColor('#f1f3f5')
      .opacity(1)
      .translate({ x: this.translateX })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Column() {
        Text('A')
          .fontSize(20)
      }
      .width('100%')
      .height(120)
      .backgroundColor('#f1f3f5')
      .opacity(1)
      .translate({ x: this.lastTranslateX })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }

  }

  private startAnimation() {
    this.getUIContext().animateTo({
      duration: 1800,
      curve: Curve.EaseOut
    }, () => {
      this.translateX = 0
      this.lastTranslateX = -SCREEN_WIDTH
    })
  }
}

Background Knowledge

Translate is a general property provided by HarmonyOS for setting the translation of components.
getDefaultDisplaySync is a method provided by the display module to obtain the current default display object. Through this object, you can access screen-related properties such as width.
UIContext provides the animateTo interface to specify transition animations for state changes caused by closure code.
onAreaChange is a component area change event that triggers this callback when the component's area changes. This function only responds to callbacks caused by layout changes that affect the component's size or position.

Problem Analysis

In the animateTo method, all statements are executed in sequence, not synchronously.

Analysis Conclusion

Since the statements in the animateTo method can only be executed sequentially, is it possible to use other callback functions to achieve synchronized animation effects? One approach that comes to mind is using the onAreaChange callback method to synchronize the animations.

Solution

Define the newValue state variable and use the onAreaChange callback method to obtain the real-time width of component A on the screen. Then, set the translation value based on the component's width.

The complete code is shown below:

@Entry
@Component
struct AnimationOutOfSync {
  @State lastTranslateX: number = 0;
  @State newValue: number = 0;
  @State translateX: number = this.newValue;

  build() {
    Column() {
      Button('Triggering an animation')
        .onClick(() => this.startAnimation())
        .margin(100)
      Column() {
        Text('B')
          .fontSize(20)
      }
      .width('100%')
      .height(120)
      .backgroundColor('#f1f3f5')
      .translate({ x: this.translateX })
      .opacity(1)
      // Use onAreaChange to obtain the width of the current component
      .onAreaChange((oldValue: Area, newValue: Area) => {
        this.newValue = newValue.width as number;
        this.translateX = newValue.width as number;
      })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)

      Column() {
        Text('A')
          .fontSize(20)
      }
      .width('100%')
      .height(120)
      .backgroundColor('#f1f3f5')
      .translate({ x: this.lastTranslateX })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
    }
  }

  private startAnimation() {
    this.getUIContext()?.animateTo({
      duration: 1800,
      curve: Curve.EaseOut
    }, () => {
      this.translateX = 0;
      this.lastTranslateX = -this.newValue;
    });
  }
}

Written by Mehmet Emir Ucar

Text Binding Custom Menu

HarmonyOS — Fri, 08 May 2026 01:49:00 +0000

Read the original article：Text Binding Custom Menu

Problem Description

How to achieve the following effect by binding a custom menu to the Text component:

The menu displayed by bindSelectionMenu automatically disappears when the user touches the screen.
Long press to bring up the custom menu; double-tap gesture does not display the default menu.

Background Knowledge

The gesture binding method is used to bind different types of gesture events to a component and set the response methods for these events.
The bindSelectionMenu method can set a custom selection menu for Text. For usage details, please refer to the documentation on binding custom menus to text.

Solution

Add a click event to the outermost component of the page to close the menu, achieving the effect of the menu disappearing when the screen is touched.
The double-tap gesture to bring up the default menu is the system default specification. You can bind a double-tap event to the Text component to override the default behavior.

@Entry
@Component
struct BindMenuPage {
  controller: TextController = new TextController();

  build() {
    Column() {
      Text(undefined, { controller: this.controller }) {
        Span('Hello World');
        ImageSpan($r('app.media.startIcon')) // Image resources need to be replaced by yourself.
          .width('100px').height('100px');
      }
      .parallelGesture(
        // Rewrite the double-tap gesture event to close the menu.
        TapGesture({ count: 2 })
          .onAction(() => {
            this.controller.closeSelectionMenu();
          }), GestureMask.Normal)
      .copyOption(CopyOptions.InApp)
      // Set TextResponseType.LONG_PRESS to display a custom menu by long-pressing.
      .bindSelectionMenu(TextSpanType.DEFAULT, this.LongPressImageCustomMenu, TextResponseType.LONG_PRESS);
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      // Set a click event on the root node of the page to close the menu.
      this.controller.closeSelectionMenu(); // Close Menu
    });
  }

  @Builder
  LongPressImageCustomMenu() {
    Scroll() {
      Menu() {
        MenuItemGroup() {
          // Image resources need to be replaced by yourself.
          MenuItem({ startIcon: $r('app.media.startIcon'), content: 'Long Press Image Menu 1', labelInfo: '' });
          MenuItem({ startIcon: $r('app.media.startIcon'), content: 'Long Press Image Menu 2', labelInfo: '' });
          MenuItem({ startIcon: $r('app.media.startIcon'), content: 'Long Press Image Menu 3', labelInfo: '' });
        };
      }
      .backgroundColor('#F0F0F0');
    };
  }
}

Verification Result

If change the content as "Menu 1":

Written by Mehmet Emir Ucar

Progress component to implement a clock-style progress bar

HarmonyOS — Fri, 08 May 2026 01:24:00 +0000

Read the original article：Progress component to implement a clock-style progress bar

Requirement Description

How can I create a 360-degree circular dial and add a white dashed line that follows the rotation around the circumference (similar to a clock hand)?

Background Knowledge

Progress Bar (Progress): Progress is a progress bar display component that typically shows the current progress of a target operation. For specific usage, please refer to Progress.

Implementation Steps

The circular progress bar refers to the progress bar in the official documentation. The dashed lines are set using the Divider() component, and the rotation angle follows the progress of the progress bar.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  @State rotateAngle: number = 0
  uiContext: UIContext | undefined = undefined;

  aboutToAppear() {
    this.uiContext = this.getUIContext();
    if (!this.uiContext) {
      console.warn('no uiContext');
      return;
    }
  }

  build() {
    Column() {
      Column() {
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing }).width(100).height(100)
          .backgroundColor(Color.Black)
          .style({ scaleCount: 20, scaleWidth: 5 })

        Divider()
          .height(40)
          .width(0)
          .borderWidth(2)
          .margin({ top: -90 })
          // Set the rotation center using centerX and centerY
          .rotate({
            centerX: '100%',
            centerY: '100%',
            angle: this.rotateAngle
          })
          .onAppear(() => {
            this.uiContext?.animateTo({
              duration: 3000,
              curve: Curve.Linear,
              iterations: -1, // Setting -1 indicates that the animation loops indefinitely
            }, () => {
              this.rotateAngle = 360 * 20 / 150
            })
          })
      }.width('100%').height('100%')
    }
  }
}

Limitations or Considerations

This example supports API Version 19 Release and later versions.
This example supports HarmonyOS 5.1.1 Release SDK and later versions.
This example requires DevEco Studio 5.1.1 Release or later for building and running.

Written by Mehmet Emir Ucar

Passing parameters from a struct decorated with @ComponentV2 to a custom dialog decorated with @CustomDialog fails

HarmonyOS — Thu, 07 May 2026 01:21:00 +0000

Read the original article：Passing parameters from a struct decorated with @ComponentV2 to a custom dialog decorated with @CustomDialog fails

Problem Description

In the @ComponentV2 component, data cannot be directly passed to the @CustomDialog component.
The problematic code is as follows:

@ComponentV2
export struct Page {
  @Local selectIndex: number = 0;
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: AccountSafeDialog({
      selectIndex：this.selectIndex,
    }),
  })
  // ...
}
// Define pop-up window
@CustomDialog
export struct AccountSafeDialog {
  controller?: CustomDialogController;
  @Link selectIndex: number;
  // ...
}

Background Knowledge

The @ComponentV2 decorator is a custom component decorator used in conjunction with V2 state variables. Variables decorated with the @Link decorator share the same value as the data source in their parent component. The custom dialog CustomDialog is displayed through the CustomDialogController class, and both are only used in state management V1.
A pop-up window can be implemented by using the Dialog mode of NavDestination. In this case, the entire NavDestination area is transparent by default, with no component occupying the space.

Troubleshooting Process

Running the code results in an error:

error message:undefined 'selectIndex'[-21]
<@Component 'AccountSafeDialog'[375]>:
constructor: source variable in parent/ancestor @Component must be defined. Application error!

The error message indicates that the variable selectIndex cannot be found. In the code, selectIndex is decorated with @Local, which means this variable is passed from the parent component. Upon checking the parent component, it was found to be decorated with @ComponentV2, indicating a different state management version compared to the @CustomDialog decorator used in the child component.

Analysis Conclusion

There is a state management version incompatibility between components decorated with @ComponentV2 and custom dialog components decorated with @CustomDialog, which prevents data from being correctly passed to the custom dialog components decorated with @CustomDialog.

Solution

You can replace @CustomDialog with a Page using @ComponentV2 and implement the pop-up dialog using the DIALOG mode of Navigation.
Example code is as follows:

In Index.ets, use the pushPathByName method to push the specified NavDestination page information onto the stack.

@Entry
@ComponentV2
struct NavigationExample {
  pageInfos: NavPathStack = new NavPathStack();
  @Local selectIndex: number = 10

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('pushPath', { stateEffect: true, type: ButtonType.Capsule })
          .width('80%')
          .height(40)
          .margin(20)
          .onClick(() => {
            this.pageInfos.pushPathByName('pageOne', this.selectIndex, () => {
            }, false); // Push the NavDestination page information specified by name onto the stack
          })
      }
    }.title('NavIndex')
  }
}

2.Create PageOne.ets as a pop-up page and set the mode of NavDestination to DIALOG mode.

@Builder
export function PageOneBuilder(name: string, param: Object) {
  PageOne()
}

@ComponentV2
export struct PageOne {
  pageInfos: NavPathStack = new NavPathStack();
  @Local selectIndex: number = 0

  build() {
    NavDestination() {
      Column() {
        Text(this.selectIndex.toString())
      }
    }
    .onReady(context => {
      this.selectIndex = context.pathInfo.param as number;
    })
    .position({ left: 50, top: 200 })
    .backgroundColor(Color.Pink)
    .width(300)
    .height(300)
    .mode(NavDestinationMode.DIALOG)
    .hideBackButton(true)
  }
}

3.In the module.json5 configuration file under the src/main directory, configure the routerMap field in the module section as "routerMap": "$profile:router_map", and add a new router_map.json file in the src/main/resources/base/profile directory. An example of router_map.json is as follows:

{
  "routerMap": [
    {
      "name": "pageOne",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "PageOneBuilder",
      "data": {
        "description": "this is pageOne"
      }
    }
  ]
}

Limitations or Considerations

This example supports API Version 19 Release and later versions.
This example supports HarmonyOS 5.1.1 Release SDK and later versions.
This example requires DevEco Studio 5.1.1 Release or later for building and running.

Written by Mehmet Emir Ucar

How to implement the effect of switching images by sliding the Slider

HarmonyOS — Thu, 07 May 2026 01:15:00 +0000

Read the original article：How to implement the effect of switching images by sliding the Slider

How to implement the effect of switching images by sliding the Slider

Context

This guide explains how to implement image switching functionality using the Slider component, where images are displayed on the left side and change as the slider is moved.

Description

How to display images on the left side of a Slider component and switch images accordingly when sliding.

The Slider component is typically used for quickly adjusting setting values, such as volume or brightness control.
- onChange: Event callback triggered when the Slider is dragged or clicked.
- blockStyle: Sets the slider block shape parameters.
overlay: Can set a floating layer for components.

Solution

To implement image switching with Slider, first bind images to the Slider, then listen for value changes through the onChange event. Steps are as follows:

Bind images to the Slider using overlay:

@Builder
OverlayNode() {
  Column() {
    Image($r(this.icon)) // Resources can be cited according to actual circumstances.
  }.width(40).height(40).alignItems(HorizontalAlign.Center).margin({ left: 10 })
};Copy codeCopy code
Slider({ style: SliderStyle.NONE, value: 20 })
  .overlay(this.OverlayNode(), { align: Alignment.Start })

Listen to the onChange event to switch different images based on the value:

.onChange(value => {
  if (value < 20) {
    this.icon = this.iconList[0];
  } else if (value >= 20 && value <= 30) {
    this.icon = this.iconList[1];
  } else if (value > 30 && value <= 40) {
    this.icon = this.iconList[2];
  } else if (value > 40 && value <= 50) {
    this.icon = this.iconList[3];
  } else if (value > 50 && value <= 60) {
    this.icon = this.iconList[4];
  } else if (value > 60 && value <= 70) {
    this.icon = this.iconList[5];
  } else {
    this.icon = this.iconList[6];
  };
});

Complete code:

// Start solution1
@Entry
@Component
struct SliderDemo {
  @State icon: string = 'sys.media.AI_phone';
  iconList: Array<string> = ['sys.media.AI_translate', 'sys.media.AI_circle_viewfinder', 'sys.media.AI_retouch',
    'sys.media.battery_bolt_fill', 'sys.media.AI_phone', 'sys.media.calendar_badge_play', 'sys.media.battery_bolt_fill'];
  // Start solution2
  @Builder
  OverlayNode() {
    Column() {
      Image($r(this.icon)) // Resources can be cited according to actual circumstances.
    }.width(40).height(40).alignItems(HorizontalAlign.Center).margin({ left: 10 })
  };
  // End solution2
  build() {
    Column() {
      // Start solution3
      Slider({ style: SliderStyle.NONE, value: 20 })
        .overlay(this.OverlayNode(), { align: Alignment.Start })
        // End solution3
        .trackThickness(60)
        .trackColor('#e0e0e0')
        .selectedColor(Color.White)
        .width('90%')
        .margin({ left: '5%', top: '40%' })
        .blockStyle({ type: SliderBlockType.IMAGE, image: $r(this.icon) }) // Resources can be cited according to actual circumstances.
        // Start solution4
        .onChange(value => {
          if (value < 20) {
            this.icon = this.iconList[0];
          } else if (value >= 20 && value <= 30) {
            this.icon = this.iconList[1];
          } else if (value > 30 && value <= 40) {
            this.icon = this.iconList[2];
          } else if (value > 40 && value <= 50) {
            this.icon = this.iconList[3];
          } else if (value > 50 && value <= 60) {
            this.icon = this.iconList[4];
          } else if (value > 60 && value <= 70) {
            this.icon = this.iconList[5];
          } else {
            this.icon = this.iconList[6];
          };
        });
      // End solution4
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ffececec')
  }
}
// End solution1

Implementation effect:

Limitations or Considerations

This example supports API Version 19 Release and above
Requires HarmonyOS 5.1.1 Release SDK or later
Must use DevEco Studio 5.1.1 Release or newer for compilation and execution

Key Takeaways

Use the overlay attribute to position images relative to the Slider component
Implement onChange event handler to detect slider value changes
Bind different images to different slider values for visual feedback
This implementation requires API Version 19 Release or higher
Compatible with HarmonyOS 5.1.1 Release SDK and above
Requires DevEco Studio 5.1.1 Release or newer for compilation

Written by Mehmet Emir Ucar

How to Exit Slide-Out Mode When Clicking on a Blank Area

HarmonyOS — Thu, 07 May 2026 01:11:00 +0000

Read the original article：How to Exit Slide-Out Mode When Clicking on a Blank Area

Context

When the type of the SideBarContainer component is set to Overlay, how can we implement exiting the slide-out state by clicking on the blank area?

Background Check

SidebarContainer: Create a sidebar container that can toggle visibility, where the first child component is the sidebar and the second is the content area.
Component Transition(transition):The transition within components is primarily configured through the transition property, which displays transitional animations when components are inserted or removed. This is mainly used for enhancing user experience when subcomponents are inserted or removed within container components.

Solution / Approach

Set up two buttons to open and close the sidebar respectively. Use transition and timers to customize the sidebar's entrance and exit animations. Control the visibility of the sidebar through the showSideBar property of the SideBarContainer component. To achieve this, add the click event for closing the sidebar to a blank area. A complete example is as follows:

@Entry
@Component
struct SideBarContainerDemo {
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1
  @State showSideBar: boolean = false
  @State showFlag: Visibility = Visibility.Hidden;

  // Delay closing the sidebar to allow custom entrance animations to display.
  cancel() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.showSideBar = !this.showSideBar
    }, 1000)
  }

  build() {
    // Set the type of SideBarContainer to Overlay. 
    SideBarContainer(SideBarContainerType.Overlay) {
      Column() {
        ForEach(this.arr, (item: number) => {
          Column({ space: 5 }) {
            Text('Index0' + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() => {
            this.current = item
          })
        }, (item: string) => item)
      }
      .visibility(this.showFlag)
      // Customize entrance animations through transition 
      .transition(TransitionEffect.OPACITY
        .animation({ duration: 1000 })
        .combine(TransitionEffect.translate({ x: 100 })))
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#ffa2cdff')

      Column() {
        Button('Open the sidebar').onClick(() => {
          this.showFlag = Visibility.Visible
          this.showSideBar = true
        })
          .margin({ top: 16, bottom: 16 })
        Button('Close the sidebar').onClick(() => {
          this.cancel()
        })
      }.height('100%')
      // Click on a blank area to exit the slide-out state.
      .onClick(() => {
        this.cancel()
      })
    }
    .divider(null)
    .sideBarPosition(SideBarPosition.End)
    // Whether to display the sidebar
    .showSideBar(this.showSideBar)
    .showControlButton(false)
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}

Limitations or Considerations

This example supports API Version 19 Release and above.
This example supports HarmonyOS 5.1.1 Release SDK and above.
This example requires DevEco Studio 5.1.1 Release and above for compilation and execution.

Written by Mehmet Emir Ucar

After the properties of an array object change, the UI rendering cannot be triggered to refresh

HarmonyOS — Wed, 06 May 2026 01:42:00 +0000

Read the original article：After the properties of an array object change, the UI rendering cannot be triggered to refresh

Problem Description

Define the Item class and decorate it with @Observed to make it a deeply observable class. In the parent component, define items as an array of Item objects and render them using a ForEach loop. In the child component, use the @ObjectLink decorator. However, after the properties of the array objects change, the UI rendering does not refresh. The problematic code is as follows:

@Observed
class Item {
  name: string = '';
  num: number = 0;
}

@Component
@Entry
struct Index {
  @State items: Item[] = [
    { name: 'Zhang San', num: 18 },
    { name: 'Li Si', num: 20 },
  ]

  build() {
    Column() {
      ForEach(this.items, (item: Item) => {
        MyItem({ item: item })
      })
    }
  }
}

@Component
struct MyItem {
  @ObjectLink item: Item

  build() {
    Row() {
      Text(this.item.name)
      Row() {
        Button('+').onClick(() => {
          this.item.num++
        })
        Row() {
          Text(`${this.item.num}`)
        }
        .width(50)
        .justifyContent(FlexAlign.Center)

        Button('-').onClick(() => {
          this.item.num--
        })
      }
    }
    .margin({
      top: 20
    })
    .justifyContent(FlexAlign.SpaceAround)
    .width('100%')
  }
}

Background Knowledge

@Observed/@ObjectLink: Used for observing nested scenarios, such as two-dimensional arrays, object arrays, and nested class scenarios, where deep property changes need to be observed. @Observed and @ObjectLink must be used together.
makeV1Observed: Wraps an unobservable object into a state-managed V1 observable object, with capabilities equivalent to @Observed, and allows initialization of @ObjectLink.

Troubleshooting Process

For the issue where state variables do not trigger UI updates, you can generally consider the following aspects (other special scenarios require special considerations):
1.The rules governing the decorator's behavior. For @Observed/@ObjectLink, according to the official documentation, a class needs to meet the following conditions to be observable:

The declared state variables must be created using the new character.
If this class is a deeply nested class, you need to ensure that the deep-level class containing the observed property is also decorated with @Observed.
In child components, use @Prop to receive state variables. However, if you modify these variables within the child component, it will not trigger a refresh in the parent component. Instead, you should use @ObjectLink to receive state variables.

2.Summarize the rules for parameter passing. When passing state variables, if subcomponents use @Builder or @LocalBuilder, it is also important to consider the issues of value passing versus reference passing.

Based on the considerations above, the following checks are made:

1.Verify whether the source data has changed: Print logs after clicking the button to check if the data itself has changed. By comparing the logs, it was found that the data had indeed changed, but it did not trigger a UI rendering refresh.

09-26 10:23:51.944   1748-1748     A03d00/JSAPP                    com.example.test19    I     Zhang San：19
09-26 10:23:52.837   1748-1748     A03d00/JSAPP                    com.example.test19    I     Zhang San：20
09-26 10:23:54.827   1748-1748     A03d00/JSAPP                    com.example.test19    I     Li Si：21
09-26 10:23:55.430   1748-1748     A03d00/JSAPP                    com.example.test19    I     Li Si：22

2.According to the rules of decorator usage, check whether it is used correctly:

The state variable items is an array object, and the objects within the array are declared using literal notation rather than being created with the new operator, which does not conform to the intended usage rules.
Object arrays also fall under a type of deep nesting. The class of the property being modified is decorated with @Observed, which complies with the rules.
In the problem code, there is no modification of child components involved, and the parent component's display behavior is observed. The child component uses @ObjectLink to receive parameters passed from the parent component, which complies with the rules.

3.The custom builder function @Builder or @LocalBuilder does not exist in the problem code, so this check is ignored.

Analysis Conclusion

In summary, the issue of the UI not refreshing in the code is due to the fact that the new operator was not used when declaring the state variable, causing the UI to fail to update when the data changes.

Solution

Option 1: Modify the method of creating objects originally done through literals to use the new keyword instead. This task can be implemented in the aboutToAppear callback. The parent component's code is modified as follows:

aboutToAppear(): void {
  this.items = this.items.map((item) => {
    let cur = new Item()
    cur.name = item.name
    cur.num = item.num
    return cur
  })
}

Map each item in the this.items array to a new Item instance, copying the name and num properties of the original item to the new instance. Finally, this.items is updated to this new array.

Option 2: In state management, to address the issue where certain classes in third-party packages cannot be decorated by the state management decorator, leading to UI not being refreshed, the makeV1Observed interface was introduced in version 1 of the state management system to enable deep listening for regular variables. Import UIUtils and modify the code as follows:

@State items: Item[] = [
  UIUtils.makeV1Observed({ name: 'Zhang San', num: 18 }),
  UIUtils.makeV1Observed({ name: 'Li Si', num: 20 })
]

Limitations or Considerations

This example supports API Version 19 Release and later versions.
This example supports HarmonyOS 5.1.1 Release SDK and later versions.
This example requires DevEco Studio 5.1.1 Release or later for compilation and running.

Written by Mehmet Emir Ucar

Wear Engine setFingerprint() 206 Error

HarmonyOS — Wed, 06 May 2026 01:19:00 +0000

Read the original article：Wear Engine setFingerprint() 206 Error

Problem Description

When calling setFingerprint() in Huawei Wear Engine, a 206 error is encountered. The root cause lies in incorrect fingerprint value formatting, particularly with the public key used in the certificate.

Background Knowledge

The fingerprint must be the public key (in base64 format) derived from a valid certificate file (.cer). The correct method involves extracting the last certificate block and encoding the public key.

Troubleshooting Process

Open the .cer file, and copy the last paragraph (from -----BEGIN CERTIFICATE----- to -----END CERTIFICATE-----) into a new .cer file.
Open this new .cer file, click Details, and select Public Key to obtain the pubKey.
Convert the pubKey into Base64 format. You may use a third-party tool such as tomeko.net.
Example Base64 encoded string: BC5Z9/29Yn93xSa9XkQ2HN5GikugmXjor9se0VwnOENK9t4uFK4VlRpOHv4B3lphjIa7P6Sh61CFRsT0MZNhuV8=
Construct the fingerprint using the format: <App Package Name>_<Base64EncodedPubKey>
Example: com.huawei.wearengine_BC5Z9/29Yn93xSa9XkQ2HN5GikugmXjor9se0VwnOENK9t4uFK4VlRpOHv4B3lphjIa7P6Sh61CFRsT0MZNhuV8=

Analysis Conclusion

The 206 error is caused by an improperly formed fingerprint string. The fingerprint must follow the structure defined above, ensuring it matches the base64-encoded public key of the .cer certificate used.

Solution

·Extract the correct certificate section

·Obtain the public key

·Encode it properly in Base64

·Concatenate with the app package name to form the correct fingerprint

Verification Result

After correcting the fingerprint format using the described method, the setFingerprint() function executes successfully without error 206.

Written by Mehmet Algul

How to create an onboard screen?

HarmonyOS — Wed, 06 May 2026 01:07:00 +0000

Read the original article：How to create an onboard screen?

Context

The onboard screen can be used to introduce the app or a functionality to first-time users.

Description

User wants to create an onboard screen using the Swiper component. The swiper should be controllable with the crown. The user wants to close the app with the swipe left action on the first page.

Solution

To create an onboard screen, you can use the Swiper.

Step 1: Create a local storage variable to store the onboard status. Modify EntryAbility.ets

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
      return;
    }
    hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');

    // Add this line
    PersistentStorage.persistProp('onboard', false)
  });
}

Step 2: Use the Swiper and create the onboard screen. Create Onboard.ets

import { common } from '@kit.AbilityKit'

@Component
export default struct Onboard {
  @State swiperIndex: number = 0
  total: number = 0
  sc: SwiperController = new SwiperController()

  build() {
    Column() {
      Swiper(this.sc) {
        Column() {
          Text('Page 1')
        }.padding({ left: '10%', right: '10%' })

        Column() {
          Text('Page 2')
        }.padding({ left: '10%', right: '10%' })

        Column() {
          Text('Page 3')
        }.padding({ left: '10%', right: '10%' })

        Column() {
          Text('Page 4')
        }.padding({ left: '10%', right: '10%' })
      }
      .loop(false)
      .effectMode(EdgeEffect.None)
      .defaultFocus(true)
      .onDigitalCrown((event) => {
        if (event.action === CrownAction.BEGIN) {
          this.total = event.degree
        } else {
          this.total += event.degree
        }

        if (this.total > 50) {
          this.sc.showPrevious()
          this.total = 0
        } else if (this.total < -50) {
          this.sc.showNext()
          this.total = 0
        }
      })
      .onChange((index: number) => {
        this.swiperIndex = index
      })
      .size({ width: '100%', height: '60%' })
      .margin({ top: '20%' })

      if (this.swiperIndex !== 0) {
        Button('Finish')
          .fontColor(Color.Blue)
          .backgroundColor(Color.Transparent)
          .onClick(() => {
            AppStorage.set('onboard', true)
          })
      }
    }
    .size({ width: '100%', height: '100%' })
    .parallelGesture(
      PanGesture({ direction: PanDirection.Right })
        .onActionUpdate((event) => {
          const horizontalDistance = event.offsetX;

          if (this.swiperIndex === 0 && horizontalDistance > 50) {
            (this.getUIContext().getHostContext() as common.UIAbilityContext).moveAbilityToBackground()
          }
        })
    )
  }
}

Swipe to close

.parallelGesture(
  PanGesture({ direction: PanDirection.Right })
    .onActionUpdate((event) => {
      const horizontalDistance = event.offsetX;

      if (this.swiperIndex === 0 && horizontalDistance > 50) {
        (this.getUIContext().getHostContext() as common.UIAbilityContext).moveAbilityToBackground()
      }
    })
)

Use crown to change

.defaultFocus(true)
.onDigitalCrown((event) => {
  if (event.action === CrownAction.BEGIN) {
    this.total = event.degree
  } else {
    this.total += event.degree
  }

  if (this.total > 50) {
    this.sc.showPrevious()
    this.total = 0
  } else if (this.total < -50) {
    this.sc.showNext()
    this.total = 0
  }
}

Step 3: Finally, modify the Index.ets to use the Onboard Page.

import Onboard from '../components/Onboard';

@Entry
@Component
struct Index {
  @StorageProp('onboard') onboard: boolean = false;

  build() {
    Stack() {
      if (!this.onboard) {
        Onboard()
      } else {
        Text('Main App')
      }
    }
    .height('100%')
    .width('100%')
  }
}

Key Takeaways

Use Swiper to create an onboard screen.
Use moveAbilityToBackground to close the app.

Forem: HarmonyOS

P2P Communication Between Android and (Sport) Lite Wearable Device - Technical Guide

Problem Description

Background Knowledge

Communication Architecture

Key Components

Prerequisites

Troubleshooting Process

Step 1: Verify Device Connection and App Installation

Step 2: Establish Communication Channel

Step 3: Test Communication with Ping

Step 4: Implement Message Sending

Step 5: Set Up Message Receivers

Analysis Conclusion

Critical Success Factors

Solution

Complete Implementation Template

Verification Result

Related Documents or Links

Official Documentation

Development Resources

Troubleshooting References

Written by Emine INAN

Gesture Events in HarmonyOS ArkTS

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Test Results

Related Documents or Links

Written by Emine INAN

The scrollbar size changes when a List nests a LazyForEach

Problem Description

Background Knowladge

Solution

Code Snippet / Configuration

Limitations or Considerations

Written by Mehmet Emir Ucar

The problem of multiple components in HarmonyOS using animateTo animations not being synchronized

Problem Description

Background Knowledge

Problem Analysis

Analysis Conclusion

Solution

Written by Mehmet Emir Ucar

Text Binding Custom Menu

Problem Description

Background Knowledge

Solution

Verification Result

Written by Mehmet Emir Ucar

Progress component to implement a clock-style progress bar

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Limitations or Considerations

Written by Mehmet Emir Ucar

Passing parameters from a struct decorated with @ComponentV2 to a custom dialog decorated with @CustomDialog fails

Problem Description

Background Knowledge

Troubleshooting Process

Analysis Conclusion

Solution

Limitations or Considerations

Written by Mehmet Emir Ucar

How to implement the effect of switching images by sliding the Slider

How to implement the effect of switching images by sliding the Slider

Context

Description

Solution

Key Takeaways

Written by Mehmet Emir Ucar

How to Exit Slide-Out Mode When Clicking on a Blank Area

Context

Background Check

Solution / Approach

Limitations or Considerations

Written by Mehmet Emir Ucar

After the properties of an array object change, the UI rendering cannot be triggered to refresh