├── icons
    ├── bell.png
    ├── folder.png
    ├── user.png
    ├── envelope.png
    ├── bell-active.png
    ├── user-active.png
    ├── folder-active.png
    └── envelope-active.png
├── README.md
├── qml.qrc
├── main.cpp
├── TabBar.pro
├── CurvedRectangle.qml
└── main.qml


/icons/bell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/bell.png


--------------------------------------------------------------------------------
/icons/folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/folder.png


--------------------------------------------------------------------------------
/icons/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/user.png


--------------------------------------------------------------------------------
/icons/envelope.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/envelope.png


--------------------------------------------------------------------------------
/icons/bell-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/bell-active.png


--------------------------------------------------------------------------------
/icons/user-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/user-active.png


--------------------------------------------------------------------------------
/icons/folder-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/folder-active.png


--------------------------------------------------------------------------------
/icons/envelope-active.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmirHosseinCH/TabBar/HEAD/icons/envelope-active.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TabBar
 2 | custom tab bar created with Qml
 3 | # Demo
 4 | https://user-images.githubusercontent.com/81587689/113275206-c84b0500-92f3-11eb-80b6-ab7428b6a9d0.mp4
 5 | # Compilation
 6 | ```
 7 | qmake EmojiPicker.pro
 8 | make
 9 | ```
10 | 


--------------------------------------------------------------------------------
/qml.qrc:
--------------------------------------------------------------------------------
 1 | <RCC>
 2 |     <qresource prefix="/">
 3 |         <file>main.qml</file>
 4 |         <file>icons/bell-active.png</file>
 5 |         <file>icons/bell.png</file>
 6 |         <file>icons/envelope-active.png</file>
 7 |         <file>icons/envelope.png</file>
 8 |         <file>icons/folder-active.png</file>
 9 |         <file>icons/folder.png</file>
10 |         <file>icons/user-active.png</file>
11 |         <file>icons/user.png</file>
12 |         <file>CurvedRectangle.qml</file>
13 |     </qresource>
14 | </RCC>
15 | 


--------------------------------------------------------------------------------
/main.cpp:
--------------------------------------------------------------------------------
 1 | #include <QGuiApplication>
 2 | #include <QQmlApplicationEngine>
 3 | 
 4 | int main(int argc, char *argv[]) {
 5 | #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
 6 |     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 7 | #endif
 8 | 
 9 |     QGuiApplication app(argc, argv);
10 | 
11 |     QQmlApplicationEngine engine;
12 |     const QUrl url(QStringLiteral("qrc:/main.qml"));
13 |     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
14 |                      &app, [url](QObject *obj, const QUrl &objUrl) {
15 |         if (!obj && url == objUrl)
16 |             QCoreApplication::exit(-1);
17 |     }, Qt::QueuedConnection);
18 |     engine.load(url);
19 | 
20 |     return app.exec();
21 | }
22 | 


--------------------------------------------------------------------------------
/TabBar.pro:
--------------------------------------------------------------------------------
 1 | QT += quick
 2 | 
 3 | CONFIG += c++17
 4 | 
 5 | # You can make your code fail to compile if it uses deprecated APIs.
 6 | # In order to do so, uncomment the following line.
 7 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
 8 | 
 9 | SOURCES += \
10 |         main.cpp
11 | 
12 | RESOURCES += qml.qrc
13 | 
14 | # Additional import path used to resolve QML modules in Qt Creator's code model
15 | QML_IMPORT_PATH =
16 | 
17 | # Additional import path used to resolve QML modules just for Qt Quick Designer
18 | QML_DESIGNER_IMPORT_PATH =
19 | 
20 | # Default rules for deployment.
21 | qnx: target.path = /tmp/$${TARGET}/bin
22 | else: unix:!android: target.path = /opt/$${TARGET}/bin
23 | !isEmpty(target.path): INSTALLS += target
24 | 


