beeware / beeware/toga

Android: setting `background_color` on a box can hide some of its child widgets' UI

Open
#3,235 2 comments 0 reactions 0 assignees View on GitHub
android bug
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:

![](https://github.com/beeware/toga/assets/45512885/a878e985-774f-48e6-be0d-bc6e07b4a911)

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:

![](https://github.com/beeware/toga/assets/45512885/ecb6b749-712a-41ca-b8fb-06a569631cb9)

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:

![](https://github.com/beeware/toga/assets/45512885/c16fa158-26da-4de2-9811-66e3dc50bb33)
![](https://github.com/beeware/toga/assets/45512885/4aecf250-1f5e-4feb-9b63-18a779cea670)

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"],
)
],
)
```

![Screenshot 2025-01-23 001225](https://github.com/user-attachments/assets/63fe371f-54d0-4826-97d2-be3d110e0896)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.