DEV Community: HarmonyOS

Implementing visibility listening for navigation between the homepage and subpages on the Navigation page.

HarmonyOS — Tue, 18 Aug 2026 01:49:00 +0000

Read the original article：Implementing visibility listening for navigation between the homepage and subpages on the Navigation page.

Problem Description

The UI page of an application uses the Navigation component as the root view and employs NavPathStack for page transitions. How can we listen to the display and hiding of two pages during the navigation process between the home page and subpages when the onPageShow event is not supported or not executed?

The key code for this issue is as follows:

// Index.ets
@Entry
@Component
struct NavigationPage {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  // Returning from a subpage to the root page does not trigger.
  onPageShow(): void {
    console.info('NavigationPage onPageShow');
  }

  build() {
    Navigation(this.pageInfos) {
    };
  }
}
// PageOne.ets
@Entry
@Component
export struct PageOne {
  @Consume('pageInfos') pageInfos: NavPathStack;

  // onPageShow will not be triggered
  onPageShow(): void {
    console.info('NavDestination PageOne onPageShow');
  }

  build() {
    NavDestination() {
    };
  }
}

Background Knowledge

onPageShow and onPageHide are triggered only when the router route page is displayed or hidden each time. Other custom component lifecycles cannot trigger these events.

Navigation is the root view container for route navigation, usually serving as the root container for a page (@Entry). NavDestination is the root container for subpages of Navigation.

@ohos.arkui.observer (unaware listening) provides the capability to listen to UI component behavior changes without awareness. You can listen to the page switching event of Navigation using uiObserver.on('navDestinationSwitch').

Solution

The Navigation component is typically used as the root container for a Page. By default, it contains a title bar, a content area, and a toolbar.

In the content area, by default, the home page displays the navigation content (i.e., the child components of Navigation), while subpages display the child components of NavDestination. When navigating from the home page to a subpage, the actual component that is opened is the NavDestination component, not a router page. Therefore, the onPageShow and onPageHide lifecycle methods specific to application pages will not be triggered.

Scenario 1: Listening to the display and hiding of the NavDestination component.

You can use the onShown and onHidden events to listen for the display and hiding of the NavDestination component. For example, refer to the timing sequence of the NavDestination lifecycle.

Scenario 2: Listening to the display and hiding of the Navigation home page.

When the Navigation component does not use hideNavBar to hide the navigation bar, you can listen to the onNavBarStateChange event of Navigation. In the callback function, if the variable isVisible is true, it indicates that the home page is being displayed.

@Entry
@Component
struct NavBarStateChangePage {
  pageInfos: NavPathStack = new NavPathStack();

  @Builder
  pageMap() {
    PageB();
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('Navigate to NavDestination page')
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'PageB' });
          });
      };
    }.navDestination(this.pageMap)
    .onNavBarStateChange((isVisible: boolean) => {
      if (isVisible) {
        console.info('Navigation display');
      } else {
        console.info('Navigation Hide');
      }
    });
  }
}

@Component
struct PageB {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Button('Return to Navigation')
        .onClick(() => {
          this.pageInfos.pop();
        });
    }.onReady((ctx: NavDestinationContext) => {
      this.pageInfos = ctx.pathStack;
    });
  }
}

Scenario 3: Listening to the display and hiding of the home page and subpages.

Use the imperceptible listener uiObserver.on('navDestinationSwitch') in the aboutToAppear function on the home page to listen for page transitions. The callback function receives NavDestinationSwitchInfo as its parameter, which can be used to determine the pages to hide or display based on the from and to information.

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

@Entry
@Component
struct NavDestinationSwitchPage {
  pageInfos: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    // Listen to navigation page switching events
    uiObserver.on('navDestinationSwitch', this.getUIContext(), (switchInfo) => {
      // The visibility of the page can be determined based on the "from" and "to" parameters. If the type is NavDestinationInfo, it indicates a sub-page; if it is NavBar, it indicates a Navigation page.
      console.info(`from ${JSON.stringify(switchInfo.from)} -> to ${JSON.stringify(switchInfo.to)}`);
    });
  }

  aboutToDisappear() {
    uiObserver.off('navDestinationSwitch', this.getUIContext()); // Cancel monitoring
  }

  @Builder
  pageMap() {
    PageA();
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Button('Navigate to NavDestination page')
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'PageA' });
          });
      };
    }.navDestination(this.pageMap);
  }
}

@Component
struct PageA {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Button('Return to Navigation')
        .onClick(() => {
          this.pageInfos.pop();
        });
    }.onReady((ctx: NavDestinationContext) => {
      this.pageInfos = ctx.pathStack;
    });
  }
}

Verification Result

Works at API level 18 and later

Written by Simay Ayberik

When displayed in landscape mode, the page content is blocked by the hole area

HarmonyOS — Tue, 18 Aug 2026 01:47:00 +0000

Read the original article：When displayed in landscape mode, the page content is blocked by the hole area

Problem Description

The application does not avoid the hole area in the horizontal screen, and the page content is blocked by the hole area.

Background Knowledge

When developing an application interface, the application interface is usually more focused on the content, and users are not wanted to be distracted by irrelevant elements. In order to maximize the user experience, immersive adaptation of the page is often required .
Immersive page development is mostly done by extending the application page to the status bar and navigation bar, which usually includes the following steps:

Use the setWindowLayoutFullScreen method to set the window to full-screen mode.
Use the getWindowAvoidArea method to obtain the height of the avoidance area, and set the upper and lower padding (or margin) of the application page content accordingly to avoid the status bar and navigation bar.
Use the Window.getCutoutInfo method to obtain the width, height, and position information of the cutout area, and set the padding (or margin) of the corresponding avoidance element to avoid the cutout area.

Troubleshooting Process

Check whether the application uses the expandSafeArea property to expand the safe area and expand the layout to the hole area SafeAreaType.CUTOUT, causing the hole area to block the content on the page.

Analysis Conclusion

When the application uses the expandSafeArea property to expand the safe area, the type setting item of the extended safe area contains SafeAreaType.CUTOUT, which causes overlap with the hole area.

Solution/Suggestions

1.Add configuration items in the module.json5 file to treat the camera hole area as a non-safe area, so that the page can avoid the hole by default.

"metadata": [
  {
    "name": "avoid_cutout",
    "value": "true",
  }
],

2.Modify the expandSafeArea type of the extended safe area in the corresponding page file of the application and remove SafeAreaType.CUTOUT.

