So I have an Android forms-based app that fills a 7" screen beautifully, portrait only, and there are over 50 forms. Rather than have to redesign each form (or the entire app) to suit each different resolution, my business case solution is to just scale the form to fill the screen. A 10" tablet will look a bit spaced out (but I can add some margins), and on a phone you better have a stylus and good eyesight!
Rather than argue about whether these are good choices, my question is: can it be done? On Windows CE the forms scale with the text size via "dialog box units", which works quite well. Android doesn't have anything like that, unless there are tricky ways of using 'sp' units. Regardless, getting a form to fill a screen nicely on different resolutions looks like hair-pulling-out territory, unless I'm missing something.
In answer to comments, it's a native app defined using XML layouts. For an example, you could take just about any sample app and show how to make it scale to different screen sizes, so you if the screen is small you get tiny text regardless of resolution.
Just to be clear: I don't think this question can be helpfully answered by describing how to use the standard Android way of handling multiple screen sizes: http://developer.android.com/guide/practices/screens_support.html. This is what I don't want to do this time. This really is about how to do other thing -- scaling to fit -- for when you really need it.
I hope I understand your situation well:
If it is a web application (you are using a webview) then use the viewport tag:
<meta name="viewport" content="width=device-width;">
This will fit the page content to the device screen.
Or if it is a native application (also would work for a web application), you can add fill-parent for your layout heigth and width, in your layout XML.
Use this code:
Display display = getWindowManager().getDefaultDisplay();
width = display.getWidth();
height = display.getHeight();
To get the height and width of any Android screen, and with this particular dimension, set the proportion for your layouts.
For example,
RelativeLayout fieldMain = (RelativeLayout)findViewById(R.id.field_layout);
fieldMain.setLayoutParams(new RelativeLayout.LayoutParams((Int)(0.8*width), (int) (0.9*height)));
Related
In my activity, I use DisplayMetrics to dynamically get the pixel height and width of the screen, and then I assign each of the components in the Activity sizes based on those dimensions. I wanted to know how this could be affected by screens that have different densities? Is it a good idea to use pixels?
Edit:
The purpose of using pixels dynamically is so that my layout scales based on the given screen. I just want to know how density will play into this. For example, if I have two screens with a height of 1024px and width of 800px, but one is twice as dense as the other, and I want to use 40% of the height and 40% of the width (this is just hypothetical) for a button, why should the density matter? This will just mean that the size of the button will have more pixels in the higher density screen, but the physical size of the button will be the same as DisplayMetrics will always give me the absolute size in pixels. Or am I wrong about this?
See this question and its answers. You will get the answer to your question.
Edit:
From one of the answers on the mentioned question
If you are any serious about developing an Android app for more than one type of device, you should have read the screens support development document at least once. In addition to that it is always a good thing to know the actual number of active devices that have a particular screen configuration.
Screen Sizes and Densities
To help in your case it is proposed to use dp units instead of pixels, but still there will be differences from one device to another.
On a tablet screen with a high pixel density, the elements probably will occupy less relative space.
If you want to improve it more then you will have to do the dimensions calculation by your own.
Or use a layout that auto distributes the space, for example the LinearLayout
Also you have to take into account that it is the system that decides the size of some widgets, for example the standard buttons
I have read Android guidelines regarding different screen sizes, but still I have some considerations.
Client has given me an image from PSD file which has certain resolution that fits
1080 X 1920. I just use wrap_content, and it perfectly fits the part
of screen.
I am not using DP to define its width-height, If i was using DP it would have
adjusted image according to screen sizes.
My questions are,
Does wrap_content works the same way as Density Pixels?
Is it also responsive, and changes the image width-height according
to different screens?
If not, then Is it necessary to use DP to support different screen
sizes ?
Thanks
The setting wrap_content tells your view to size itself to the dimensions required by its content. In the case of your test, your image is 1080x1920 and your device's screen resolution is likely 1080x1920 as well, hence the perfect fit. Since you set the width and height to wrap_content, Android is simply trying to use as much screen space as it needs to correctly display the amount of content it was supplied. In this case, since the available screen space matches the size of the content, it just fits perfectly.
But what if the device screen isn't 1080x1920? In that case, Android will only use as much space as it can, but still attempt to fit the image inside the bounds of the available screen space. In other words, the system will appropriately scale the image down to get it in the container you have provided for it. But this can lead to awkward fits if the aspect ratio isn't the same as the image. For instance, see this screenshot below:
This image is 1920x1080, but notice that it doesn't quite fit. That's because this nexus 7 screen is 1824x1200 when viewed in landscape. Additionally, the toolbar at the top of the screen is eating up available screenspace, making my viewable area even smaller and more awkwardly shaped. So while the system would love this image to extend all the way to the left and right borders, it can't, because then that would mean the height would be bigger than the viewable space. Since I used wrap_content to display this image, the system is using as much vertical space as it can, and the result is that the image doesn't quite fit the horizontal space.
So to more directly address your questions, yes wrap_content is a relative size setting that will make it easier to get a consistent look across multiple screen sizes, similar to using dp. But realize that there are hundreds, if not thousands of available Android devices on the market, and they all have varying screen sizes and densities. So your drawables may not always appear the way you want them on every device.
The way to overcome this is to supply multiple versions of your assets and provide alternate layout files for different screen sizes and densities. Once you do that, all you can do is test, test, and test some more. Use emulators for weird screen densities or devices you don't own, just to make sure you're getting the look you want. In the case of your 1920x1080 image, it looks great on that one device, but how will it fit a large tablet or a tiny handset that is smaller than the resolution of the image? These are situations you must account for in your design.
I suggest you read these resources, as they are hugely helpful in learning how to deal with issues resulting from varying screen sizes and densities:
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
I have several buttons in my application that are displayed at the bottom of the screen. Right now the buttons have text in them. When running on the emulator, the buttons with text fit nicely. Now, that I am running on the actual device, some buttons' text takes more than two lines and the screen is not very presentable. I could change the font to make it work for the device in question, but there is no guarantee that it will work on some other device. Should I create button images (with text embedded as part of the image) and then have multiple versions, depending on the size of the device screen being used? That seems like a lot of work, is there a simpler solution to this?
Thank You,
Gary
You need to give equal weights to all buttons.So that all of them look similar and occupy same amount of space.
You have to get screen resolution and set sizes as a proportion of this resolution.
Here is the sample code to obtain screen width and height.
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
It is not hard but little bit tricky.
In this purpose you can use built in draw-able folder. In android project there are many draw-able folder like drawable-hdpi, drawable-mdpi, drawable-xhdpi where you can put different size of images and it will automatically render image based on device screen. Check this tutorial for more understanding Supporting Multiple Screens
Or you can take screen size dynamically. Based on the screen size you can set the button height and width.
You can find multiple screen size handling tutorial here:
Supporting Multiple Screens
your emulator may have specific resolution that is different than the one of your actual device.
Currently i'm trying to develop a mobile app for the Android devices (using Appcelerator).
There are alot of Android devices out there with different screen resolutions. So i basically want the app to look the same on every Android device.
So suppose i have a background image in the center of the screen. Which is (in pixels) 550x300.
I just tried to set the width and height of the imageviews to dips (density independent pixels). So in my case to: 332dp x 226dp.
I tested this first on an HTC One X. In there the image in nicely centered and i have a small space left on the left and right side to the edge of the screen.
Then i tested it on a slightly older device, the HTC Desire Z. In there the image width is a little bit more than the actual width of the screen. (example screen. The blue square represents the image)
So that means setting the width and height as dp isn't a good choice either for images.
What would be a good way to set the image width and height so that it looks the same on both phones. i.e., so that they both have a small white spaces on the other edges of the image left (like i have now in the HTC One X)??
Any advice on this matter?
edit
Thanks for the info so far. Some of you posted links to resources etc and made some suggestions. I'll try to work them out in the next few days, so i might take a couple of days before i accept an answer. In the mean time, any ideas suggestions are welcome.
Use the various drawable folders, i.e. drawable, drawable-large, drawable-xlarge to store your image assets for your background in various sizes. Review http://developer.android.com/guide/topics/resources/providing-resources.html for more information.
Also refer to Android: Scale a Drawable or background image? for helpful information.
I would recommend using a size to fit.
in objective c it looks kinda like this... not much of a android programmer but this may help.
CGRect frame = _textView.frame;
frame.size.height = _textView.contentSize.height;
_textView.frame = frame;
so if you could figure a way to get the frame size then you could set your image to that size any way the view is positioned.
and if you dont want it to take up the whole screen and just the sides then there might be a autoresizing function for android this way your image will be flexible with your frame which will vary based on the phone size.
I think the is problem is not that the image is wider, but the screen width of the phone is smaller on the HTC Desire Z.
I think the best way fot the image to look the same on all devices would be to set width/height programmatically.
But I think this doesn't really matter, as you will encounter much more complicated problems further wil developing for multiple devices. Both look good IMO.
What I would is set your android:layout_width to fill_parent and then add a android:layout_marginLeft and android:layout_marginRight in dip. You can also set a margin for the top and bottom, but based on your screenshots that doesn't seem to be an issue.
As a general rule, try to avoid setting fixed heights and widths for your widgets. Here is a great reference for dealing with different screen sizes:
http://developer.android.com/guide/practices/screens_support.html
So i basically want the app to look the same on every Android device.
No you don't. You think you do, but you really don't. That's like trying to fit a photograph in a 4x6, 5x7, and 8x10 frame -- something's gotta give. You have small phones, medium phones, large phones, 7" tablets, 10" tablets -- these are not the same experience and you simply have to allow some leniency to the design to make it work. If you just want a specific amount of space outside of the image, just give your ImageView a specific margin in DP units, e.g.:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dip"
//...
/>
You should be striving to make the experience the same (although different layouts for tablets are highly recommended) but you can't expect it to look identical across all screen sizes and densities.
Edit: also happens with $('body').width() and window.outerWidth
API 2.3.3 HVGA
Before and after rotating device outputs same screen width (320)
API 3.0 WXGA
Width and height toggle each rotation for example
starts with screenWidth:1280 screenheight: 800
I rotate 90
now has screenWidth:800 screenheight: 1280
so what do I do if I want to make certain changes on rotations
according to dimensions and want to target all APIs? I need a value which is the same for all devices.
Edit: For certain things I need pixel values, not percentages. That's why I'm using Javascript to calculate size based on screen width. This would work, since screen width is also pixel values and I can keep things proportional. But if sometimes screen.width gives me the current width, and others not, I can't use it...
-> The thing is I started working with a slider which uses absolute layout and needs pixel values for everything. I don't want to reimplement the slider, so I decided to calculate dynamically the size of the images and the whole layout using screen width. And initialize the slider with these values.
update
Look here is a similar approach to what I'm trying to do:
http://ryangillespie.com/phonegap.php#/phonegap.php?
Entry of June 18, 2011
"One Screen Resolution to Rule Them All"
I tried also with exactly that example, copy pasting it in my code. But it doesn't work either. window.outerWidth has the same problems as I'm describing for screen.width (as well as JQuery $('body').width()). It works as long as the device isn't rotated - it initializes well. But at the first rotation, depending of the device, I get problems. In some it works as expected, in others it interchanges the values, so that I get large width in portrait mode and short in landscape, in others it gives fixed width and height all time, in others it doesn't rotate at all....
Responsive web design techniques. I give a super brief example on my blog along with a book recommendation.
http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html
I use media queries in two of my PhoneGap Apps. No javascript, except in
the case of anomalies.
For example, the "base" css could be for width 320 and portrait,
then using the cascading effect of css :-) add blocks like:
#media screen and (max-width: 480px) and (orientation:portrait) { make stuff bigger}
#media all and (min-width: 800px) { make stuff even bigger }
With queries like these in my link'd css files (and the device/os/phonegap
handling of orientation changes) the new layouts happen auto-magically.
NOTE: I learned all this from reading Simon's blog and the materials he suggested.
Coincidentally I found that this works:
$(window).resize(function() {
updateScaling($('body').width());
});
This is always called and passes correct width. As far as I remember it also works with screen.width
In updateScaling I calculate a scalingFactor and adjust my elements.
I tried out responsive CSS, media queries and so on, but at some point it didn't make sense anymore, because I have anyways to recalculate the margin of slider's UL based on current slide and new width - and other stuff which needs script. So I made everything with script.
I removed window.onorientationchange.
I'm not aware how phonegap presents in information for you, but for a native Android application you typically declare different layouts and image resources for various display densities and screen sizes/widths. See this page for more information: http://developer.android.com/guide/practices/screens_support.html