[Huawei Developers] muraliameakula:
Introduction

In this article, I have created a HarmonyOS Sample application to demonstrate its different types of layouts used in HarmonyOS to design the UI. It will helps to developers to create and design simple and complex design requirements.

HarmonyOS is a next generation operating system designed for smart devices in an era where everything is connected. It essentially allows devices to communicate using a common language and gives consumers effortless, smooth, stable, secure, reliable and innovative interaction in all scenarios and it is a commercial version developed by Huawei based on the open source project Open Harmony 2.0 for smart devices used in different scenarios.

Different types of Layouts in HarmonyOS

1. DirectionalLayout

DirectionalLayout is an important component layout in Java UI. It is used to arrange a group of components horizontally or vertically. You can use this layout with other layouts to implement more diversified layout modes.

2. DependentLayout

DependentLayout is a common layout in Java UI. Compared with DirectionalLayout, DependentLayout provides more layout modes. You can specify the position of each component relative to other components at the same level or the position relative to the parent component.

3. StackLayout

StackLayout stacks components within a blank area of the UI. The components are placed in a way that their top and left edges are aligned with the layout bounds. The first component is placed at the bottom with the next component being stacked on top of the previous one. The overlapping part on the component underneath will be invisible.

4. TableLayout

TableLayout allows or enables components to be arranged into a table form.

5. PositionLayout

PositionLayout is used to specify the positions (x/y coordinates) of its components. (0, 0) indicates the upper left corner of the layout. Non-zero values indicate how far away a component is from (0, 0).

6. AdaptiveBoxLayout

AdaptiveBoxLayout enables adaptive layout on devices with different screen sizes. It is applicable to scenarios in which multiple components of the same level need automatically to adjust the number of columns on devices with different screen sizes.

Development Overview

You need to install DevEcho studio IDE and I assume that you have prior knowledge about the Harmony OS and java.

Hardware Requirements

A computer (desktop or laptop) running Windows 10.

A Harmony OS phone (with the USB cable), which is used for debugging.

Software Requirements

Java JDK installation package.

Latest DevEcho studio installed.

Steps:

Step 1: Create HarmonyOS Application

Step 2: Create new Ability

Whenever you create new ability DevEco IDE create its respective layouts automatically.

Step 3: Add dependency in app level gradle.

implementation 'com.google.code.gson:gson:2.8.6'

Let's start coding

MainAbilitySlice.java

public class MainAbilitySlice extends AbilitySlice {
HiLogLabel hiLogLabel = new HiLogLabel(3,HiLog.DEBUG,"TAG");
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
TextField ed_userName = (TextField) findComponentById(ResourceTable.Id_ed_user_name);
TextField ed_userPassword = (TextField) findComponentById(ResourceTable.Id_ed_password);
Button btn_login = (Button) findComponentById(ResourceTable.Id_btn_login);
btn_login.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
startCartAbility();
}
});
}
private void startCartAbility() {
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("com.harmony.newmycart")
.withAbilityName("com.harmony.newmycart.CartAbility")
.build();
intent.setOperation(operation);
startAbility(intent);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}

ability_main.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="top"
ohos:background_element="#000"
ohos:orientation="vertical">

<Text
ohos:id="$+id:text_label"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_padding="8vp"
ohos:layout_alignment="horizontal_center"
ohos:left_padding="24vp"
ohos:right_padding="24vp"
ohos:text="$string:mainability_MyCart"
ohos:text_color="#ffff"
ohos:text_size="48vp"
ohos:top_margin="155px"
ohos:top_padding="8vp"
/>

<TextField
ohos:id="$+id:ed_user_name"
ohos:height="75vp"
ohos:width="match_parent"
ohos:background_element="$graphic:background_text_field"
ohos:bottom_padding="8vp"
ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"
ohos:hint="Enter user name"
ohos:left_margin="34vp"
ohos:right_margin="34vp"
ohos:text_alignment="center"
ohos:text_size="28vp"
ohos:auto_font_size="true"
ohos:top_margin="25vp"
ohos:top_padding="8vp"