Column()
  .height('100%')
  .width('100%')
  .backgroundImage($r('app.media.startIcon'))
  .backgroundImageSize(ImageSize.Cover)
  .expandSafeArea([SafeAreaType.CUTOUT], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.END, , SafeAreaEdge.START])

3.You can also use the Display.getCutoutInfo() method to obtain the width, height, and position information of the cutout area, and dynamically set the margin property of the corresponding component to avoid the cutout area.

import { BusinessError } from '@kit.BasicServicesKit';
let displayClass: display.Display | null = null;
async getCutoutInfo() {
   //  Get the default display device
  const displayClass = display.getDefaultDisplaySync();
   // Get hole digging information
  const res = await displayClass.getCutoutInfo();
  return res.boundingRects;
}
build() {
 // Set the left and right margin values of the corresponding top button component according to the state variable statusBarMargin.
    Row() {
       Image($r('app.media.game_props'))
            .width(80)
            .margin({ left: this.statusBarMargin.left + 'px' })
        Blank()
        Image($r('app.media.game_pause'))
            .width(48)
            .margin({ right: this.statusBarMargin.right + 'px' })
    }
}

Written by Simay Ayberik

How to modify indentation in RichEditor based on existing indentation

HarmonyOS — Tue, 18 Aug 2026 01:43:00 +0000

Read the original article：How to modify indentation in RichEditor based on existing indentation

Requirement Description

Open a rich text editor with existing content. How can I modify the indentation of existing paragraphs?

Background Knowledge

RichEditor: A component that supports mixed text and image typesetting and interactive text editing.
getParagraphs: Gets the paragraphs in the specified range as a string.
RichEditorParagraphResult: paragraph information returned by the backend.
RichEditorParagraphStyle: paragraph style.
LeadingMarginPlaceholder: The leading margin placeholder is used to represent the distance between the left side of the text paragraph and the edge of the component.

Implementation Steps

The getParagraphs method can be used to obtain paragraphs within a specified range, and then, based on the style information within the paragraphs, retrieve the corresponding distance between the component and the edge.
updateParagraphStyles for different paragraphs based on the obtained indentation values

Code Snippet / Configuration

@Entry
@Component
struct LineBreakStrategyExample {
  controller: RichEditorController = new RichEditorController();
  private spanParagraphs: RichEditorParagraphResult[] = [];
  testStr: string = '0123456789,0123456789,0123456789,0123456789,0123456789.';
  @State left: number = 0;
  @State right: number = 0;

  build() {
    Column() {
      RichEditor({ controller: this.controller })
        .onReady(() => {
          this.controller.addTextSpan(this.testStr, {
            style: {
              fontColor: Color.Black,
              fontSize: '32'
            },
            paragraphStyle: {
              textAlign: TextAlign.Start,
              lineBreakStrategy: LineBreakStrategy.GREEDY,
              leadingMargin: {
                pixelMap: undefined,
                size: [16, 6]
              }
            }
          });
        })
        .width(400)
        .height(300)
        .margin({ bottom: 20 })
        .draggable(false);

      Column({ space: 10 }) {
        Button('Get distance').onClick(() => {
          this.spanParagraphs = this.controller.getParagraphs({ start: 1, end: 30 });
          for (let i = 0; i < this.spanParagraphs.length; i++) {
            let margin: LeadingMarginPlaceholder | Dimension | undefined = this.spanParagraphs[i].style.leadingMargin;
            let str = JSON.stringify(margin);
            let jsonObj: Object | null = JSON.parse(str);
            if (jsonObj) {
              let commObj = (jsonObj as Record<string, Object>);
              let commRecord = (commObj['size'] as Record<string, Object>);
              let arrayJson = JSON.stringify(commRecord);
              // sArray is the value of indentation
              let sArray = JSON.parse(arrayJson) as Array<string>;
              this.left = Number(sArray[0].split('.')[0]);
              this.right = Number(sArray[1].split('.')[0]);
            }
          }
        });
        Button('Paragraph alignment').onClick(() => {
          this.controller.updateParagraphStyle({
            // Select the paragraphs to be updated by string
            start: -1, end: -1,
            style: {
              //The value of leadingMargin is calculated based on the values obtained above and then assigned a new value
              leadingMargin: { pixelMap: null, size: [this.left + 10, this.right + 20] }
            }
          });
        });
      };
    };
  }
}

Limitations or Considerations

Constraints and Restrictions

This example supports API Version 19 Release and above.

This example supports HarmonyOS SDK Version 5.1.1 Release and above.

This example requires DevEco Studio Version 5.1.1 Release and above to compile and run.

Summarize

1.LeadingMargin cannot be directly converted to LeadingMarginPlaceholder through methods. JSON is needed here to convert between strings and objects.

2.Both the getParagraphs method and the updateParagraphStyle method involve the selected paragraph range (RichEditorRange). The unit of the selection range here is characters. For example, if the first paragraph is 10 characters long, the range 1-10 is selected. And so on.

Written by Recep Sadullah Yegin

How to pop up different context menus based on different list items

HarmonyOS — Mon, 17 Aug 2026 01:40:00 +0000

Read the original article：How to pop up different context menus based on different list items

How To Pop Up Different Context Menus Based On Different List Items

Problem Description

How to bind a context menu to the Item of the List component, determine whether to display the context menu based on conditions, and pop up different context menus depending on the list items?

Background

List: A list contains a series of items of equal width. It is suitable for presenting similar data, such as images and text, in a continuous, multi-line format.
bindContextMenu: binds a menu to the component. The triggering method is long press or right click. The pop-up menu items need to be customized.

Solution

First, the Item of the List component is judged so that the menu pops up for even-numbered items and not for odd-numbered items. The menu pops up by long pressing and the content of the pop-up menu is also different. For details, please refer to the following sample code:

@Entry
@Component
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State listData: number[] = [0, 0, 0]

  // @Builder decorator: Build context menu component
  @Builder
  MenuBuilder(num: number, flag: boolean) {
    // Determine whether to display the menu according to the flag parameter
    if (flag) {
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
        ForEach(this.listData, (item: number, index) => {
          Column() {
            Row() {
              Image($r('app.media.startIcon')).width(20).height(20).margin({ right: 5 })
              Text(`Menu${num}`).fontSize(20)
            }
            .width('100%')
            .height(30)
            .justifyContent(FlexAlign.Center)
            .align(Alignment.Center)

            // If it is not the last menu item, show the separator line
            if (index !== this.listData.length - 1) {
              Divider().height(10).width('80%').color('#ccc')
            }
          }.padding(5).height(40)
        })
      }.width(100)
    }
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          // Determine whether to bind the context menu based on item parity
          if (item % 2 === 0) {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF) // Bind the context menu, use MenuBuilder to generate the menu, and long press to trigger
                .bindContextMenu(this.MenuBuilder(item, true), ResponseType.LongPress)
            }
          } else {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(100)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
                .bindContextMenu(this.MenuBuilder(item, false), ResponseType.LongPress)
            }
          }
        }, (item: string) => item)
      }.width('90%')
      .scrollBar(BarState.Off)
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

