How to support multiple screen sizes in your NativeScript app(typescript and angluar)?


#1

thanks for your attention.

I have another problem.
As I mentioned to developing nativescript app using typescript and angluar2.0.
I’m going to compose various template files for multiple screen sizes.
For example…

login.html
login.minWH320.html
login.minWH480.html
login.minWH600.html
login.minWH720.html

////login.component.ts
@Component({
selector: “my-app”,
providers:[UserService],
templateUrl:“pages/login/login.html” ,
styleUrls:[“pages/login/login-common.css”, “pages/login/login.css”]
})

is this right?

unfortunately, I don’t have android tablet and I use genymotion and phone.
I want to make different UI between tablet and smartphone.
Please let me know how can I impelement for that and how can I test?


#2

this is an excellent question! @NathanaelA we’ve seen this on the forums, can you weigh in please?


#3

Please note; I pretty much only develop for PAN (Plain Awesome NativeScript), not NG2 (Angular) – but the concepts should work.

Well the way I do it is two fold; depending on what is needed I may only use one template the main login.xml file if the look is just going to scale up to the device, or I use two files, the plain login.xml (phones) and login.minWH600.xml (tablets) on the screens where the look is going to be different on a tablet vs phone.

The way I make it scale properly is I use CSS and a couple plugins;
First is a open source; nativescript-platform-css - This allows me to have css that is like this:
.ios, .android, .ios320 .ios360, .android600 and the different standard sizes all the way from 320 to 1024. This allows me to tweak thinks for certain displays in my CSS file.

The second plugin I use is commercial nativescript-scaledFonts - this plugin takes care of scaling the fonts for the display. It offers several choice; a single scaling range or two scaling ranges (phone & tablet). This allows you when you set your font to be 14 point on a 360 wide screen it will automatically scale to 12.5 on a 320 wide screen and 26 on a 600 wide screen. I don’t have to maintain any “extra” font size css for all the different sizes of screens, this helps eliminate one of the places where I was having to maintain a LOT of different css… You can just use the first plugin and put in a font size for every single element for every single size display; but for me personally; that is way too much work.

My testing I typically start with a standard sized phone on Geny, then after I have everything looking great and running great on it; I switch to a couple other size phones, then a couple different sizes tablet, so my Geny has 6+ images. Typically those images also are Android 4.4.4, 5, 6 and soon 7. This allows me to make sure the app looks good on all the major Android platforms. After I have it working really well on android I move over to iOS and do the same things. Typically after making the app look good on android there is only a couple .ios overrides and I’m done.


#4

thanks for your detailed description.

I want to change layout as well as css.
So I’m going to load another html between tablet and smartphone.
for example
dashboard.html - use smartphone.
dashboard.minWH600.html - use tablet.
… …

The layouts of two htmls is different each other.

And I use .html(typescript and angluar), not .xml

////login.component.ts
@Component({
selector: “my-app”,
templateUrl:“pages/dashboard/dashboard.html” ,
styleUrls:[“pages/dashboard/dashboard-common.css”, “pages/dashboard/dashboard.css”]
})

login page directory structure.

  • dashboard.component.css
  • dashboard.html
  • dashboard.minWH320.html
  • dashboard.minWH480.html
  • dashboard.minWH600.html
  • dashboard.minWH700.html
  • dashboard.android.css
  • dashboard.ios.css
  • dashboard-common.css

How can I implement it and How can I test in genymotion?

In genymotion, detailed virtual device name and dp?
tablet = ??? (in genymotion)
smartphone = ??? (in genymotion)

I look forward to your answer.

Thanks for your attention.


#5

You can easily test it via geny just by downloading and choosing a couple different Geny images; I would choose a couple different phones and tablets images; then you just run the image you are testing it on. So right now I might start up a Geny “4.4.4 Phone image (1080x1920)” and then test my app on that until everything looks good. Then I switch to the “6.0.0 Tablet Image (2560x1600)” and test on that. Then I will test on the next size. Once I have it looking good, I RETEST on the first image to make sure I didn’t mess anything up with my other changes (rare but happens). Then when that is all done, I switch to iOS and do the same things.

Nathanael A.


#6

thanks

Is it right my code?
I cannot confirm my code.

Please let me know the possibility.


#7

hello.

Thanks for your detailed description.

I can use nativescript-platform-css plugin in native-angluar project?

How can I use?
Please let me know the way.

regards.


#8

To be honest, I have no idea if it will work in a NG2 app; I much prefer PAN, so all my plugins are designed for PAN. I do know most of them work easily in NG2, but I am sorry I can not tell you which ones do.


#9

Just a quick fyi, we can use emoji :nng: and :nativescript: here, just like in Slack, you’re welcome :smiley:


#10

HI,
I tried to fallow the same structure to support different screen sizes, it is not working with the following structure .

How to support multiple screen sizes in your NativeScript app(typescript and angluar)?
As I mentioned to developing nativescript app using typescript and angluar2.0.
I’m going to compose various template files for multiple screen sizes.
For example…

login.html
login.minWH320.html
login.minWH480.html
login.minWH600.html
login.minWH720.html

////login.component.ts
@Component({
selector: “my-app”,
providers:[UserService],
templateUrl:“pages/login/login.html” ,
styleUrls:[“pages/login/login-common.css”, “pages/login/login.css”]
})


#11

Just wondering if the support for this added in nativescript 4?

supporting different screen sizes through html files like its done through xml files in nativescript core.


#12

It’s not planned to be implemented in Angular, at least in recent future due to Angular’s architecture.

But its possible and more efficient to do this with a custom directive in Angular. Checkout the Github issue to know how. If you want to just update styles not layouts based on device, then nativescript-platform-css would be right fit.


#13

Thank you, I’ll check that github issue, I’m not sure if I can do through styles.


#14

Just came across this thread, so I’ll input my two cents.

I find the simplest way of supporting multiple screen sizes is to simply include a ternary operation as the templateUrl argument. I’ve got mine set up as follows:

import * as Platform from "platform";

// Get the smallest screen width
const minSize = Math.min(Platform.screen.mainScreen.heightDIPs, Platform.screen.mainScreen.widthDIPs);

@Component({
     // Other stuff...
     templateUrl: (minSize > 250 ? myView.handheld.xml : myView.wearable.xml)
})

Not the most elegant solution (especially if you’re going to be dealing with a lot of different templates) but it works in a pinch.


#15

Can you confirm if this works with Webpack + AOT compilation?


#16

Does nativescript-platform-css work with webpack ?


#17

It should, it does of course!