/>

<TextField
ohos:id="$+id:ed_password"
ohos:height="75vp"
ohos:width="match_parent"
ohos:background_element="$graphic:background_text_field"
ohos:bottom_padding="8vp"
ohos:element_cursor_bubble="$graphic:ele_cursor_bubble"
ohos:hint="Enter password"
ohos:left_margin="34vp"
ohos:right_margin="34vp"
ohos:left_padding="34vp"
ohos:right_padding="34vp"
ohos:text_alignment="center"
ohos:text_input_type="pattern_password"
ohos:text_size="28vp"
ohos:top_margin="25vp"
ohos:auto_font_size="true"
ohos:top_padding="8vp"

/>

<Button
ohos:id="$+id:btn_login"
ohos:height="65vp"
ohos:width="320vp"
ohos:background_element="$graphic:background_text_field"
ohos:bottom_padding="8vp"
ohos:left_padding="24vp"
ohos:right_padding="24vp"
ohos:text="Login"
ohos:layout_alignment="center"
ohos:text_alignment="center"
ohos:text_size="28vp"
ohos:top_margin="55vp"
/>

</DirectionalLayout>

CartAbilitySlice.java

public class CartAbilitySlice extends AbilitySlice {
int count =1;
DatabaseHelper databaseHelper;
Preferences preferences;
HiLogLabel hiLogLabel = new HiLogLabel(3,HiLog.DEBUG,"TAG");
private ListContainer listContainer;
Gson gson = new Gson();
public static List<Items> list;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_cart);

databaseHelper = new DatabaseHelper(getApplicationContext());
preferences = databaseHelper.getPreferences(fileName);
listContainer = (ListContainer) findComponentById(ResourceTable.Id_list);
list = new ArrayList<>();
list.add(new Items(ResourceTable.Media_apple,"Apple",200.00,1,0));
list.add(new Items(ResourceTable.Media_banana,"Banana",50,1,0));
list.add(new Items(ResourceTable.Media_mango,"Mango",100,1,0));
list.add(new Items(ResourceTable.Media_orange,"Orange",80,1,0));
list.add(new Items(ResourceTable.Media_papaya,"Papaya",40,1,0));

BaseProvider baseProvider = new BaseProvider(list, this);
listContainer.setItemProvider(baseProvider);

Button btn_showcart = (Button) findComponentById(ResourceTable.Id_btn_showcart);
btn_showcart.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
List<Items> itemss = new ArrayList<>();

String iteM = preferences.getString("items", "No data");
try {
// List<Items> itemsList = new ArrayList<>();
HiLog.debug(hiLogLabel, "item " + gson.toJson(iteM));
Cart cart = gson.fromJson(iteM, Cart.class);
for(int i=0;i<cart.getItems().size();i++){
itemss.add(cart.getItems().get(i));
}

} catch (Exception e) {
e.printStackTrace();
}

Cart newCart = new Cart(itemss);
if(itemss.size() !=0){
preferences.putString("items", gson.toJson(newCart));
preferences.flush();
HiLog.debug(hiLogLabel, "item " + gson.toJson(itemss));
Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("com.harmony.newmycart")
.withAbilityName("com.harmony.newmycart.MyCartAbility")
.build();
intent.setOperation(operation);
startAbility(intent);
}

}
});

listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
@Override
public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
HiLog.debug(hiLogLabel," "+list.get(i).getName());
startCartAbility(i);
}
});

}
private void startCartAbility(int index) {
Intent intent = new Intent();
intent.setParam("item",list.get(index));
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("com.harmony.newmycart")
.withAbilityName("com.harmony.newmycart.DetailsAbility")
.build();

intent.setOperation(operation);
startAbility(intent);
}

@Override
public void onActive() {
super.onActive();

}

@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}

ability_cart.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">

<ListContainer
ohos:id="$+id:list"
ohos:margin="25px"
ohos:padding="15px"
ohos:height="match_content"
ohos:width="match_parent"/>
<Button
ohos:id="$+id:btn_showcart"
ohos:height="55fp"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:width="match_parent"
ohos:text_color="#ffff"
ohos:text_size="52px"
ohos:margin="45px"
ohos:text="Show Cart"/>
</DirectionalLayout>