Code Running Effect Diagram

Restrictions and Limitations

This example supports API Version 19 Release and above.

This example supports HarmonyOS SDK Version 5.1.1 Release and above.

This example requires DevEco Studio Version 5.1.1 Release and above to compile and run.

Written by Recep Sadullah Yegin

How to Implement a Digital Display Component with Scroll Animation Effects

HarmonyOS — Mon, 17 Aug 2026 01:34:00 +0000

Read the original article：How to Implement a Digital Display Component with Scroll Animation Effects

How to Implement a Digital Display Component with Scroll Animation Effects

Problem Description

How to implement a numeric display component with a scrolling animation effect, where the number can be increased by clicking a button, and the number will transition to the new value with an animation effect.

Background Knowledge

The explicit animation interface animateTo can specify the insertion of transition effects for state changes caused by closure code.
The general property translate can set the component's translation, allowing the component to move within a coordinate system where the top-left corner of the component serves as the origin. The margin property can set the margin properties of the component, maintaining its relative position.

Solution

1.Define state variables. The state variable scrollNumber is bound to the num state of the parent component using the @Prop and @Watch decorators. When the num value changes, the changeNumber method is called. Other state variables are as follows:

@Prop @Watch('changeNumber') scrollNumber: number = 0;
@State bottomNum: number = 0;
@State showNumber: string = '0';
@State cacheNumber: string = '';
changeNumberFinal: string = '';
isScrolling: boolean = false;
isInit: boolean = false;

changeNumber() {
  if (this.isInit) {
    this.animateToScroll(this.scrollNumber);
  }
}

2.Define the method initAnimateToScroll to initialize the animation and set a timer to start the animation after 50 milliseconds. In the animateToScroll method, execute the scrolling animation, update bottomNum and isScrolling based on the passed newNum, and update showNumber and cachNumber after the animation completes.

initAnimateToScroll() {
  setTimeout(() => {
    this.getUIContext().animateTo({
      duration: 600,
      onFinish: () => {
        this.isInit = true;
      }
    }, () => {
      this.bottomNum = -50;
    });
  }, 50);
}

animateToScroll(newNum: number) {
  this.changeNumberFinal = String(newNum);
  if (this.isScrolling) {
    return;
  }
  this.cacheNumber = this.changeNumberFinal;
  this.getUIContext().animateTo({
    duration: 600,
    onFinish: () => {
      this.bottomNum = -50;
      this.showNumber = this.cacheNumber;
      this.cacheNumber = '';
      this.isScrolling = false;
      if (this.changeNumberFinal !== this.showNumber) {
        this.animateToScroll(Number(this.changeNumberFinal));
      }
    }
  }, () => {
    this.bottomNum = 0;
    this.isScrolling = true;
  });
}

3.Control the vertical position of the numbers using the translate and margin properties, and achieve a scrolling effect in conjunction with animations.

Row() {
  Text(this.showNumber)
    .fontSize(35)
    .fontColor('#0A59F7');
}
.margin({ bottom: this.bottomNum })
.height(50)
.translate({ y: this.bottomNum });

Complete examples are as follows:

@Entry
@Component
struct ScrollNum {
  @State num: number = 0;
  @State isEnabled: boolean = true;

  build() {
    Column({ space: 50 }) {
      ScrollNumComponent({ scrollNumber: this.num });

      Button('Click to add')
        .enabled(this.isEnabled)
        .onClick(() => {
          this.isEnabled = !this.isEnabled;
          setTimeout(() => {
            this.num += 50;
            this.isEnabled = !this.isEnabled;
          }, 600);
        });
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%');
  }
}

@Component
export struct ScrollNumComponent {
  @Prop @Watch('changeNumber') scrollNumber: number = 0;
  @State bottomNum: number = 0;
  @State showNumber: string = '0';
  @State cacheNumber: string = '';
  changeNumberFinal: string = '';
  isScrolling: boolean = false;
  isInit: boolean = false;

  changeNumber() {
    if (this.isInit) {
      this.animateToScroll(this.scrollNumber);
    }
  }

  aboutToAppear(): void {
    this.initAnimateToScroll();
  }

  initAnimateToScroll() {
    setTimeout(() => {
      this.getUIContext().animateTo({
        duration: 600,
        onFinish: () => {
          this.isInit = true;
        }
      }, () => {
        this.bottomNum = -50;
      });
    }, 50);
  }

  animateToScroll(newNum: number) {
    this.changeNumberFinal = String(newNum);
    if (this.isScrolling) {
      return;
    }
    this.cacheNumber = this.changeNumberFinal;
    this.getUIContext().animateTo({
      duration: 600,
      onFinish: () => {
        this.bottomNum = -50;
        this.showNumber = this.cacheNumber;
        this.cacheNumber = '';
        this.isScrolling = false;
        if (this.changeNumberFinal !== this.showNumber) {
          this.animateToScroll(Number(this.changeNumberFinal));
        }
      }
    }, () => {
      this.bottomNum = 0;
      this.isScrolling = true;
    });
  }

  build() {
    Column() {
      Row() {
        Text(this.cacheNumber)
          .fontSize(35)
          .fontColor('#0A59F7');
      }
      .height(50)
      .translate({ y: this.bottomNum });

      Row() {
        Text(this.showNumber)
          .fontSize(35)
          .fontColor('#0A59F7');
      }
      .margin({ bottom: this.bottomNum })
      .height(50)
      .translate({ y: this.bottomNum });
    }
    .clip(true)
    .height(50);
  }
}

Verification Result

Written by Recep Sadullah Yegin

How to dynamically add or remove options in a SelectDialog?

HarmonyOS — Mon, 17 Aug 2026 01:28:00 +0000

Read the original article：How to dynamically add or remove options in a SelectDialog?

Problem Description

As shown in the figure, the API reference provides the following schematic diagram: how to customize the number of radio buttons so that the content of the pop-up window's title is obtained by iterating through a string array using foreach?

Background Knowledge

SelectDialog: A selection-type pop-up dialog that provides optional content in list or grid form within the dialog box.

Solution

Before opening the pop-up window, use a for loop to dynamically initialize the radioContent of SelectDialog.
Example code is as follows:

import { SelectDialog } from '@kit.ArkUI'

@Entry
@Component
struct SelectDialogDemo {
  // Array of titles
  titleList: string[] = [];
  // Initialize radioContent for SelectDialog
  radioContent: Array<SheetInfo> = [];
  // Set the default selected radio index
  radioIndex = 0;
  dialogControllerList: CustomDialogController = new CustomDialogController({
    builder: SelectDialog({
      title: 'Text Title',
      selectedIndex: this.radioIndex,
      confirm: {
        value: 'Cancel',
        action: () => {
        },
      },
      // Assign the initialized radioContent to the SelectDialog's radioContent property
      radioContent: this.radioContent
    }),
  })

