Nativescript: Built-in Android CoordinatorLayout support for NativeScript | Hide actionbar while scrolling | The Collapsing Toolbar

[shiv19]

Modern android apps, have the parallax scrolling behavior, where the action bar fades away when scrolling through the page, and it provides very good UX. As of now, there is no easy way to do this using NativeScript.

I have tried the nativescript-parallax plugin, but it seems to be broken as of now.

Please consider this feature request for the next release.

Update:
Here are some images of the behavior that is needed

---

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

[tsonevn]

Hi @shiv19,
Thank you for contacting us,
Indeed parallax scrolling behavior provides very good UX and this is the reason why the plugin was created.
I tested the NPM version of the plugin with inside a NativeScirpt application and indeed it will lead to a crash. In my further investigation, I found that the version in the master branch of nativescript-parallax works as expected on both iOS and Android. In this case, I would suggest building a local tgz file of the plugin and to use it in your project.
For your help, I also attach a zip file with an already built tgz file.
nativescript-parallax-1.4.0.zip

[shiv19]

@tsonevn
Hi Nikolay, I was able to try the plugin thanks to you.
Hope to see better support for CoordinatorLayout in NativeScript.
Would like to see it as a Layout Type in NativeScript rather than a plugin.

Because internally, native-script parallax plugin is using scroll-view, grid-layout, absolute-layout and stack-layout to pull it off. Due to which the performance is not pure native. If you scroll fast enough, you can see glitches (white lines on the screen, something you wouldn't want to use in production).

Edit: In particular, collapsing toolbar is what I'm looking for.

[tsonevn]

Hi @shiv19,

Thank you for the additional info.
I have to agree that this would be a useful feature, regarding that I marked this as a feature request.
You could keep track on this issue for further info. If there is interest for similar functionality, this feature could be expected for some of the next versions of NativeScript.

[ashisherc]

This is going to allow pure native looking apps in android. I hope to see the same effect in iOS as well.
:+1:

[farfromrefug]

Actually this might be tough to achieve within the sdk itself I think. However material-components might be the way to go. Plus it will work on iOS !

[tigrenok00]

+1 for the feature request

[vishwa1937]

We should add this and other native feature of android and iOS into nativescript.

[shiv19]

@vishwa1937 this will be possible after NativeScript 5.0 is released this month ^_^

[vishwa1937]

@shiv19 That's nice :) . We should add more native features in Nativescript.

[shiv19]

This will be coming as a part of nativescript-material project, which is in the works.
currently, we haven't estimated the timeline. When we do, I'll update it here :)

[farfromrefug]

@shiv19 you are writing a material component?
If so i am too we should merge our work!

[shiv19]

@farfromrefug actually @sebawita created the repo for it, we haven't started writing any code for it.
We (nStudio) have a document where we have listed the widgets to be covered.
if you have already begun work on it, I think it is a good idea to merge it into nativescript-material project.

[farfromrefug]

@shiv19 Well if you have not written anything yet i wont merge my whole project, which already have a lot into an empty one ;) You are welcome to contribute though.

[shiv19]

@farfromrefug can you link me to it please?
Either here or on slack @multishiv19

[farfromrefug]

here you go

[sanjeet007]

Modern android apps, have the parallax scrolling behavior, where the action bar fades away when scrolling through the page, and it provides very good UX. As of now, there is no easy way to do this using NativeScript.

I have tried the nativescript-parallax plugin, but it seems to be broken as of now.

Please consider this feature request for the next release.

Update:
Here are some images of the behavior that is needed

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

Where i get this project

[wuilmerj24]

Hi. Status this issue?

[farfromrefug]

This could be implemented within nativescript-material-components. However it requires quite a bit of work to get something consistent on iOS and android. PRs are welcome ;)

[wuilmerj24]

@farfromrefug greats.