Creating custom android component (Bottom App Bar with cradle effect)

[md2012]

hi every one,
i would like to recreate one of the android components in Qt/Qml.
It is a mix of Floating Button which i think is The RoundButton in qml and a cradle effect on the footer side. just like the image below.

any ideas would be appreciated.

[md2012]

more information about the android one:
https://medium.com/over-engineering/hands-on-with-material-components-for-android-bottom-app-bar-28835a1feb82

[J.Hilk]

Hi @md2012

a couple of way come to mind on how to do it.

• The easiest would probably be to simply use an Image component as button and place it above the footer, and with some photoshop skills, it should look convincing enough

• Use a Round button, and draw the footer yourself, or the border at least, can be easily done with a Canvas component

[GrecKo]

I guess you want it animated like that : https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1KJSld6h82fzkcafrHCDFPOITibpWxF-5%2Fbehavior-layout-primary.mp4 ( taken from here : https://material.io/components/app-bars-bottom/#behavior ).

So an image won't really do it.

There are multiple way of doing a bar with a hole.
With a Canvas like J.Hilk said, but that won't be the most performant solution I guess
With a Shape
With a custom QQuickPaintedItem
With a custom "raw" QQuickItem

I would personnaly go with a QQuickPaintedItem first.

Then just add a shadow (with DropShadow) and your button with RoundButton.

[md2012]

@J-Hilk said in Creating custom android component (Bottom App Bar with cradle effect):

Canvas

thanks for sharing your thoughts.
Canvas seems more interesting to me since it will give more options to draw custom components of my own.
i would appreciate if you share some document links on how to use it in QML.

[J.Hilk]

@md2012
sure,
take a look at the documentation for the class:
https://doc.qt.io/qt-5/qml-qtquick-canvas.html

In the onPaint "signal" you do all your drawing. It uses HTML 5 syntax, so you may have to look for external documentation like this one:
https://www.w3schools.com/html/html5_canvas.asp
to get a craps on all the possibilities

A quick note, Canvas is nice for small custom changes, like changing the border of your item or drawing simple shapes.
For anything more fancy, with lots of points to draw or lots of different shapes, the solutions posted by @GrecKo are better suited, but more difficult to understand/do.

[md2012]

@GrecKo
Interesting Animations. surely after i created the component i'ill go for it.
here is a sample of latest MaterialTextField i built:
https://gofile.io/?c=rkqT67

[GrecKo]

@md2012 Your link doesn't work :(
If we are sharing links of custom QML textfields, here is a thing I've done : https://gfycat.com/fr/shabbycoarseaddax :)