Toolbar/Actionbar background

[koloboid]

Hello folks, I have a little question - how this design can be implemented with qmlMaterial? I'm not about parallax animations, but only to make actionbar needed height and place an image (it would be nice ability to put custom Item as toolbar background) To raise actionbar height I've used actionBar.extendedContent, but placing background image is more tricky (customContent and extendedContent always cover action buttons, needs magic margins, etc). We have to found more easy way to achieve subj design. Any ideas?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[marco-piccolino]

Alex I pur together something like that. Let me see if I find the code. M Il 12/set/2015 11:12 AM, "Alex Godko" notifications@github.com ha scritto:

Hello folks, I have a little question - how this design

can be implemented with qmlMaterial? I'm not about parallax animations, but only to make actionbar needed height and place an image (it would be nice ability to put custom Item as toolbar background) To raise actionbar height I've used actionBar.extendedContent, but placing background image is more tricky (customContent and extendedContent always cover action buttons, needs magic margins, etc). We have to found more easy way to achieve subj design. Any ideas?

— Reply to this email directly or view it on GitHub.

[marco-piccolino]

ActionBar {
        id: bar
        Rectangle {
            anchors.fill: parent
            color: "blue"
            opacity: flickable.contentY / bar.height
            z: -1
        }

        backgroundColor: "#000000"
        backAction: Action {
            iconName: "navigation/arrow_back"

            onTriggered: pageStack.pop()
        }
        actions: [
            Action {
                iconName: "action/favorite"
            }

        ]
    }

[marco-piccolino]

The default actionBar for the Page is hidden: true. And then I have a Flickable underneath with an image at the top. This won't give you parallax but works for the transparency.

[koloboid]

Marco, thank you for suggesting. I've tried this approach before, but there are issue with transition animation between pages (custom ActionBar moves as a part of page with animation from bottom, and smooth transformation looks broken). So, for your opinion - does this project need to implement easy and flexible way to control toolbar background?

[marco-piccolino]

I would say at least we'd need to make the actionbar smarter so that when it's trasparent by some dedicated property the page's content goes under it. Adding the scrolling behaviour as an option would also be great. So, yes. Il 12/set/2015 02:56 PM, "Alex Godko" notifications@github.com ha scritto:

Marco, thank you for suggesting. I've tried this approach before, but there are issue with transition animation between pages (custom ActionBar moves as a part of page with animation from bottom, and smooth transformation looks broken). So, for your opinion - does this project need to implement easy and flexible way to control toolbar background?

— Reply to this email directly or view it on GitHub https://github.com/papyros/qml-material/issues/276#issuecomment-139760074 .

[koloboid]

Ok. I'm going to implement it. At now, I'm simply added backgroundContent alias to ActionBar, like extendedContent but with fill: parent anchor. Toolbar height calculation is slightly modified, to choose max height of actionBar or their backgroundContent (through backgroundHeight property similar to extendedContent). Works for me, breaks nothing, but there are some work ahead - deal with tab bar (which fill actionBar backgroundColor at now) and create property to connect any Flickable to actionBar to achieve parallax scroll or any other animation (opacity fade) depend on Flickable state. I'l try to pull request next few days.