  build() {
    Row() {
      Stack() {
        Column() {
          Button('Plain List Dialog')
            .width(96)
            .height(40)
            .onClick(() => {
              this.titleList.push('Text');
              this.titleList.push('TextText');
              this.titleList.push('TextTextText');
              this.titleList.push('TextTextTextText');
              this.titleList.push('TextTextTextTextText');
              this.titleList.push('TextTextTextTextTextText');

              // Assign values to radioContent
              this.titleList.forEach((value: string, index: number) => {
                let sheetInfo: SheetInfo = {
                  title: value,
                  action: () => {
                    this.radioIndex = index;
                  }
                }
                this.radioContent.push(sheetInfo)
              })
              this.dialogControllerList.open()
            })
        }.margin({ bottom: 300 })
      }
      .align(Alignment.Bottom)
      .width('100%')
      .height('100%')
    }
    .backgroundImageSize({ width: '100%', height: '100%' })
    .height('100%')
  }
}

Restrictions and Limitations

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

Written by Recep Sadullah Yegin

How to draw a popup window with an image that exceeds the popup window border

HarmonyOS — Fri, 14 Aug 2026 02:01:00 +0000

Read the original article：How to draw a popup window with an image that exceeds the popup window border

Problem Description

How to implement a pop-up window like the one shown below so that the image goes beyond the upper border of the pop-up window.

Background Knowledge

The content style of the pop-up window popped up through the UIContext.getPromptAction().openCustomDialog() interface is displayed completely according to the style set in dialogContent.

Use the bindSheet property to bind a component to a semi-modal page. When inserting the component, you can set a custom or default built-in height to determine the semi-modal size. Use CustomBuilder with Column and Row containers to customize the display area. To display the stacking order of components within the page, set the zIndex property.

Stack is a stacking container. Subcomponents are stacked in order, and the next subcomponent covers the previous one.

Solution

For pop-ups that use @Builder to customize the constructor as UI content, there is a common method to set up the aforementioned effects. The basic idea is: set the root container component of the entire pop-up UI content to a transparent background, and place the actual visible UI content of the pop-up frame as a child component within this transparent background parent container, stacking it with an image. Part of the image is displayed on the pop-up frame with visible UI content, and part is displayed on the transparent background.
This stacking layout can be achieved using the Stack stacking layout, or by using zIndex to set the display level and margin to achieve an upward shift. Below, we will demonstrate the specific implementation of both methods using two types of pop-ups: openCustomDialog for a global custom pop-up and bindSheet for a semi-modal pop-up.

Scene 1: The openCustomDialog global custom dialog uses a Stack layout to achieve the effect of images exceeding the dialog border.
The core implementation code of the dialog is as follows:

@Builder
function customDialogBuilder(close: () => void) {
  Stack() {
    Column({ space: 20 }) {
      Row() {
        SymbolGlyph($r('sys.symbol.xmark'))
          .onClick(() => {
            close();
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.End)

      Text('Huawei').fontSize(24)
      Button('Close pop-up window').onClick(() => {
        close();
      })
    }
    .borderRadius(8)
    .padding(10)
    .margin({ top: 50 })
    .backgroundColor(Color.White)
    .width('100%')

    Image($r('app.media.startIcon'))
      .width(100)
  }
  .alignContent(Alignment.Top)
  .margin({ right: 20, left: 20 })
  .backgroundColor(Color.Transparent)
}

The code to invoke a pop-up using UIContext.getPromptAction().openCustomDialog() is as follows:

import { ComponentContent } from '@kit.ArkUI'

@Entry
@Component
struct Page {
  build() {
    RelativeContainer() {
      Text('Open the pop-up window')
        .id('Page1HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          let uiContext = this.getUIContext();
          let contentNode = new ComponentContent(uiContext, wrapBuilder(customDialogBuilder), () => {
            uiContext.getPromptAction().closeCustomDialog(contentNode);
          })
          uiContext.getPromptAction().openCustomDialog(contentNode)
        })
    }
    .height('100%')
    .width('100%')
  }
}

The effect is as follows:

Scenario 2: BindSheet semi-modal pop-up window uses zIndex+margin to achieve the effect of the image exceeding the pop-up window border.

1.Set the bindSheet background color to transparent and hide the bindSheet's built-in close button.

.bindSheet($$this.isShow, this.myBuilder(), {
  height: this.sheetHeight,
  // Set the background color of bindSheet to transparent.
  backgroundColor: '#00000000',
  // Hide the built-in close button of bindSheet
  showClose: false,
  radius: LengthMetrics.vp(0),
})

2.Set the display level of the Image component to the highest level through .zIndex(2).

Image($r('app.media.startIcon'))
  .width(80)
  .height(80)
  .clip(false)
  .margin({ left: 10 })
  // Set the image's layer to the highest, displaying it on the topmost level.
  .zIndex(2)

3.Set the container Row to the lowest display level through .zIndex(1) and use .margin({ top: -55 }) to set the Row to offset upwards.

Row() {
  Blank()
  Image($r('app.media.startIcon'))
    .height(25)
    .width(25)
    .margin({ top: 10, right: 10 })
}
// Set the image layer to the lowest level, displaying it beneath other images.
.zIndex(1)
// Set the container to offset upwards
.margin({ top: -55 })
.borderRadius({ topLeft: 20, topRight: 20 })
.width('100%')
.height(380)
.backgroundColor(Color.White)
.alignItems(VerticalAlign.Top)
.justifyContent(FlexAlign.SpaceBetween)

The complete code is as follows:

import { LengthMetrics } from '@kit.ArkUI'

@Entry
@ComponentV2
struct ListExample {
  @Local isShow: boolean = false
  @Local sheetHeight: number = 400

  @Builder
  myBuilder() {
    CustomSheet()
  }

  build() {
    Column() {
      Text('Open the pop-up window')
        .width('100%')
        .height('100%')
        .onClick(() => {
          this.isShow = true;
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: this.sheetHeight,
          // Set the background color of bindSheet to transparent.
          backgroundColor: '#00000000',
          // Hide the built-in close button of bindSheet
          showClose: false,
          radius: LengthMetrics.vp(0),
        })
    }
    .width('100%')
    .height('100%')
    .margin({ top: 50 })
  }
}

@Builder
export function CustomSheet() {
  Column() {
    Image($r('app.media.startIcon'))
      .width(80)
      .height(80)
      .clip(false)
      .margin({ left: 10 })
      // Set the image's layer to the highest, displaying it on the topmost level.
      .zIndex(2)
    Row() {
      Blank()
      Image($r('app.media.startIcon'))
        .height(25)
        .width(25)
        .margin({ top: 10, right: 10 })
    }
    // Set the image layer to the lowest level, displaying it beneath other images.
    .zIndex(1)
    // Set the container to offset upwards
    .margin({ top: -55 })
    .borderRadius({ topLeft: 20, topRight: 20 })
    .width('100%')
    .height(380)
    .backgroundColor(Color.White)
    .alignItems(VerticalAlign.Top)
    .justifyContent(FlexAlign.SpaceBetween)
  }
  .width('100%')
  .height('100%')
  // Set the background color of the column to transparent.
  .backgroundColor('#00000000')
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Start)
}

The effect is as follows:

Verification Result

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 Recep Sadullah Yegin

How To Add A Slide In-Out Animation To CustomDialog To Achieve Sliding In From The Bottom Right Corner and Sliding Out

HarmonyOS — Fri, 14 Aug 2026 01:57:00 +0000

Read the original article：How To Add A Slide In-Out Animation To CustomDialog To Achieve Sliding In From The Bottom Right Corner and Sliding Out

Problem Description

How to add a sliding animation to CustomDialog, sliding in from the bottom right and sliding out when leaving?

Background Knowledge

CustomDialog: Display custom dialogs using the CustomDialogController class. When using dialog components, custom dialogs are preferred to facilitate customization of dialog styles and content.

Appearing/Disappearing Transition: The transition is a basic component transition interface used to implement animation effects when a component appears or disappears. Various effects can be defined by combining different TransitionEffect objects.

animateTo: An explicit animation is a method used for smooth transition animations, typically employed to achieve smooth movements, scaling, or other changes in UI elements. It allows you to specify a target value and animate the transition over a specified time and curve.

Solution

Solution 1: Use the combine attribute to chain together TransitionEffects to form a TransitionEffect that includes multiple transition effects. Additionally, use the translate attribute to set the translation effect during component transitions, where the x value specifies the horizontal translation distance.

A complete example is as follows:

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

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  @State showFlag: Visibility = Visibility.Visible;
  private effect: TransitionEffect =
    TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0, 1) })
    // Add translation transition effect. The animation parameters here use the specified springMotion()
      .combine(TransitionEffect.translate({ x: 150 }).animation({ curve: curves.springMotion() }))

  build() {
    Column() {
      Button('Close Dialog')
    }
    .width('100%')
    .height(400)
    .backgroundColor(Color.Gray)
    .onClick(() => {
      this.cancel();
    })
    .visibility(this.showFlag)
    .transition(this.effect)
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    setTimeout(() => {
      this.controller.close()
    }, 400)
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    alignment: DialogAlignment.Bottom,
    autoCancel: false,
    customStyle: true
  })

  build() {
    Column() {
      Button('Click Me')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
  }
}

