CODEWITHSUNDEEP
angularnativescriptscale
user1261710
user1261710

Reputation: 2639

NativeScript - layout and formatting strategy across multiple devices

I’m writing an app with NativeScript 6 and Angular 8.

The app is supposed to work on both Android and on iOS as well as a variety of different screen sizes and dimensions.

I want the general look and feel of the pages in the app and the layouts to remain the same across the different devices. Essentially, I want the layouts to scale.

I made a nice layout for a page in my app with the NativeScript layout system and with css. However, I had the button widths hard-coded in pixels and when I switched to another device the buttons did not scale.

E.g.

Template

<FlexboxLayout class="authentication_page_main_container">

    <Image src="~/images/PHOTO.png" height=“450” width=“450”></Image>

    <FlexboxLayout class="button-footer">
        <Button text="Not Registered?" (tap)="onSignUp()" class="btn-red-rounded"></Button>
        <Button text="Log In" (tap)="onLogin()" class="btn-red-rounded"></Button>
    </FlexboxLayout>

</FlexboxLayout>

Css

.authentication_page {
    background-color: $dark_navy_blue;
    color: $white;
    padding: 30px;
}

.authentication_page_main_container {
    @extend .authentication_page;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.btn-red-rounded {
    @extend .btn-red;
    border-radius: 50%;
    width: 200;
}

How can I make sure the app screens scale with the different devices?

enter image description here

Upvotes: 0

Views: 198

Answers (1)

Yong
Yong

Reputation: 1127

GridLayout can be used for scaling.

<GridLayout rows="* auto">
    <Image row="0" src="~/images/PHOTO.png"></Image>

    <GridLayout row="1" columns="* *" paddingTop="20" paddingBottom="20">
    <Button col="0" text="Not Registered?" class="btn-red-rounded" marginLeft="10" marginRight="10"></Button>
    <Button col="1" text="Log In" class="btn-red-rounded" marginLeft="10" marginRight="10"></Button>
    </GridLayout>
</GridLayout>

.btn-red-rounded {
    @extend .btn-red;
    border-radius: 50%;
}

Upvotes: 1

Related Questions