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

Thread is closed for posting
3 posts, 0 answers
  1. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 12 Jun 2017 Link to this post


    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,


  2. nikolay.tsonev
    nikolay.tsonev avatar
    340 posts

    Posted 12 Jun 2017 Link to this post

    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" />
        <drawer:RadSideDrawer  id="ffSideDrawer">
            <GridLayout rows="" columns="">
                        <TabViewItem title="Tab 1" ios:iconSource="res://tabitem_authors">
                                <StackLayout backgroundColor="green">
                                    <Label text="Test" />
                                    <Button text="Navigate to Page without TabView" tap="navigateToPageWithoutTabView" />
                        <TabViewItem title="Tab 2">
                <StackLayout backgroundColor="yellow">
                    <Label text="SideDrawer" />

    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Marc
    Marc avatar
    101 posts
    Member since:
    Oct 2013

    Posted 12 Jun 2017 in reply to nikolay.tsonev Link to this post

    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,


Back to Top