Android: No 'shadow' on main content when Page has TabView and backgroundColor is set

[Marc]

Hello,

when the Drawer content is shown in Android, there should be a shadow on the rest of the page (main-content). I noticed, that this shadow above the main content is missing when the page contains a TabView and the view of the current Tab has set a backgroundColor, but the main content is disabled as expected, so that you can tap there to close the sidedrawer.

I tested this with

    NativeScript 2.5 (tns-core-modules 2.5.2) and
    NativeScript 3.0.3

getting the same result.

Here is a link to a sample project

The zip file also contains a GIF to demonstrate this behaviour.

Can you tell me what I can do or is this maybe a bug in the NativeScript core?

 

Best regards,

Marc

[Nikolay Tsonev]

Hello Marc,

Thank you for the attached sample project.

I reviewed the code and indeed there is a problem with showing the shadow over the mainContent, while the SideDrawer is opened.

Regarding that, we have logged new issue here and you could keep track on it for further info.

However, there is a simple workaround, which could be used meanwhile. You could put the TabView in GridLayout, which will allow showing the shadow as expected.

<Page loaded="pageMainLoaded" xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer">
    <ActionBar title="Page with TabView" backgroundColor="darkgreen">
        <NavigationButton icon="res://drawericon" tap="openOrCloseSideDrawer" />
    </ActionBar>
    <drawer:RadSideDrawer  id="ffSideDrawer">
        <drawer:RadSideDrawer.mainContent>
        <GridLayout rows="" columns="">
            <TabView>
                <TabView.items>
                    <TabViewItem title="Tab 1" ios:iconSource="res://tabitem_authors">
                        <TabViewItem.view>
                            <StackLayout backgroundColor="green">
                                <Label text="Test" />
                                <Button text="Navigate to Page without TabView" tap="navigateToPageWithoutTabView" />
                            </StackLayout>
                        </TabViewItem.view>
                    </TabViewItem>

                    <TabViewItem title="Tab 2">
                        <TabViewItem.view>
                            <StackLayout>

                            </StackLayout>
                        </TabViewItem.view>
                    </TabViewItem>
                </TabView.items>
            </TabView>
        </GridLayout>
        </drawer:RadSideDrawer.mainContent>
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout backgroundColor="yellow">
                <Label text="SideDrawer" />
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</Page>

Regards,
nikolay.tsonev
Progress Telerik

[Marc]

Hello Nikolay,

thanks for your help. I'm going to keep track on the created issue and use the workaround in the meantime, it is working as expected.

 

Best regards,

Marc