Android: setting `background_color` on a box can hide some of its child widgets' UI
- Dominant language
- Python
- Stars
- 5.4k
- Forks
- 827
- Avg merge
- 15h 39m
- Merged PRs (30d)
- 40
Description
Originally posted in #3118 by @proneon267
----
if I have:
```
toga.Box(
style=Pack(flex=1),
children=[
toga.Selection(
items=["Alice", "Bob", "Charlie"],
)
],
)
```
Then the animation effect on interaction would look like:

But now, if I set a background color on the parent like:
```
toga.Box(
style=Pack(flex=1, background_color="#87CEFA"),
children=[
toga.Selection(
items=["Alice", "Bob", "Charlie"],
)
],
)
```
Then the animation effect on interaction would look like:

As we can see, the dropdown arrow is not visible, and the ripple effect is also not visible.
The same problem exists in other widgets also(like `toga.Switch`, etc.), where the ripple effect will not be visible:


I experimented with semi-transparent backgrounds:
```
toga.Box(
style=Pack(flex=1, background_color=rgba(135, 206, 250, 0.5)),
children=[
toga.Selection(
items=["Alice", "Bob", "Charlie"],
)
],
)
```

The background features are being drawn directly on the native parent(RelativeLayout), as the Box isn't actually the Selection's parent at the native level: both of them are direct children of the RelativeLayout.
Contributor guide
Research direction
Reproduce the issue with a Box containing a Selection or Switch on Android, comparing opaque and semi-transparent background colors. Inspect how Box backgrounds and child widgets are placed in the native RelativeLayout. Done means child UI such as the Selection dropdown arrow and interaction ripple effects remain visible when the parent Box has a background color.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, python
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100