How Can I Draw Notification Head On "QTabBar"

[Serafim Rafail]

I want to draw a notification head on the top left corner so when i receive new message i can pop that like messenger .

Here is a image for better understanding :

Do i have to do it using "paintEvent" ? i know how to draw the 'Tab' as you can see below but not sure how to draw the notification head' or is there any other way ?

void c_QTabBar::paintEvent(QPaintEvent *event)
{
    QTabBar::paintEvent(event);
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < count(); i++) {
        initStyleOption(&opt, i);

        opt.palette.setColor(QPalette::Button, Qt::blue);
        painter.drawControl(QStyle::CE_TabBarTab, opt);
    }
}

Could You Please Help Me, Thanks In Advance

[SGaist]

Hi and welcome to devnet,

There are several possibilities. One of them is to customize the paintEvent as you did. Another one is to use a small custom widget where you paint the number and move it at the right place on top of your tab widget.

[Serafim Rafail]

@SGaist second option sounds better, can you please give me a little bit of code snippet on how can i paint this and add to my QTabBar
"i am sorry to bother you but i am a total beginner".

[SGaist]

QPainter::drawEllipse in a square
QPainter::drawText in the same square.

Without forgetting to change the brush to the color your want.

[Serafim Rafail]

@SGaist can you help me out here little bit i tried your suggestion and got stuck here.

As below image you can see the ellipse is getting cropped by tabbar how can fix this ?

The Result i want is this "photoshoped" :

Here is my current code :

void c_QTabBar::paintEvent(QPaintEvent *event)
{
    QTabBar::paintEvent(event);
    QStylePainter painter(this);
    QStyleOptionTab opt;

    for (int i = 0; i < count(); i++) {
        initStyleOption(&opt, i);

        QPainter *c = new QPainter(this);
        QRectF rectangle(-5.0, -5.0, 15.0, 15.0);
        c->setPen(QColor(Qt::red));
        c->setBrush(QColor(Qt::red));
        c->drawEllipse(rectangle);
        c->end();
    }
}

Kindly Help, Thanks In Advance

[jsulm]

@Serafim-Rafail Don't draw it in the tab bar if you don't want it to be cropped

[Serafim Rafail]

@jsulm Thank you for your replay. Any idea where should i draw it and how??

[jsulm]

@Serafim-Rafail For example in the widget which contains the tab bar

[Serafim Rafail]

@jsulm You mean in the QTabWidget() ? I did try to do that now but it does not work.

Here is my code :

void c_QTabWidget::paintEvent(QPaintEvent *)
{
    QPainter *c = new QPainter(this);
    QRectF rectangle(-5.0, -5.0, 15.0, 15.0);
    c->setPen(QColor(Qt::red));
    c->setBrush(QColor(Qt::red));
    c->drawEllipse(rectangle);
    c->end();
}

[jsulm]

@Serafim-Rafail said in How Can I Draw Notification Head On "QTabBar":

You mean in the QTabWidget() ?

No, the widget containing the whole tab widget.
It is quite simple: if you draw inside tab widget then you only can draw inside that widget, but you want to also draw outside of it.

[Serafim Rafail]

@jsulm My QTabWidget() is inside QSplitter() and if i understand you correctly i need to draw inside of the QSplitter() but then how will i keep track of which notification for which tab ? I will paint the ellipse dynamically on specific tab when i need to but it can't be done if i paint this on QSplitter() is my understandings correct ? or i am missing something ? i am beginner in Qt so please explain.

Thanks in Advance.

[mpergand]

@Serafim-Rafail
I think you go the wrong way.
Simply add extra margins to the left by adding some spaces to the text of the tab and draw the number of notifs here.