PopupDialogBox UI Alignment and Formatting - UQcsse3200/2024-studio-2 GitHub Wiki

Changes to Button Alignment

The buttons for each animal have been customized to enhance user interaction based on the selected animal.

• Animal-Specific Buttons: Each animal now features a specific button to enter their respective kingdom:
  • Dog: Land Kingdom
  • Crocodile: Water Kingdom
  • Bird: Air Kingdom
• Back Button: Positioned on the bottom right-hand side of the dialog.

A new buttonTable has been introduced to horizontally align these buttons within the dialog.

Table buttonTable = new Table();
buttonTable.add(backButton).width(200).height(50).padRight(10);  // Add back button first
buttonTable.add(enterKingdomButton).width(200).height(50);  // Add animal-specific button

The padRight(10) on the back button ensures a gap between the two buttons for a cleaner appearance.

---

Dialog Box Layout and Positioning

The dialog box itself has been adjusted to ensure a more balanced and centered layout.

• Dialog Size: The width and height are now dynamically calculated based on the content, providing additional space for a less cramped appearance.

  this.dialogWidth = calculateDynamicWidth();  // New dynamic width calculation
  this.dialogHeight = calculateDynamicHeight();  // New dynamic height calculation
  

• Content Layout: A new innerTable structure has been introduced to separate the image and text/stats sections. The left side contains the animal image, and the right side holds the text and stats in a two-column layout.

  innerTable.add(animalImage).width(dialogWidth * 0.4f).height(dialogHeight * 0.8f).padRight(20);
  innerTable.add(rightTable).width(dialogWidth * 0.6f).expandY().top();
  

  This ensures that the image and text/stats are clearly separated and visually balanced.

---

Centering the Dialog

To ensure the dialog appears centered on the screen, the position is dynamically calculated based on the screen dimensions and dialog size:

setPosition((Gdx.graphics.getWidth() - getWidth()) / 2f, (Gdx.graphics.getHeight() - getHeight()) / 2f);

This centers the dialog both horizontally and vertically on any screen size, improving the user experience.

New Formatted Dialog Box