how to make a overlay screen in Nativescript

Question

I'm trying to design an overlay screen in Nativescript.

I need a half-transparent screen with full transparency that shows what the user needs to do. Is there any default plugin available or layouts?

Hi. Kindly share what you have done so far. – Vishaal Shankar Mar 22 '18 at 10:30 — Vishaal Shankar, Mar 22 '18 at 10:30

score 3 · Answer 1 · answered Mar 22 '18 at 16:09

<GridLayout>
    <Label text="Play with NativeScript!"></Label>
    <Label class="overlay" text="I'm an overlay" verticalAlignment="center"></Label>
</GridLayout>

By default everything in GridLayout is placed in the first row in the first column unless you define otherwise. If you define two views in the same column and row, the lowest view will be stacked in front of the previous one.

You can of course use any layouts inside and use things such as colSpan or rowSpan.

<GridLayout columns="*" rows="*">
    <StackLayout col="0" row="0">
        <Label text="Play with NativeScript!"></Label>
    </StackLayout>
    <StackLayout col="0" row="0" class="overlay" >
        <Label text="I'm an overlay"></Label>
    </StackLayout>
</GridLayout>

score 3 · Answer 2 · answered Aug 06 '19 at 11:59

3

You can use this nativescript example template for use overlay screen. https://play.nativescript.org/?template=play-js&id=7wQ8EL&v=5 This template is already have a half screen overlay with full transparent.

answered Aug 06 '19 at 11:59

FrontEnd-er

661
4
13

nice. .. example but.. when try to view on preview.. it crash.. also if download de project.. and make npm install it also crash.... – Jesus Carrasco Aug 21 '20 at 22:26

score 0 · Answer 3 · answered Mar 22 '18 at 10:19

0

    <StackLayout class="content-wrapper">
        <router-outlet></router-outlet>
    </StackLayout>

    <StackLayout class="custom-dialog">
        <Label text="Loading..." textWrap="true"></Label>
    </StackLayout>

</AbsoluteLayout>

answered Mar 22 '18 at 10:19

Siddharth panchal

81
2
13

Use this link... https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view#isuserinteractionenabledproperty – Siddharth panchal Mar 22 '18 at 10:20

score 0 · Answer 4 · answered Aug 05 '19 at 05:57

You can use this to display overlay. Fill the content with your loading and set opacity if needed. In case you need to hide ActionBar, just set height to "0" using ContextBinding and Observables.

 <AbsoluteLayout width="100%" height="100%" backgroundColor="yellow" opacity="0.9" style="z-index: 99999; margin-top: -10%;">
    <Label text="10, 10" left="10" top="10" width="90" height="90" backgroundColor="red"/>

</AbsoluteLayout>
<AbsoluteLayout width="100%" height="10%" backgroundColor="yellow" opacity="0.9" style="z-index: 99999; margin-top: 100%;">

</AbsoluteLayout>

how to make a overlay screen in Nativescript

4 Answers4