In my libgdx game I need to display a row with 8 to 14 round buttons.
I'm looking for the best way to make sure all buttons are at least the size of a fingertip (between 0.8 and 1 mm) but not much larger, because I want them to fit into the screen without scrolling if it is possible.
I've found several possible solutions, but I really don't know which is the best, or if I'm missing something better:
Use an ExtendViewport, with virtual size 480x360 for example, and find a suitable size for the buttons. This is the easiest to implement, but the result varies depending on the screen density, size and aspect ratio.
Use a StretchViewport, fix only the width of the buttons, and calculate their height at runtime using the device aspect ratio in order to keep them round. This also depends on the screen density and size, but not on the aspect ratio.
Use the device density and physical size to calculate at runtime the size of the buttons. This seems a better approach to get the buttons at the right size, but is much more complex and low-level, so I find it strange that there isn't simpler ways to do this.
So, which do you think is the way to go?
Joanq, use your (slightly modified) suggestion 2 to cover the most types of screens: Use a StretchViewport, fix only width of the buttons (as a percentage of Gdx.graphics.getWidth()), and calculate their height at runtime using the device aspect ratio in order to keep them round.
Related
Ok I know that there are already many questions that ask the same thing as what I am asking, however the problem is that none of those solutions have worked for me or are what I want. My problem is that when I use the setTextSize method of the Paint class, the text appears to be too big on smaller screens, and smaller on bigger screens. What I want is for me to be able to change it to the size I want on my device, and then on any other device the size should change accordingly (scale down, scale up) and it should appear the same way (NOT the same size) on other devices. And I have already tried multiplying the density by the dp I want and all that other stuff but it doesn't work.
First off, any size you use should be based off of sp- scaled pixels. Units in sp scale with respect to the user defined default size. This is to people who are hard of seeing can choose a larger text size, and all text will scale relative to this choice. You should not be designing text in either dp or in px, as neither of those will scale with the system font size. When you call getTextSize/setTextSize it should be treated as sp.
As for it looking the exact same on all screens- you're not going to get that, because different OEMs use different default heights and different default fonts, not to mention the user can override either of those. Pixel perfect should not be your goal. Which is good, because it isn't actually possible.
I am making a game ,having static gameplay(i.e fixed background).
I want to target devices having aspect ratio in range 1.33(800x600) to 1.77(854x480).
For my playArea i want a fixed aspect ratio.
For my HUD i want fixed position relative to Scrren Size
and i am using stages to implement HUD,gameplay area.
Note Here World Size refers to virtual size (as mentioned by Springrbua)
First Question- is that possible to target wide range of screens with constant worldsize or setting some ViewPort-(Stretch,Fill etc) ?
Second Question - what should be the world size in pixel so that i can create graphics acc to it?
Third Question - what should be viewport for HUD,Gameplay ?
My Experience...
I started a game with WorldSize (855 x 600) and Fill ViewPort for gamePlay and StretchViewPort for HUD.For gameplay so far is good , but i am facing many problems with HUD.Position of hud elements never reamain same whatever i do(fixed position irrespective of screenSize).
Last One - Is creating background of resolution 855x600 is right thing to do?
Plz suggests better alternative ,approach or what i am doing wrong.
Thanks in Advance.
sry for my bad english.
First of all: the world size is not the same as the viewport size (or virtual size in the text below):
Worldsize: Size of the level
Virtual size: Size of the levelpart/worldpart you can see on screen
Usually you can only see a part of the level and a Camera moves arround to show different parts.
If the whole level is shown on the screen at once, the worldsize and the virtual size are the same.
To keep everything as simple as possible, they should use the same units (for example meters).
With libgdx it is not only possible to have a fixed virtual size, but it is also pretty easy.
As you allready noticed, there are the Viewport classes, some of them support a virtual size to.
The Viewport you should use for your gameplay area is the FitViewport, which supports virtual size and keeps the aspect ration by showing black borders (for example a 16:9 aspect ration on a 16/10 screen will result in black borders on the top and on the bottom of the screen).
For the HUD you can use another Viewport, i guess StretchViewport is okay. It also supports virtual sizes, but instead of keeping the aspect ratio it stretches the things (for example the elements of a 16:9 virtual aspect ratio on a 16/10 screen will be stretched up and down) to fill the screen.
The virtual size you want to choose depends on the game. Just think about it this way:
What entities are there on screen? For example Humans.
How big are they in real life? Humans are about 1.75m tall.
How big do i want them to be on screen? A Human should be about 1/10 of the screen.
Okay, now you have 1.75m should be 1/10 screenheight. Therefore the Screensize is 1.75*10=17.5.
To have it a bit simpler, lets guess we have a bit taller (1.8m) humans and so our virtual height is now 18.
Now think about the Aspect ratio, i want a 16/9 aspekt ratio, which means, that 16/9 = width/*18*
Our virtual width is 32.
Now we have a virtual size of 32*18m. The bigest advantage: Everything can now be calculated in meters. If you want to move the human by 1m, just add 1 to its position.
As i allready said the Viewports can be FitViewport for the game, as you want to keep the aspect ratio and for the HUD i guess StretchViewport would be fine, but you can try out different ones and choose your preffered.
Hope it helps.
I have a FrameLayout that is used to display a camera feed for scanning with ZBar.
I would like it to take up a large proportion of every screen the app runs on. A hardcoded 275dp square looks great on the latest phones but pushed stuff off when for smaller screens.
I am planning on hardcoding a 175dp square and then in code making it grow based on the dimensions of the phones screen.
I'll probably do a switch on various screen sizes and then decide what to resize the frame to.
Is this a good approach?
How would I go about doing this in XML?
A LinearLayout with layout_weight specified for height/width will allow you to simulate a percentage based layout, otherwise you can use fill_parent when you want to use the whole screen width/height.
You can make one xml layout file for ldpi, mdpi and hdpi(xhdpi and tvdpi if you want to) and literally set different xmls according to the screensize. With this you will be able to fit most screens without a problem, but it is not as accurate as percentage. But remember that not all android devices has the usual 16:9 or 16:10(8:5) and therefore percentage may make the square a bit different from screen to screen.
You can make your own layout qualifyers, but the standard ones are in most cases more then enough.
You should also consider makeing only the frame layout in java, and the rest of the layout in xml.
Is it a bad habit to get the width and hight of the device and set images/button sizes programmatically accordingly.
I find it inaccurate to use different folders for layouts and densities as it gives me wierd results on some devices (on top of the inacurancies)
Your experience is appreciated.
Thank you
Yes it is very wired thing to make the layout for the all supported screen of android. And there are lots of screen resolution available in market.
Once i have made a Demo and it Works for me. I have made one Button which height and Width is same. Now i have set its required height and width as per the one Screen in which it is looking perfect.
After that i have calculated the pixel that it required to make it Possible in that screen and based on that i have applied it to all screen.
Now it works great in all device with any density and resolution.
So if there is any view that generate at run time and you want to set its height and width then the best way is to calculate its height-width ratio and use it.
hope it will helps you.
Enjoy Coding. . . .
:)
Well, most of cases you will have layouts which are, or will become, complex, and it will be difficult to calculate the positions programmatically.
And it will be also a disadvantage mantaining it, because you will not be able to use the interface stuff (grafic layout and so on), and other people, or yourself, will not understand the calculations the same way they would if they see the views in XML. Reorganizing, changing somewhere a position could be painful.
You also will be working frequently with bitmaps, which have a fixed size, if you calculate the dimensions programmatically and stretch they will not look good. At least you would need different set of bitmaps and load accordingly.
It helps if you for example use relative layouts with rules (like above of / align at the bottom of the parent, etc), linear layouts with weights, and dip (density independent pixels). You should do programmatic layout only when it's not possible in other way. Or in some certain cases where it really-really makes things easier.
I've been trying to get a universal layout working on Android with no success. My understanding is that if you specify all widgets in dp, and make it look right in one screen size, it should scale properly to other resolutions, but my results look kinda wrong to me.
I layed out everything in HVGA using a relative layout. The relative layout has a background that our UI designer used to define element boundaries. In this layout, everything looks perfect.
Then I switch to a larger screen with a slightly different aspect ratios, the background scales properly but everything else looks off by some dp. My question is, what is the golden way to make all the elements scale correctly with screen. I want to preserve the ratios of all the elements with respect to the background.
Thanks!
Edit: figured out how to do this. The reason for inconsistency between buttons and background is that background is scaled differently from dp, and devices apparently have different dps. The solution is to manually compute the scale factor from absolute pixels then scale everything manually by that factor. Here is a good reference how to do this:
Scale Android for different screens
dp scales itself in such a manner so that the size of any widget remains constant on different screens having different resolution.
In your case, the size of list-view remains constant but the background stretched to the screen width. To avoid this, use first colour as background of first list-view and same as for second list-view.