Nativescript: Feature Request: Add child views directly to Frame

[speigg]

I'd like to place a view in a layout which spans the entire screen, overlaying all other views, including the actionBar. Is this possible?

edit: In other words, what I really want is to be able to add an arbitrary view (or layout) as a child of the frame (rather than the page)

[manijak]

I don't know about the actionBar, but for the rest you can just use a GridLayout, and place the content and the overlay in the same row. The overlay comes first, then the rest. This is what I do in some views that have ActivityIndicator.

<GridLayout>
    <ActivityIndicator ... />
    <StackLayout>
          .....
    </StackLayout>
</GridLayout>

[bradmartin]

@speigg - a couple of points.

• You can hide actionbar via actionbarHidden="false" DOC HERE
• To hide the statusbar on Android you are going to have to set a flag on the WindowLayout. DOC HERE _I don't think anything's been abstracted to easily do this with NativeScript yet_
• You'd also need to hide the NavigationBar DOC HERE _I don't think anything's been abstracted to easily do this with NativeScript yet_

[speigg]

@manijak @bradmartin Thanks, but I want to be able to place a view literally anywhere on the screen, without hiding the action bar / navigation bar. For example, in this case, I want to have a menu view which overlaps both the action bar and the content view when a button on the action bar is tapped.

[bradmartin]

Ahhhh. That makes sense now. I have not done this so I can't say how to achieve this exactly, but I would just use a side drawer menu for an offscreen navigation.

[speigg]

This is what I'm going for (this is the Chrome browser menu UI on iOS, note how the menu overlaps both the navigation bar and the content):

[bradmartin]

On android you can use an actionbar item to do that exact menu. It's in the docs. (On phone now. Sorry)

[speigg]

Thanks @bradmartin, but my primary target is ios, so that doesn't solve the problem (from the documentation you are referring to, it also seems very limiting, as that popup menu is documented as only being able to contain text). What I want is a way to place an arbitrary view anywhere I want anywhere on the screen.

[bradmartin]

Yea I can't think of anything at this time to do that. I'm sure it's
possible but right now I'm blanking out on a simple way to achieve it. You
might want to join the slack channel and ask there. You'll get some good
feedback :)

On Tue, Feb 23, 2016, 3:00 PM Gheric Speiginer [email protected]
wrote:

Thanks @bradmartin https://github.com/bradmartin, but my primary target
is ios, so that doesn't solve the problem (from the documentation you are
referring to, it also seems very limiting, as that popup menu is documented
as only contain being able to contain text). What I want is a way to place
an arbitrary view anywhere I want on the entire screen.

—
Reply to this email directly or view it on GitHub
https://github.com/NativeScript/NativeScript/issues/1619#issuecomment-187902458
.

[vjoao]

Maybe you can achieve the same functionality with this: https://github.com/PeterStaev/NativeScript-Drop-Down

[speigg]

@vjoao Thanks, but perhaps mentioning that I was making a menu was a distraction. The problem I'm having isn't making the menu, that's a tangential problem, the problem is positioning the menu where I want it on the screen, or, more generally, the problem is how can I position any arbitrary view (such as a menu) in any possible location on the screen, including over a navigation bar. Hopefully that's clearer ;)

[speigg]

@enchev Can this issue be reopened? I still haven't found a solution for this. If this simply isn't possible right now (placing a view relative to the frame, perhaps as a child of the frame, rather than as a child of the page), then consider this a feature request.

[enchev]

Hey @speigg,

Anyone can reopen any issue at any time! :)

[BhuvaneswariVajravel]

Hey @speigg,
you can use following structure to fix this issue

<StackLayout>
    <GridLayout>
        <StackLayout row="0">
            <StackLayout height="45">
                <GridLayout coloumns="2*,auto" class="inboxHeadtext">
                    <Label col="0" text="Nativescript title"></Label>
                    <StackLayout  col="1"  class="inbox-DropIcon">
                    <Image src="res://dropicon" (tap)="popupbtn()"></Image>
                </StackLayout>
                </GridLayout>
            </StackLayout>
            <StackLayout>
                <TextView hint="search text here"></TextView>
            </StackLayout>
            <StackLayout >
                <Label text="label1"></Label>
                <Label text="label2"></Label>
                <Label text="label3"></Label>
                <Label text="label4"></Label>
                <Label text="label5"></Label>
                <Label text="label6"></Label>
                <Label text="label7"></Label>
            </StackLayout>
        </StackLayout>
        <StackLayout  class="inbox-popupBg" row="1" visibility="{{isVisible ? 'visible' : 'collapsed'}}" (tap)="popupclose()">
            <StackLayout class="inbox-popup">
                <Label text="Newtab"></Label>
                <Label text="RecentTabs"></Label>
                <Label text="History"></Label>
                <Label text="Settings"></Label>
                <Label text="Help"></Label>
            </StackLayout>
        </StackLayout>
    </GridLayout>
</StackLayout>




export class ItemsComponent implements OnInit {
    items: Item[];
    isVisible = false;
    actionpopup = false;
    consultHead = "";    

    constructor(private itemService: ItemService) { }
    ngOnInit(): void {
        this.items = this.itemService.getItems();  

    }    
    popupbtn() {
                this.isVisible = true;
               }
    popupclose() {
        this.isVisible = false;
    }
}

[manojdcoder]

With 4.x any view could be root of app and anything can be added to root view or without action bar, so do we still need this?

[NickIliev]

Agreed with @manojdcoder - NativeScript 4.x.x provides a new way to create application structure by using Frame so this feature is no longer needed.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.