Nativescript: [Android] TabView and overlays

[manijak]

In response to: https://github.com/NativeScript/NativeScript/issues/3901#issuecomment-292937984
The issues below are only present on Android, iOS works fine.

If one is using a TabView as the main component in a view, and also adds some type of overlay (like ActivityIndicator), you would do something like this in your Page (with minimal nesting):

<GridView>
    <TabView>
     ....
    </TabView>

    <StackLayout backgroundColor="#E60362A2" verticalAlignment="center" height="100%" width="100%">
        <ActivityIndicator busy="true" color="white"/>
    </StackLayout>
</GridView>

But this causes the indicator to appear inside the TabItem, behind all the other components in that same TabItem.

In order to fix that, we need to wrap the TabView with some layout:

<GridView>
    <StackLayout>
      <TabView>
       ....
      </TabView>
    <StackLayout>

    <StackLayout backgroundColor="#E60362A2" verticalAlignment="center" height="100%" width="100%">
         <ActivityIndicator busy="true" color="white"/>
    </StackLayout>
</GridView>

Another issue in the above example, is that even tho we have a StackLayout overlay stretching 100% over the view, we can still tap and use the elements behind it. Like taping on the tab buttons and switching tabs. This is not possible on iOS, should be the same behavior on Android.

I've made a demo-app that shows both issues:
https://www.dropbox.com/s/4iy5t3zh9rqaukz/tab-demo.zip?dl=0

Using vanilla-tns v2.5.2

---

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

[tsonevn]

Hi @manijak,
Thank you for the attached sample project,
While testing I found that the issue with indicator appears inside the TabItem is reproducible on Android API level higher than 19. We will research what is causing this issue and will provide a fix. In the meantime, you could nest the TabView in StackLayout as you have suggested in your comment.

About the second problem with TabView events, you could set tab event to the StackLayout, which will prevent executing the TabView events. For example:
XML

<StackLayout tap="tabEvent" backgroundColor="#E60362A2" verticalAlignment="center" height="100%" width="100%">
            <ActivityIndicator busy="true" color="white"/>
</StackLayout>

JavaScript

exports.tabEvent = function(args){
    console.log("tap event")
}

[manijak]

Thanks for the tip regarding the tap-event on the overlay, nice 😄

[tsonevn]

The issue is still reproducible with NativeScript 4.1.

Archive.zip