Responsive Design in HarmonyOS
Introduction
Hello everyone. In this article, I will try to provide information about the appearance of applications on HarmonyOS devices. Most people have heard of Huawei’s 1+8+N strategy. HarmonyOS plays a big role in this strategy.
While developing an application for this ecosystem, you can run your application on multiple devices by writing code once. How to develop different UI designs for multiple devices? I will answer this.
For more about design:
- HarmonyOS Design : https://developer.harmonyos.com/en/docs/design/des-guides/overview-0000001053563071
Implementation
First, I will explain in the Java project. You need to create a project in DevEco Studio. While creating the project, you can choose the devices that your application will support as follows.
You can make your base design according to a device you specify in the XML file in the project. I designed a simple UI based on the phone device.
You can check the XML codes below.
I can give you a trick here.
If the XML page is open in DevEco Studio, the view in Previewer is based on the XML page. If a Java class is open, the view in the Previewer also includes the UI changes made in the class.
When I chose watch as the device on the previewer page, I saw that nothing was normal 🙂
Then I tried to make changes in the UI by writing the necessary codes in the Java class. You can check the code snippet below.
Here is the final design for all devices:
Of course, I worked on a very simple design. You can design much more complex, much better UIs.
Now I will give information about responsive design on the JavaScript side. In JS projects, each page consists of 3 structures. HML, CSS and JS.
CSS properties are connected to the components we use on the HML side with the class tag. For each device-specific design, we need to use the “media” tag on the CSS page. You can check the code snippet below.
Output
I shared screenshots of devices using Previewer above. But there will be those who wonder how it is on real devices. So you can check out Watch3 and MatePad11.
Conclusion
You can easily configure your app for any device in the HarmonyOS ecosystem. Also you are giving your users the chance to have a nice end-to-end experience. I hope it will be a useful article.
References
Java UI framework :
https://developer.harmonyos.com/en/docs/documentation/doc-guides/ui-java-overview-0000000000500404
JS UI framework :
