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

3 posts, 0 answers
  1. Marc
    Marc avatar
    84 posts
    Member since:
    Oct 2013

    Posted 12 Jun Link to this post

    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

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    285 posts

    Posted 12 Jun 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" />
        </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
    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
    84 posts
    Member since:
    Oct 2013

    Posted 12 Jun 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,

    Marc

Back to Top