DetailsAbilitySlice.java

public class DetailsAbilitySlice extends AbilitySlice {
HiLogLabel hiLogLabel = new HiLogLabel(3, HiLog.DEBUG, "TAG");
Text quantity, name, total, price;
int count = 1;
Items item;
Gson gson = new Gson();
DatabaseHelper databaseHelper;
public static String fileName = "mycart"; // fileName indicates the file name. It cannot be null and cannot contain a path. The default directory for storing the file can be obtained by calling context.getPreferencesDir().
Preferences preferences;

@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_details);
databaseHelper = new DatabaseHelper(getApplicationContext());// The input parameter context is of the ohos.app.Context type.
preferences = databaseHelper.getPreferences(fileName);
if (getAbility() != null) {
if (getAbility().getIntent() != null) {
if (getAbility().getIntent().hasParameter("item")) {
item = getAbility().getIntent().getSerializableParam("item");
HiLog.info(hiLogLabel, "Item name :" + item.getName() + " : " + item.getPrice());

} else {
HiLog.info(hiLogLabel, "Item is not present");
}
} else {
HiLog.info(hiLogLabel, "intent is null");
}
} else {
HiLog.info(hiLogLabel, "ability is null");
}

Image minusImage = (Image) findComponentById(ResourceTable.Id_image_minus);
Image plusImage = (Image) findComponentById(ResourceTable.Id_image_plus);
Image imageBig = (Image) findComponentById(ResourceTable.Id_item_image_big);
Image imageSmall = (Image) findComponentById(ResourceTable.Id_item_image_small);
Button btnAddTOCard = (Button) findComponentById(ResourceTable.Id_btn_addCart);
Button btnBuyNow = (Button) findComponentById(ResourceTable.Id_btn_buyNow);
imageBig.setImageAndDecodeBounds(item.getImage_id());
imageSmall.setImageAndDecodeBounds(item.getImage_id());
price = (Text) findComponentById(ResourceTable.Id_item_price);
total = (Text) findComponentById(ResourceTable.Id_item_total);
name = (Text) findComponentById(ResourceTable.Id_item_name);
name.setText(item.getName());
price.setText("Rs. " + item.getPrice() + "/KG");
quantity = (Text) findComponentById(ResourceTable.Id_item_quantity);
updateQuantity();
minusImage.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
if (count > 1) {
--count;
updateQuantity();
}

}
});
plusImage.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
count++;
updateQuantity();
}
});

btnAddTOCard.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {

HiLog.debug(hiLogLabel, " Add to cart " + item.getQuantity() + " Total : " + item.getTotal());

List<Items> itemss = new ArrayList<>();

String iteM = preferences.getString("items", "No data");
try {
// List<Items> itemsList = new ArrayList<>();
HiLog.debug(hiLogLabel, "item " + gson.toJson(iteM));
Cart cart = gson.fromJson(iteM, Cart.class);
for(int i=0;i<cart.getItems().size();i++){
itemss.add(cart.getItems().get(i));
}

} catch (Exception e) {
e.printStackTrace();
}
itemss.add(item);
Cart newCart = new Cart(itemss);
preferences.putString("items", gson.toJson(newCart));
preferences.flush();
HiLog.debug(hiLogLabel, "item " + gson.toJson(itemss));
onBackPressed();

}
});

btnBuyNow.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
HiLog.debug(hiLogLabel, " Buy Now " + item.getQuantity() + " Total : " + item.getTotal());
List<Items> itemss = new ArrayList<>();
try {
String iteM = preferences.getString("items", "No data");
HiLog.debug(hiLogLabel, "item " + gson.toJson(iteM));

itemss.add(item);
Cart newCart = new Cart(itemss);
preferences.putString("items", gson.toJson(newCart));
preferences.flush();
startMyNewCartAbility();

} catch (Exception e) {
e.printStackTrace();
}

}
});
}

