Issue with NativeScript Screen Layout
I have been attempting to design a screen in NativeScript, but I am encountering some complications. Initially, I aimed to replicate the following screen:
https://i.sstatic.net/tfa7w.png
Despite following the recommendations and closely adhering to the documentation, I was unable to achieve the desired outcome. Instead, this is the screen I ended up with:
https://i.sstatic.net/eePwB.png
As you can see, the discrepancy is quite significant. Here is the XML code I used:
<Page
navigatingTo="onNavigatingTo"
xmlns="http://schemas.nativescript.org/tns.xsd">
<ActionBar class="action-bar customActionBar">
<NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"></NavigationButton>
<ActionItem icon="res://navigation/menu"
android:visibility="collapsed"
tap="onDrawerButtonTap"
ios.position="left">
</ActionItem>
<Label class="action-bar-title" text="Settings"></Label>
</ActionBar>
<GridLayout columns="2*, auto, auto" rows="75, auto, auto" width="100%" height="100%" backgroundColor="lightgray" >
<Label text="Notifications" row="0" col="0"/>
<Label text="Push" row="0" col="1" />
<Label text="Email" row="0" col="2" />
<Label text="Messages" row="1" col="0"/>
<Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="1"></Switch>
<Switch checked="true" (checkedChange)="onCheckedChange($event)" class="m-15" row="1" col="2"></Switch>
</GridLayout>
</Page>
After adjusting various parameters, the layout still fails to meet the desired specifications. It is evident that I am missing something crucial in my implementation. Any assistance or guidance you can provide would be greatly appreciated.
Thank you in advance.
Regards, John