How to create custom elements styled like material design?

Question

I love material design. I love jquery, web forms and elements. It have many styles. But when i use PyQt i have default button and checkbox...

I love something like this:

Can I change qt elements so that they become similar to the elements of web-forms? Tell me what to read or may have examples of how to do this already? I just do not know if this is possible because I do not know in which direction to look for ...

i use qt4 and windows... and know only python, not C/C++

Answer 1

Start creating your own widgets and override the paintEvent

I am putting in an example here that mostly summarizes what you need to know.
The example shows the checkbox as an on/off button.

from PyQt4 import QtGui, QtCore
import sys
#===============================================================================
# MyCheckBox
#===============================================================================
#className
class MyCheckBox(QtGui.QCheckBox):
#|-----------------------------------------------------------------------------|
# class Variables
#|-----------------------------------------------------------------------------| 
    #no classVariables

#|-----------------------------------------------------------------------------|
# Constructor  
#|-----------------------------------------------------------------------------|
    def __init__(self, *args, **kwargs):
            QtGui.QCheckBox.__init__(self, *args, **kwargs)
            self.setStyleSheet("background-color: rgb(0, 0, 0);\n" + 
                      "color: rgb(255, 255, 255);\n")
            #set default check as True 
            self.setChecked(True)
            #set default enable as True
            #    if it set to false will always remain on/off
            #    here it is on as setChecked is True
            self.setEnabled(True)
            self._enable = True
#|--------------------------End of Constructor---------------------------------| 
#|-----------------------------------------------------------------------------|
#   mousePressEvent
#|-----------------------------------------------------------------------------|
    #overrite 
    def mousePressEvent(self, *args, **kwargs):
            #tick on and off set here
            if self.isChecked():
                self.setChecked(False)
            else:
                self.setChecked(True)
            return QtGui.QCheckBox.mousePressEvent(self, *args, **kwargs)
#|--------------------------End of mousePressEvent-----------------------------| 

#|-----------------------------------------------------------------------------| 
# paintEvent
#|-----------------------------------------------------------------------------|
    def paintEvent(self,event):

            #just setting some size aspects
            self.setMinimumHeight(40)
            self.setMinimumWidth(100)
            self.setMaximumHeight(50)
            self.setMaximumWidth(150)

            self.resize(self.parent().width(),self.parent().height())
            painter = QtGui.QPainter()
            painter.begin(self)

            #for the black background
            brush = QtGui.QBrush(QtGui.QColor(0,0,0),style=QtCore.Qt.SolidPattern)
            painter.fillRect(self.rect(),brush)


            #smooth curves
            painter.setRenderHint(QtGui.QPainter.Antialiasing)

            #for the on off font
            font  = QtGui.QFont()
            font.setFamily("Courier New")
            font.setPixelSize(28)
            painter.setFont(font)        

            #change the look for on/off
            if self.isChecked():
                #blue fill
                brush = QtGui.QBrush(QtGui.QColor(50,50,255),style=QtCore.Qt.SolidPattern)
                painter.setBrush(brush)

                #rounded rectangle as a whole
                painter.drawRoundedRect(0,0,self.width()-2,self.height()-2, \
                                   self.height()/2,self.height()/2)

                #white circle/button instead of the tick mark
                brush = QtGui.QBrush(QtGui.QColor(255,255,255),style=QtCore.Qt.SolidPattern)
                painter.setBrush(brush)
                painter.drawEllipse(self.width()-self.height(),0,self.height(),self.height())

                #on text
                painter.drawText(self.width()/4,self.height()/1.5, "On")

            else:
                #gray fill
                brush = QtGui.QBrush(QtGui.QColor(50,50,50),style=QtCore.Qt.SolidPattern)
                painter.setBrush(brush)

                #rounded rectangle as a whole
                painter.drawRoundedRect(0,0,self.width()-2,self.height()-2, \
                                   self.height()/2,self.height()/2)

                #white circle/button instead of the tick but in different location
                brush = QtGui.QBrush(QtGui.QColor(255,255,255),style=QtCore.Qt.SolidPattern)
                painter.setBrush(brush)
                painter.drawEllipse(0,0,self.height(),self.height())

                #off text
                painter.drawText(self.width()/2,self.height()/1.5, "Off")


#|-----------------------End of paintEvent-------------------------------------|
if __name__ == '__main__':
    app = QtGui.QApplication(sys.argv)
    wgt = QtGui.QWidget()
    wgt.setStyleSheet("background-color: rgb(0, 0, 0);\n")
    cb = MyCheckBox()
    cb.setParent(wgt)
    layout = QtGui.QHBoxLayout()
    layout.addWidget(cb)
    wgt.resize(200,100)
    wgt.show()
    sys.exit(app.exec_())

EDIT:

Attaching screen-shots for how it looks