private void startMyNewCartAbility() {

Intent intent = new Intent();
Operation operation = new Intent.OperationBuilder()
.withDeviceId("")
.withBundleName("com.harmony.newmycart")
.withAbilityName("com.harmony.newmycart.MyCartAbility")
.build();
intent.setOperation(operation);
startAbility(intent);
}

private void updateQuantity() {
item.setQuantity(count);
quantity.setText(count + "");
item.setTotal(item.getPrice() * item.getQuantity());
total.setText("Total : Rs. " + item.getTotal());
}
}

ability_details.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="top"
ohos:background_element="$graphic:item_background"
ohos:margin="15px"
ohos:orientation="vertical"
ohos:padding="15px">

<DirectionalLayout
ohos:height="100vp"
ohos:width="match_parent"
ohos:alignment="start"
ohos:orientation="horizontal"
ohos:padding="10px">

<Image
ohos:id="$+id:item_image_small"
ohos:height="200px"
ohos:width="200px"
ohos:image_src="$media:orange"
ohos:scale_mode="inside"
ohos:top_margin="25px"/>

<Text
ohos:id="$+id:item_price"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_padding="8vp"
ohos:layout_alignment="center"
ohos:left_padding="5vp"
ohos:text="Rs. 200/KG"
ohos:text_size="34vp"

/>

<Text
ohos:id="$+id:text_x"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_padding="8vp"
ohos:layout_alignment="center"
ohos:left_padding="10vp"
ohos:text="x"
ohos:text_size="34vp"

/>

<Text
ohos:id="$+id:item_quantity"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_padding="8vp"
ohos:layout_alignment="center"
ohos:left_padding="20px"
ohos:text="1"
ohos:text_size="34vp"

/>

</DirectionalLayout>

<Image
ohos:id="$+id:item_image_big"
ohos:height="620px"
ohos:width="520px"
ohos:image_src="$media:orange"
ohos:layout_alignment="horizontal_center"
ohos:scale_mode="inside"
ohos:top_margin="11vp"/>

<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="horizontal"
ohos:padding="15px"
ohos:top_margin="35px">

<Image
ohos:id="$+id:image_minus"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_text_field"
ohos:clip_alignment="center"
ohos:image_src="$media:minus96"
ohos:padding="15px"
ohos:right_padding="50px"
ohos:text_size="38vp"/>

<Text
ohos:id="$+id:item_name"
ohos:height="match_content"
ohos:width="match_content"
ohos:left_margin="35px"
ohos:right_margin="35px"
ohos:text="Orange"
ohos:text_size="38vp"
/>

<Image
ohos:id="$+id:image_plus"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_text_field"
ohos:clip_alignment="center"
ohos:image_src="$media:plus96"
ohos:left_padding="50px"
ohos:padding="15px"
ohos:text_size="38vp"/>
</DirectionalLayout>

<Text
ohos:id="$+id:item_total"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:layout_alignment="center"
ohos:margin="35px"
ohos:text_color="#ffff"
ohos:padding="45px"
ohos:right_margin="35px"
ohos:text="Total : Rs. 200"
ohos:text_alignment="center"
ohos:text_size="38vp"
/>

<DirectionalLayout
ohos:height="180px"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:top_margin="45px"
ohos:weight="2">

<Button
ohos:id="$+id:btn_addCart"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:margin="5px"
ohos:text="Add to cart"
ohos:text_color="#ffff"
ohos:text_size="52px"
ohos:weight="1"/>

<Button
ohos:id="$+id:btn_buyNow"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:margin="5px"
ohos:text="Buy Now"
ohos:text_color="#ffff"
ohos:text_size="52px"
ohos:weight="1"/>
</DirectionalLayout>

</DirectionalLayout>

MyCartAbilitySlice.java