--------------------------------------------------------------------------------
/CurvedRectangle.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.9
 2 | import QtQuick.Controls 2.5
 3 | import QtQuick.Shapes 1.12
 4 | 
 5 | Shape {
 6 |     id: shape
 7 |     property var cornersRadius
 8 |     property color color
 9 |     layer.enabled: true
10 |     layer.samples: 4
11 |     ShapePath {
12 |         startX: 0
13 |         startY: cornersRadius[0]
14 |         fillColor: color
15 |         PathQuad { x: cornersRadius[0]; y: 0; controlX: 0; controlY: 0 }
16 |         PathLine { x: shape.width - cornersRadius[1]; y: 0 }
17 |         PathQuad { x: shape.width; y: cornersRadius[1]; controlX: shape.width; controlY: 0 }
18 |         PathLine { x: shape.width; y: shape.height - cornersRadius[2] }
19 |         PathQuad { x: shape.width - cornersRadius[2]; y: shape.height; controlX: shape.width; controlY: shape.height }
20 |         PathLine { x: cornersRadius[3]; y: shape.height }
21 |         PathQuad { x: 0; y: shape.height - cornersRadius[3]; controlX: 0; controlY: shape.height }
22 |         PathLine { x: 0; y: cornersRadius[0] }
23 |     }
24 | }
25 | 


--------------------------------------------------------------------------------
/main.qml:
--------------------------------------------------------------------------------
 1 | import QtQuick 2.9
 2 | import QtQuick.Controls 2.5
 3 | import QtGraphicalEffects 1.0
 4 | 
 5 | ApplicationWindow {
 6 |     width: 640
 7 |     height: 480
 8 |     visible: true
 9 |     title: 'Tab Bar'
10 |     Rectangle {
11 |         id: container
12 |         property var sources: ['user.png', 'bell.png', 'folder.png', 'envelope.png']
13 |         property var activeSources: ['user-active.png', 'bell-active.png', 'folder-active.png', 'envelope-active.png']
14 |         property var backgroundColors: ['#1789fc', '#e76f51', '#2a9d8f', '#f6aa1c']
15 |         property var rectColors: ['#bcdbf7', '#ecdbd6', '#a5dbd4', '#fde1ac']
16 |         property var radii: [[20, 20, 20, 40], [20, 20, 20, 20], [20, 20, 20, 20], [20, 20, 40, 20]]
17 |         property int currentIndex: 0
18 |         width: 400
19 |         height: 200
20 |         radius: 10
21 |         color: backgroundColors[currentIndex]
22 |         anchors.centerIn: parent
23 |         Behavior on color {
24 |             ColorAnimation {
25 |                 duration: 1000
26 |             }
27 |         }
28 |         CurvedRectangle {
29 |             width: 350
30 |             height: 100
31 |             color: '#ffffff'
32 |             cornersRadius: [0, 0, 40, 40]
33 |             anchors.centerIn: parent
34 |             Row {
35 |                 spacing: 5
36 |                 anchors.centerIn: parent
37 |                 Repeater {
38 |                     model: 4
39 |                     delegate: Item {
40 |                         width: 80
41 |                         height: 80
42 |                         CurvedRectangle {
43 |                             color: container.rectColors[index]
44 |                             cornersRadius: container.radii[index]
45 |                             opacity: index === container.currentIndex ? 1 : 0
46 |                             anchors.fill: parent
47 |                             Behavior on opacity {
48 |                                 NumberAnimation {
49 |                                     duration: 1000
50 |                                 }
51 |                             }
52 |                         }
53 |                         Image {
54 |                             id: icon
55 |                             source: 'icons/' + (index === container.currentIndex ? container.activeSources[index] : container.sources[index])
56 |                             sourceSize: Qt.size(25, 25)
57 |                             anchors.centerIn: parent
58 |                             MouseArea {
59 |                                 anchors.fill: parent
60 |                                 cursorShape: Qt.PointingHandCursor
61 |                                 onClicked: {
62 |                                     container.currentIndex = index
63 |                                 }
64 |                             }
65 |                             ColorOverlay {
66 |                                 anchors.fill: icon
67 |                                 source: icon
68 |                                 color: container.backgroundColors[container.currentIndex]
69 |                                 Behavior on color {
70 |                                     ColorAnimation {
71 |                                         duration: 1000
72 |                                     }
73 |                                 }
74 |                             }
75 |                         }
76 |                     }
77 |                 }
78 |             }
79 |         }
80 |     }
81 | }
82 | 


--------------------------------------------------------------------------------