Questions regarding UI design

Greetings to MIT app inventor community.

I am developing a trivia app but i face the below difficulties:

Number 1:
I have a vertical arrangement with "automatic" height and "fill parent width". The "alignHorizontal" and "alignVertical" attributes of the vertical arrangement are all set to center.
The vertical arrangement contains 4 buttons, each inside a horizontal arrangement, that represents the four possible answers to the quiz questions.

Summarizing the specs regarding these buttons:

  • These buttons represent quiz answers, therefore the text will always change.
  • Also the button size will change depending on screen orientation and resolution.
  • Therefore using an image as background does not seems to be a viable option.

The first question is the following:
I am trying to make the buttons have a border of #e9d0ae. In design view everything seems great but when i run the game, the border does not appear.
The attached image comes from the design view.
Screenshot 2024-02-15 133603

The below screenshot is what i see from my phone

The second question is the following:
I am trying to make an expandable listview that will contain the quiz titles(i.e chemistry,physics).
When the user clicks a quiz title(i.e chemistry), the list should expand and multiple quizzes will be shown(for example chemistry1,chemistry2 etc).

I have set the following requirements for this expandable listview:

  • It should take the whole screen, or more(scrollbar), when on vertical view
  • It should take the whole screen, or more(scrollbar), when on horizontal view.

Right now i am putting a button inside a horizontal view with attributes of width and height set to "Automatically" in order to capture the user click and a "down_arrow.png" transparent image to simulate a down arrow.
This way have the following drawbacks:

  • The button covers only 90% of the horizontal view. The other 10% is left empty in order to put the "down_arrow" image.
  • Weirdly enough, i see something like a border around the button that i want it to disappear.

Long story short:

  • Are there any extensions i can use for adding border to buttons and for making expandable listviews?
  • Is there any way to achieve these things without moving to extensions?

I attach a sample ".aia" file that has the screens with the problems.

  • The problems with the "listviews" as implemented now starts when i build an apk of the game and not on "AI companion"

questions.aia (16.9 KB)

Thanks in regard for the help!

One way to handle your button border and listviews

buttonsAndListviews.aia (1.9 KB)

May be what you want, or give you some ideas...

Something like this?