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.