The transparent button showing an image

Question

I want to create a button that displays a given image with a transparent background. I am using the code segment below:

ui->setupUi(this);
this->setFixedSize(width, height);

QPixmap* orgPixmap = new QPixmap(":/images/a.png");
QSize size(this->width(), this->height());
QPixmap resizePixmap(orgPixmap->scaled(size));

QPalette palette;
palette.setBrush(this->backgroundRole(), QBrush(resizePixmap));
this->setPalette(palette);

ui->toolButton->setStyleSheet("background-color: rgba(255, 255, 255, 0);");
ui->toolButton->setFixedSize(64, 64);
ui->toolButton->setIconSize(QSize(64, 64));
ui->toolButton->setIcon( QIcon(":/images/add.png") );

At the top of the widget, I have added a button with an icon. This is a blue circle with a transparent background. However, when I deploy and run my code on an Android device, the button is displayed with an opaque background with white colour.

Please see the picture:

I have tried to force the transparency for the button using the following code:

QColor transparent_color(0,0,0,0);
QPalette button_palette(ui->pushButton->palette());

button_palette.setColor(QPalette::Button, transparent_color);
ui->toolButton->setPalette(button_palette);

The above code did not seem to have the desired effect as I had expected. I would like to know what the problem might be and how to fix it.

Your explanation is not very clear. You want the transparent widget on top of the other widget and only showing the image? — Alexander V, Feb 04 '16 at 22:44
Sorry for my English skill is not good. But the thing you said which is i want — Viet, Feb 05 '16 at 04:35
Have you checked `setAttribute(Qt::WA_TranslucentBackground, true);` on the button? — frogatto, Feb 11 '16 at 07:57
Also take a look at this question: http://stackoverflow.com/questions/2673983/how-to-put-png-image-with-transparent-background-in-qtoolbutton — frogatto, Feb 11 '16 at 07:59
I have tried "ui->toolButton->setAttribute(Qt::WA_TranslucentBackground, true);" but it still not work as i want — Viet, Feb 11 '16 at 08:04
Are you tried set `Qt::WA_NoSystemBackground` (with `Qt::WA_TranslucentBackground`) to true also? — timocov, Feb 13 '16 at 18:32

score 0 · Answer 1 · answered Feb 11 '16 at 12:44

I see you need a circular button, so how about QWidget::setMask()?

QPainterPath path;
path.addEllipse(ui->pushButton->rect());
QRegion mask = QRegion(path.toFillPolygon().toPolygon());
ui->pushButton->setMask(mask);

Just an idea, I did not test that.

score 0 · Answer 2 · answered Feb 11 '16 at 19:59

0

You could set a simple style sheet. Like so: widget->setStyleSheet(rgba(255, 255, 255,0);"); if you want to adjust the opacity, just change the fourth parameter.

answered Feb 11 '16 at 19:59

Nicholas Johnson

1,012
2
12
35

Andriy Gulé · Answer 3 · 2016-02-12T10:45:19.440

I have recenyly resolved similar problem on a Win/Mac project based on Qt Graphics View Framework, pls note I never tested this on Android platform.

Anyhow, first you need to setForegroundBrush() for your Graphics Scene:

ui.yourGraphicsView->scene()->setsetForegroundBrush(Qt::transparent);

Alternatively you may use Qt Designer to get similar result or edit your Project.ui file as follows:

<widget class="QGraphicsView" name="yourGraphicsView">
...
 <property name="foregroundBrush">
  <brush brushstyle="NoBrush">
   <color alpha="255">
    <red>0</red>
    <green>0</green>
    <blue>0</blue>
   </color>
  </brush>
 </property>

And now setBackgroundBrush() as transparent for your button:

ui->toolButton->setBackgroundBrush(Qt::transparent);

I found these two to be sufficient to get hovering transparent button over other objects in QGraphicScene; calling setMask() is not required as Qt does it automatically for any QGraphicsPixmapItem (or ancestor) when it's set to alpha-channeled PNG. For buttons it also works as you would expect: clicking transparent area of your PNG (displayed white above) would NOT trigger OnClick() event, while clicking trnslucent parts on PNG-based button would.

Hope this helps...

The transparent button showing an image

3 Answers3