public class MyCartAbilitySlice extends AbilitySlice {
HiLogLabel hiLogLabel = new HiLogLabel(3, HiLog.DEBUG, "TAG");
Gson gson = new Gson();
ListContainer listContainer;
double grandTotal = 0;
Preferences preferences;
BaseProvider2 baseProvider = null;
DatabaseHelper databaseHelper;
Cart cart;
// Register an observer to the Preferences instance.
PreferencesChangeCounter counter = new PreferencesChangeCounter();
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_my_cart);
databaseHelper = new DatabaseHelper(getApplicationContext());
String fname = fileName;
listContainer = (ListContainer) findComponentById(ResourceTable.Id_cartlist);
preferences = databaseHelper.getPreferences(fname);
preferences.registerObserver(counter);

boolean result = preferences.flushSync();
int notifyTimes = counter.notifyTimes.intValue();
// Unregister the observer from the Preferences instance.
HiLog.debug(hiLogLabel, "result " + result);
HiLog.debug(hiLogLabel, "notifyTimes " + notifyTimes);
String iteM = preferences.getString("items", "No data");
Text txtGrandTotal = (Text) findComponentById(ResourceTable.Id_grand);
Text clearAll = (Text) findComponentById(ResourceTable.Id_clear_all);
Button btnCancel = (Button) findComponentById(ResourceTable.Id_btn_cancel);
btnCancel.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
onBackPressed();
}
});

try {

HiLog.debug(hiLogLabel, "item " + gson.toJson(iteM));
cart = gson.fromJson(iteM, Cart.class);
for (int i = 0; i < cart.getItems().size(); i++) {
grandTotal = grandTotal + cart.getItems().get(i).getTotal();
}
txtGrandTotal.setText("Grand Total Rs. "+grandTotal);
HiLog.debug(hiLogLabel, "item " + gson.toJson(cart));
loadCart( cart);
} catch (Exception e) {
e.printStackTrace();
}

clearAll.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {

List<Items> itemss = new ArrayList<>();
itemss.add(new Items(1,"name",12,2,2));
cart = new Cart(itemss);
preferences.putString("items", gson.toJson(cart));
preferences.flush();

boolean result = databaseHelper.deletePreferences(fileName);
preferences.flushSync();
HiLog.debug(hiLogLabel, "CLEAR CART " + result);
if(result){
cart.getItems().clear();
loadCart( cart);
}

}
});
}

private void loadCart(Cart cart) {
baseProvider = new BaseProvider2(cart, this);
listContainer.setItemProvider(baseProvider);
}

@Override
public void onActive() {
super.onActive();
}

@Override
protected void onStop() {
super.onStop();
preferences.unregisterObserver(counter);
}

@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
class PreferencesChangeCounter implements Preferences.PreferencesObserver {
final AtomicInteger notifyTimes = new AtomicInteger(0);
@Override
public void onChange(Preferences preferences, String key) {
if ("items".equals(key)) {
notifyTimes.incrementAndGet();
}
}
}

Layout_ability_my_cart.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:layout_borderline"
ohos:orientation="vertical">

<DirectionalLayout

ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:orientation="horizontal"
ohos:total_weight="5">

<Text
ohos:id="$+id:text_si"
ohos:height="match_content"
ohos:width="0fp"
ohos:bottom_margin="15vp"
ohos:left_margin="15vp"
ohos:text="SI NO"
ohos:text_color="#ffff"
ohos:text_size="20fp"
ohos:top_margin="15vp"
ohos:weight="0.4"
/>

<Text
ohos:id="$+id:text_item"
ohos:height="match_content"
ohos:width="0fp"
ohos:bottom_margin="15vp"
ohos:left_margin="15vp"
ohos:text_color="#ffff"
ohos:text="ITEM"
ohos:text_alignment="center"
ohos:text_size="20fp"
ohos:top_margin="15vp"
ohos:weight="1.6"/>

<Text
ohos:id="$+id:text_quantity"
ohos:height="match_content"
ohos:width="0fp"
ohos:text_color="#ffff"
ohos:bottom_margin="15vp"
ohos:left_margin="15vp"
ohos:text="QUANTITY"
ohos:text_size="20fp"
ohos:top_margin="15vp"
ohos:weight="1"/>

