The Challenge
I'm having trouble arranging images in a grid format with 2 rows and 2 columns, centering them evenly.
Despite my efforts to experiment with different layouts, I've encountered some setbacks as shown below:
https://i.sstatic.net/fy8iS.png
https://i.sstatic.net/AeyWK.png
My Desired Design
https://i.sstatic.net/V9Uz7.png
Sample XML Code
<Page loaded="pageLoaded" class="page"
xmlns="http://www.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="Signup"></Label>
</ActionBar>
<DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
stretchLastChild="false">
<Button class="submitButton h2 border" text="Next" height="60" dock="bottom"
tap="onSignupButtonTap" returnKeyType="next"/>
<StackLayout dock="top" width="100%" height="75" >
<Image class="" src="~/images/signup/step-1-on.png" stretch="fill" />
<Image style="margin-top: 15" src="~/images/signup/progress.png" stretch="fill" />
</StackLayout>
<WrapLayout orientation="horizontal" width="210" height="210" backgroundColor="lightgray">
<Label text="Label 1" width="70" height="70" backgroundColor="red"/>
<Label text="Label 2" width="70" height="70" backgroundColor="green"/>
<Label text="Label 3" width="70" height="70" backgroundColor="blue"/>
<Label text="Label 4" width="70" height="70" backgroundColor="yellow"/>
</WrapLayout>
</DockLayout>
</Page>
If anyone can assist me with achieving this layout, I would greatly appreciate it. It seems simple, but I'm struggling with it.
Thank you in advance.