Solution 2: Define a state variable translateX to set the translation distance of the component along the x-axis; define a state variable transparency to set the opacity of the component.
During the process of opening and closing the pop-up window, use explicit animations to dynamically control translateX and transparency, achieving the sliding-in/out animation effect.

A complete example is as follows:

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

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  @State showFlag: Visibility = Visibility.Visible;
  @State translateX: number = 500 // Set the horizontal translation distance of the component
  @State transparency: number = 0 // Set the opacity of the component
  duration: number = 400

  build() {
    Column() {
      Button('Close Dialog')
    }
    .width('100%')
    .height(400)
    .backgroundColor(Color.Gray)
    .onClick(() => {
      this.cancel();
    })
    .visibility(this.showFlag)
    .opacity(this.transparency)
    .translate({ x: this.translateX })
    .onAppear(() => {
      this.getUIContext().animateTo({
        duration: this.duration,
        iterations: 1,
        curve: curves.springMotion(0, 1)
      }, () => {
        this.translateX = 0
        this.transparency = 1
      })
    })
  }

  cancel() {
    this.getUIContext().animateTo({
      duration: this.duration,
      iterations: 1,
      curve: curves.springMotion(),
      onFinish: () => {
      }
    }, () => {
      this.transparency = 0
      this.translateX = 500
    })

    setTimeout(() => {
      this.controller.close()
    }, 200)
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
    alignment: DialogAlignment.Bottom,
    autoCancel: false,
    customStyle: true
  })

  build() {
    Column() {
      Button('Click Me')
        .onClick(() => {
          this.dialogController.open()
        })
    }
    .width('100%')
    .height('100%')
  }
}

Verification Result

Written by Recep Sadullah Yegin

Convert the absolute coordinates in the click event to relative coordinates

HarmonyOS — Fri, 14 Aug 2026 01:54:00 +0000

Read the original article：Convert the absolute coordinates in the click event to relative coordinates

Problem Description

After obtaining the absolute coordinates of the click location through the child component's click event, how can these coordinates be converted to their relative coordinates with respect to the parent component?

Background Knowledge

componentUtils.getRectangleById: Retrieves the component instance object based on the component ID, and returns the obtained coordinates and size to the developer through the component instance object. The coordinates of the component refer to the coordinates of the top-left vertex of the component.

The onAreaChange callback is triggered when the component's area changes. It returns the width and height of the target element after the change, as well as the coordinates of the target element relative to the parent element and the top-left corner of the page.

Solution

Solution 1: The localOffset obtained using componentUtils.getRectangleById represents the coordinates of the child component within the parent component. The x, y coordinates obtained from the onTouch event represent the touch point's coordinates within the child component. By adding these two together, you can obtain the touch point's coordinates within the parent component.
The complete code is as follows:

@Entry
@Component
struct Index {
  @State startXIn: number = 0;
  @State startYIn: number = 0;