<Text
ohos:id="$+id:text_price"
ohos:height="match_content"
ohos:width="0fp"
ohos:text_color="#ffff"
ohos:bottom_margin="15vp"
ohos:left_margin="15vp"
ohos:text="PRICE"
ohos:text_size="20fp"
ohos:top_margin="15vp"
ohos:weight="1"/>

<Text
ohos:id="$+id:text_total"
ohos:height="match_content"
ohos:width="0fp"
ohos:text_color="#ffff"
ohos:bottom_margin="15vp"
ohos:left_margin="15vp"
ohos:text="TOTAL"
ohos:text_size="20fp"
ohos:top_margin="15vp"
ohos:weight="1"/>

</DirectionalLayout>

<ListContainer
ohos:id="$+id:cartlist"
ohos:height="match_content"
ohos:width="match_parent"
ohos:layout_alignment=""
ohos:margin="5px"
ohos:orientation="vertical"
ohos:padding="15px"/>
<DependentLayout
ohos:height="match_content"
ohos:above="$id:bottom"
ohos:width="match_parent"
ohos:layout_alignment="center"
>
<Text
ohos:id="$+id:clear_all"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="Clear all"
ohos:padding="15px"
ohos:margin="15px"
ohos:text_alignment="start"
ohos:text_size="22fp"
ohos:top_margin="15vp"
/>
<Text
ohos:id="$+id:grand"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="GRAND TOTAL"
ohos:padding="15px"
ohos:margin="15px"
ohos:text_alignment="end"
ohos:text_size="48fp"
ohos:top_margin="15vp"
/>
</DependentLayout>

<DirectionalLayout
ohos:id="$+id:bottom"
ohos:height="75fp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:alignment="bottom"
ohos:top_margin="40fp"
ohos:padding="5px"
ohos:weight="2"
>

<Button
ohos:id="$+id:btn_cancel"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="Cancel"
ohos:text_size="52px"
ohos:text_color="#ffff"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:margin="5px"
ohos:weight="1"/>

<Button
ohos:id="$+id:btn_continue"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="Proceed"
ohos:text_size="52px"
ohos:text_color="#ffff"
ohos:background_element="$graphic:ele_cursor_bubble"
ohos:margin="5px"
ohos:weight="1"/>

</DirectionalLayout>

</DirectionalLayout>

Cart.java

public class Cart {
List<Items> items;

public List<Items> getItems() {
return items;
}

public Cart(List<Items> items) {
this.items = items;
}

public void setItems(List<Items> items) {
this.items = items;
}
}

Items.java

public class
Items implements Serializable {
int image_id;
String name;
float quantity;
double total;
double price;

public Items(int image_id, String name, double price,float quantity, double total) {
this.image_id = image_id;
this.name = name;
this.quantity = quantity;
this.total = total;
this.price = price;
}

public double getPrice() {
return price;
}

public void setPrice(double price) {
this.price = price;
}

public int getImage_id() {
return image_id;
}

public void setImage_id(int image_id) {
this.image_id = image_id;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public float getQuantity() {
return quantity;
}

public void setQuantity(float quantity) {
this.quantity = quantity;
}

public double getTotal() {
return total;
}

public void setTotal(double total) {
this.total = total;
}
}

Result

​

Tips and Tricks

Add required dependencies without fail

Add required images in resources > base > media

Add background change support files in resources > base > graphic

Add custom strings in resources > base > element > string.json

Conclusion

In this article, I have demonstrated how to make use DirectionLayout and DepedentLayout in HarmonyOS FruitsApp. In the next article part-2 we will look into other layouts, hope this article helps you understand DirectionLayout and DepedentLayout in HarmonyOS.

Thank you so much for reading article and please provide your valuable feedback and like.

Reference

Common Layout Guidelines

https://developer.harmonyos.com/en/docs/documentation/doc-guides/ui-java-overview-0000000000500404

HarmonyOS Overview

https://developer.harmonyos.com/en/docs/documentation/doc-guides/harmonyos-overview-0000000000011903

Original Source