Results 1 to 5 of 5

Thread: How to create Android Style On/Off-Toggle switch in Qt/C++

  1. #1
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    254
    Thanks
    92
    Thanked 16 Times in 16 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Lightbulb How to create Android Style On/Off-Toggle switch in Qt/C++

    I need to create a toggle switch which resembles android style On/Off-toggle switch in Qt/C++ and not in Qml. Also, I don't want to use radio buttons or QPushButton with toggle properties as it's a bit old style. Can somebody kindly help me in giving the idea for doing the same.
    NB: Pls find the sample pic below.
    Thank you.

    Android_Toggle_Switch.png

  2. #2
    Join Date
    Sep 2009
    Location
    Aachen, Germany
    Posts
    60
    Thanks
    2
    Thanked 7 Times in 7 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: How to create Android Style On/Off-Toggle switch in Qt/C++

    Hi,
    I would create a subclass of QAbstractButton.
    It pretty much does everything you want. Just make it checkable and reimplement the paintEvent to get the look you would like.

  3. #3
    Join Date
    Sep 2011
    Location
    Bangalore
    Posts
    254
    Thanks
    92
    Thanked 16 Times in 16 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Windows

    Default Re: How to create Android Style On/Off-Toggle switch in Qt/C++

    Thanks for the reply ChiliPalmer.
    Can you kindly show a sample on how to do it. I'm novice in Qt and I've never used QAbstractButton, so if you can ignite me with some basic code, it'll be helpful. Thank you.

  4. #4
    Join Date
    Sep 2009
    Location
    Aachen, Germany
    Posts
    60
    Thanks
    2
    Thanked 7 Times in 7 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: How to create Android Style On/Off-Toggle switch in Qt/C++

    Alright, this is very, very basic and won't look that nice. But it might be a good starting point.

    Qt Code:
    1. AndroidSwitch::AndroidSwitch(QWidget* parent)
    2. : QAbstractButton(parent)
    3. {
    4. setCheckable(true);
    5. }
    6.  
    7. AndroidSwitch::paintEvent(QPaintEvent* event)
    8. {
    9. QPainter painter(this);
    10. painter.fillRect(rect(), Qt::gray);
    11. QRect switchRect;
    12. QColor switchColor;
    13. QString text;
    14. int halfWidth = width() / 2;
    15. if (isChecked()) {
    16. switchRect = QRect(halfWidth, 0, halfWidth, height());
    17. switchColor = QColor(Qt::cyan);
    18. text = "On";
    19. } else {
    20. switchRect = QRect(0, 0, halfWidth, height());
    21. switchColor = QColor(Qt::darkGray);
    22. text = "Off";
    23. }
    24. painter.fillRect(switchRect, switchColor);
    25. painter.drawText(switchRect, Qt::AlignCenter, text);
    26. }
    To copy to clipboard, switch view to plain text mode 

  5. The following user says thank you to ChiliPalmer for this useful post:

    rawfool (29th March 2013)

  6. #5
    Join Date
    Apr 2016
    Posts
    1
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded PyQt3 PyQt4
    Platforms
    Unix/X11

    Wink Re: How to create Android Style On/Off-Toggle switch in Qt/C++

    Hi
    Probably the easiest way is to create checkbox and replace default check image with android style icon

Similar Threads

  1. Replies: 3
    Last Post: 12th March 2013, 11:16
  2. Toggle dialog visibility on application switch
    By gvanvoor in forum Qt Programming
    Replies: 12
    Last Post: 20th June 2012, 12:11
  3. Replies: 2
    Last Post: 6th April 2010, 22:42
  4. Replies: 20
    Last Post: 22nd October 2009, 02:22
  5. How to toggle between 2 forms
    By safknw in forum Qt Programming
    Replies: 2
    Last Post: 13th May 2006, 11:34

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.