  build() {
    Column() {
      Column() {
        Image($r('app.media.background'))
          .id('123456')
          .width(150)
          .height(200)
          .onTouch((event) => {
            let modePosition = this.getUIContext().getComponentUtils().getRectangleById('123456')
            // Component position relative to its parent
            let imageX = this.getUIContext().px2vp(modePosition.localOffset.x)
            let imageY = this.getUIContext().px2vp(modePosition.localOffset.y)
            console.info('localOffset is', `${imageX} `, `${imageY}`)
            // Touch offset within the child component
            let startX = event.touches[0].x
            let startY = event.touches[0].y
            console.info(`touches are`, `${startX}`, `${startY}`)
            // Convert coordinates to be relative to the parent component
            this.startXIn = startX + imageX;
            this.startYIn = startY + imageY;
          })
      }
      .width(200)
      .height(250)
      .backgroundColor('#61CFBE')
      .justifyContent(FlexAlign.Center)

      Text(`X coordinate relative to parent: ${this.startXIn}`)
      Text(`Y coordinate relative to parent: ${this.startYIn}`)
    }
    .height('100%')
    .width('100%')
  }
}

Solution 2: Using onAreaChange, you can obtain the coordinates offsetX and offsetY of the child component relative to the parent component. The x and y values in ClickEvent represent the coordinates of the click within the child component. By adding these two sets of coordinates, you can obtain the coordinates of the touch point within the parent component.
The complete code is as follows:

@Entry
@Component
struct Index2 {
  @State startXIn: number = 0;
  @State startYIn: number = 0;
  @State offsetX: number = 0
  @State offsetY: number = 0

  build() {
    Column() {
      Column() {
        Image($r('app.media.background'))
          .width(150)
          .height(200)
          .onAreaChange((oldValue: Area, newValue: Area) => {
            this.offsetX = Number(newValue.position.x)
            this.offsetY = Number(newValue.position.y)
          })
          .onClick((event?: ClickEvent) => {
            if (event) {
              let startX = event.x
              let startY = event.y
              console.info(`touches are`, `${startX}`, `${startY}`)
              this.startXIn = startX + this.offsetX;
              this.startYIn = startY + this.offsetY;
            }
          })
      }
      .width(200)
      .height(250)
      .backgroundColor('#61CFBE')
      .justifyContent(FlexAlign.Center)

      Text(`X coordinate relative to parent: ${this.startXIn}`)
      Text(`Y coordinate relative to parent: ${this.startYIn}`)
    }
    .height('100%')
    .width('100%')
  }
}

The implementation ideas for both are the same; they only differ in the methods used. Both involve adding the coordinates of the click position within the child component to the coordinates of the child component within the parent component, thereby obtaining the coordinates of the click position relative to the parent component.

Code Running Effect Diagram

Written by Recep Sadullah Yegin

Common Huawei account login error codes and solutions

HarmonyOS — Thu, 13 Aug 2026 01:45:00 +0000

Read the original article：Common Huawei account login error codes and solutions

Common Huawei Account Login Error Codes And Solutions

Problem Description

Huawei account login error, the common error code is 1001500001, the main error information is as follows:

Failed to auth, errorCode=1001500001, errorMsg=Failed to check the fingerprint of the app bundle.Fingerprint verification error。

The error code is 1001502014, and the main error information is as follows:

 Failed to auth. Code: 1001502014, message: The app does not have the required scopes or permissions.no scope permission。

Background Knowledge

After connecting to the app using a Huawei account and following the development documentation to enable one-click login with a Huawei account, I'm unable to log in with my Huawei account or receive an error message. Other common Huawei account service error codes are as follows:

Error Code ID	Error Message Overview
1001500001	Failed to check the fingerprint of the app bundle.
1001500002	This error code is reported when a request is already being processed.
1001500003	The scopes or permissions are not supported.
1001500004	The account does not support this function.
1001502014	The app does not have the required scopes or permissions.
1001502003	Invalid input parameter value.

Solution

The meaning of error code 1001500001 is that the application fingerprint certificate verification has failed. Possible reasons: the application's fingerprint certificate is not configured or is configured incorrectly.
Troubleshooting and localization approach:

Is the Client ID configured incorrectly:
Check if the clientId in the module.json5 file under the module with module type as entry is configured incorrectly. Please refer to the configuration of Client ID.
Note: The path to obtain the client_id here is: AGC's General -> Application -> OAuth 2.0 Client ID (Credentials -> Client ID).
In the module.json5 file of the entry module in the project, add metadata, configure the name as client_id, and the value as the value of the Client ID.
Error Example 1: The client_id is not configured in the project.
Error Example 2: Writing the value of client_id inside a string (e.g., "value": "$string:clientId") will also cause authorization errors.
Error Example 3: The value of client_id is configured as APP ID instead of the value of Client ID.
Error Example 4: Multiple client_ids are configured in module.json5.

Check whether the app's signing certificate fingerprint is configured correctly. You can add the public key fingerprint and check the app signature as described in the documentation. Refer to the document: (Configuring the App Signing Certificate Fingerprint). Error Example 1: The public key fingerprint is not added to AppGallery Connect. Error Example 2: Adding the certificate fingerprint directly to AppGallery Connect is incorrect. Adding the public key fingerprint is required for HarmonyOS API 9 and above. Error Example 3: The certificate configured in the local project is different from the SHA256 certificate/public key fingerprint used in AppGallery Connect.

In File -> Project Structure... -> Project -> Signing Configs, do not check "Automatically generate signature" for automatic signing. You must manually configure the signature. You can follow the instructions in Development Preparation: Configuring Signature Information.

If it is a network problem, you can check whether there is a problem with the device network. You can change the network, such as switching to mobile network or WIFI and try again to see if it works.

After adding a public key fingerprint on AppGallery Connect (HarmonyOS API 9 and above), the fingerprint is cached for a certain period of time and does not take effect immediately. It is recommended that you wait half an hour after configuration before trying again.

Check to see if your phone's system time has been modified. This is not recommended. If the issue is still not found after completing the above steps, try the following troubleshooting: After installing the app (Windows):

hdc shell bm dump -n package_name | findstr appId

After installing the app (Mac):

hdc shell bm dump -n package_name | grep appId

Copy the string after the underscore in the package name in "appId" to a new file (you can define the file name yourself, for example, SHA.txt). Then execute the following command to obtain the public key fingerprint. Then compare it with the one configured on the AppGallery Connect to see if they are consistent.

certutil -hashfile F:\\SHA.txt SHA256

If the compared appId is inconsistent, you need to re-apply for the public key fingerprint certificate to configure the application signature fingerprint certificate.

The meaning of error code 1001502014 is that the application has not requested scopes or permissions.
Possible causes and solutions: Please refer to the Account Kit FAQ 1001502014 for possible causes and solutions regarding the application not requesting scopes or permissions here.

Error code 1001502003 means the input parameter value is invalid. Possible causes:

The client_id configuration is incorrect. Refer to the troubleshooting method in the previous section "Whether the Client ID is configured incorrectly."
The anonymous mobile number passed in is incorrect, or the authorization API (AuthorizationWithHuaweiIDRequest) is not called to obtain the anonymous mobile number.

FAQ

Q: What is the purpose of configuring certificate fingerprints on AGC?
A: Configuring certificate fingerprints on the AppGallery Connect (AGC) platform is primarily to ensure the security and integrity of the application.
By configuring certificate fingerprints, the AGC platform can check for any tampering or damage to the application after it is released, thereby protecting the integrity of the application's code.
Security of inter-app transitions: In scenarios where applications transition between each other, configuring certificate fingerprints can help establish secure transition links, preventing risks such as man-in-the-middle attacks and counterfeit applications.
Therefore, configuring certificate fingerprints is an important step in maintaining application security and user trust. Developers need to ensure that certificate fingerprints are correctly configured and used on the AGC platform to enhance the security and user experience of the application.
Q: The Huawei account user authentication protocol in the sample code failed.

Span('Huawei Account User Authentication Agreement').fontcolor($r('app.color.color_337DFF')).onclick(async()=>{
  this.toPrivacy("https://privacy.consumer.huawei.com/legal/id/authentication-terms.htm?code=CN")
})

A: The link for the Huawei account user authentication agreement has changed. You need to add &language=zh-CN after the previous link.
Q: The app can be successfully logged in using a local debug certificate, but fails to log in after replacing it with the official certificate and packaging the APP.
A: The package signed with the release certificate cannot be debugged and installed locally. The APP packaged with the release certificate and corresponding profile can only be used for publishing. The official package can be verified through an invitation testing method.
Q: When adding a new HarmonyOS application, the client_id and client_secret are different from the original ones. How to distinguish whether the incoming Authorization Code is for HarmonyOS or Android?
A: When the server processes the Authorization Code, it must use the corresponding application's Client ID/Secret combination to exchange for an Access Token. At this time:

If you successfully exchange a token using the Client ID/Secret of a HarmonyOS application, the token is determined to be from HarmonyOS.
If you successfully exchange a token using the Android app's Client ID/Secret, the app is considered to be from Android.

Q: Huawei account one-click login to obtain public key fingerprint error: Failed to login with LoginWithHuaweiIDButton. errorCode=1001500001, errorMsg is Failed to check the fingerprint of the app bundle. Incomplete response information from gateway.

A: First, check if you are an enterprise developer, as personal developers are not currently supported for one-click login. Then, follow the current knowledge solution approach to troubleshoot step by step.
Q: Why can't I use the Huawei account to purchase the project sharing feature in the phone settings on HarmonyOS 5.0 and HarmonyOS 6.0?
A: Currently, HarmonyOS 5.0 and 6.0 do not support the project sharing purchase feature. It is planned to be supported in version 6.1.

Written by Recep Sadullah Yegin

Calculate the average spacing between child elements in a parent component

HarmonyOS — Thu, 13 Aug 2026 01:40:00 +0000

Read the original article：Calculate the average spacing between child elements in a parent component

Calculate The Average Spacing Between Child Elements In a Parent Component

Problem Description

The Row component displays multiple child elements (such as multiple Text components) and hopes to achieve the following effects:

When the sum of the widths of multiple Text components is less than the width of the Row component, the Text components are horizontally centered in the Row component, and the Text components are arranged with equal spacing.
When the sum of the widths of multiple Text components is greater than the width of the Row component, the Text components that exceed the visible area can be slid and displayed, and the Text components are arranged with equal spacing.

Background Knowledge

Scroll: It is a scrollable container component. When the layout size of the child component exceeds the size of the parent component, the content can scroll.
measureText: used to calculate the width of the specified text

Solution

When the total width of child elements (such as a Text component) is greater than the width of the parent component (such as a Row component), nest the Row component within a Scroll component to enable horizontal scrolling and support viewing child elements that exceed the visible area. The spacing between child elements is uniformly set using custom variables, and equal spacing is achieved through margin calculation logic.

When the total width of child elements (such as the Text component) is smaller than the width of the parent component (such as the Row component), use measureText to obtain the width of each child element, calculate the sum of the widths and the remaining space of the parent container, and use the margin calculation logic to achieve equal spacing.

The complete sample code is as follows:

@Entry
@Component
struct Index {
  private scrollerForScroll: Scroller = new Scroller()
  list: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'] // Simulate total width of child elements exceeding the width of the Row component (parent)
  wid: number = 20
  parentCompWidth: number = 200 // Width of the parent component
  arrayWidthsSum: number = 0 // Total width of child elements
  @State arrayWidths: number[] = [] // Collection of child element widths
  @State blockNum: number = 0 // Average spacing when total child width is less than parent Row width

  // Extract margin calculation logic into a separate method
  private getItemMargin(index: number): Margin {
    const isFirst = index === 0 // Check if it's the first child element
    const isLast = index === this.list.length - 1 // Check if it's the last child element
    const defaultMargin = 5 // Default margin when child width exceeds parent width, manually set

    if (this.parentCompWidth > this.arrayWidthsSum) { // When total child width is less than parent Row width
      // Calculate remaining width of parent and set child element spacing
      // First and last child elements get double the average spacing; others get the average spacing
      return {
        left: isFirst ? this.blockNum : this.blockNum / 2,
        right: isLast ? this.blockNum : this.blockNum / 2
      }
    } else {
      // First and last child elements get double the default margin; others get the default margin
      return {
        left: isFirst ? defaultMargin : defaultMargin / 2,
        right: isLast ? defaultMargin : defaultMargin / 2
      }
    }
  }

  aboutToAppear(): void {
    // Get the width of each item in the list
    this.arrayWidths = this.list.map(text =>
      this.getUIContext().px2vp(this.getUIContext().getMeasureUtils().measureText({
        textContent: text,
        fontSize: 15
      }))
    )

    // Calculate total width of all items
    this.arrayWidthsSum = this.arrayWidths.reduce((acc, curr) => acc + curr, 0)
    // If total child width is less than parent Row width, calculate remaining width and divide it into (number of items + 1) parts as average spacing
    this.blockNum = (this.parentCompWidth - this.arrayWidthsSum) / (this.list.length + 1)
  }

  build() {
    Column() {
      Scroll(this.scrollerForScroll) {
        Row() {
          ForEach(this.list, (item: string, index: number) => {
            Text(item)
              .fontSize(15)
              .height(100)
              .backgroundColor(Color.Pink)
              .margin(this.getItemMargin(index)) // Dynamically set child element spacing
          })
        }
      }
      .scrollBar(BarState.Off) // Hide scroll bar
      .scrollable(ScrollDirection.Horizontal) // Enable horizontal scrolling
      .width(this.parentCompWidth) // Set parent component width
      .height(200)
      .border({ width: 1, color: Color.Black })
    }
    .width('100%')
    .height('100%')
  }
}

When the sum of the widths of child elements (such as the Text component) is greater than the width of the parent component (such as the Row component), the effect diagram is as follows:

Restrictions and Limitations

This example supports API Version 19 Release and above.

This example supports HarmonyOS SDK Version 5.1.1 Release and above.

This example requires DevEco Studio Version 5.1.1 Release and above to compile and run

Written by Recep Sadullah Yegin

After setting the audio stream in AudioRenderer, the output device does not meet expectations.

HarmonyOS — Thu, 13 Aug 2026 01:35:00 +0000

Read the original article：After setting the audio stream in AudioRenderer, the output device does not meet expectations.

After setting the audio stream in AudioRenderer, the output device does not meet expectations

Problem Description

export class AudioRenderPlayer {
  private renderModel: audio.AudioRenderer | undefined = undefined;
  private audioStreamInfo: audio.AudioStreamInfo = {
    samplingRate: audio.AudioSamplingRate.SAMPLE_RATE_16000, // Sampling rate
    channels: audio.AudioChannel.CHANNEL_1, // Channel
    sampleFormat: audio.AudioSampleFormat.SAMPLE_FORMAT_S16LE, // Sampling format
    encodingType: audio.AudioEncodingType.ENCODING_TYPE_RAW // Encoding format
  }
  private audioRendererInfo: audio.AudioRendererInfo = {
    usage: audio.StreamUsage.STREAM_USAGE_VOICE_COMMUNICATION, // Audio Stream Usage Type
    rendererFlags: 0 // Audio Renderer Flag
  }
  private audioRendererOptions: audio.AudioRendererOptions = {
    streamInfo: this.audioStreamInfo,
    rendererInfo: this.audioRendererInfo
  }
}

By configuring the audio rendering parameters through the above code to create an AudioRenderer instance later, it is expected to use the speakers for playback, but the sound actually comes from the earpiece. Why is this happening?

Background Knowledge

The audio stream type is a key attribute that defines how audio data is played and recorded. For playback streams, the type is determined by StreamUsage. The audio stream type has a decisive influence on the selection of an output device.

The audio stream type in the problem code is STREAM_USAGE_VOICE_COMMUNICATION. From the audio stream usage type, we can know that the playback stream type of STREAM_USAGE_VOICE_COMMUNICATION is a voice message, and the volume type should belong to VOICE_CALL.

Solution

The volume type of the STREAM_USAGE_VOICE_COMMUNICATION audio stream is call volume, and the default output device is the earpiece, so the audio sound will be emitted from the earpiece.

Revision Suggestions

You can try changing the audio stream type to STREAM_USAGE_MUSIC, which will play from the speaker by default. Modify the code as follows:

let audioRendererInfo: audio.AudioRendererInfo = {
  usage: audio.StreamUsage.STREAM_USAGE_MUSIC, // Audio stream usage type: music. Configure according to the business scenario. Refer to StreamUsage.
  rendererFlags: 0 // Audio renderer flags.
};

If the default input/output device does not meet the usage requirements, the application can also call the relevant interface to actively modify the default output device. It is important to note that this interface is only applicable in scenarios where the StreamUsage is set to voice message (STREAM_USAGE_VOICE_MESSAGE), VoIP voice call (STREAM_USAGE_VOICE_COMMUNICATION), or VoIP video call (STREAM_USAGE_VIDEO_COMMUNICATION).

Verification Result

This solution was verified using DevEco Studio 6.0.0 Release.

DEV Community: HarmonyOS

Implementing visibility listening for navigation between the homepage and subpages on the Navigation page.

Problem Description

Background Knowledge

Solution

Verification Result

Written by Simay Ayberik

When displayed in landscape mode, the page content is blocked by the hole area

Problem Description

Background Knowledge

Troubleshooting Process

Analysis Conclusion

Solution/Suggestions

Written by Simay Ayberik

How to modify indentation in RichEditor based on existing indentation

Requirement Description

Background Knowledge

Implementation Steps

Code Snippet / Configuration

Written by Recep Sadullah Yegin

How to pop up different context menus based on different list items

How To Pop Up Different Context Menus Based On Different List Items

Problem Description

Background

Solution

Restrictions and Limitations

Written by Recep Sadullah Yegin

How to Implement a Digital Display Component with Scroll Animation Effects

How to Implement a Digital Display Component with Scroll Animation Effects

Problem Description

Background Knowledge

Solution

Verification Result

Written by Recep Sadullah Yegin

How to dynamically add or remove options in a SelectDialog?

Problem Description

Background Knowledge

Solution

Written by Recep Sadullah Yegin

How to draw a popup window with an image that exceeds the popup window border

Problem Description

Background Knowledge

Solution

Verification Result

Written by Recep Sadullah Yegin

How To Add A Slide In-Out Animation To CustomDialog To Achieve Sliding In From The Bottom Right Corner and Sliding Out

Problem Description

Background Knowledge

Solution

Verification Result

Written by Recep Sadullah Yegin

Convert the absolute coordinates in the click event to relative coordinates

Problem Description

Background Knowledge

Solution

Related Documents or Links

Written by Recep Sadullah Yegin

Common Huawei account login error codes and solutions

Common Huawei Account Login Error Codes And Solutions

Problem Description

Background Knowledge

Solution

Written by Recep Sadullah Yegin

Calculate the average spacing between child elements in a parent component

Calculate The Average Spacing Between Child Elements In a Parent Component

Problem Description

Background Knowledge

Solution

Restrictions and Limitations

Written by Recep Sadullah Yegin

After setting the audio stream in AudioRenderer, the output device does not meet expectations.

After setting the audio stream in AudioRenderer, the output device does not meet expectations

Problem Description

Background Knowledge

Solution

Verification Result

Written by Recep Sadullah Yegin