Android UI problem - android

I'm required to maintain the same Height in Spinner and EditText views, but when moving to a smaller screen and having the width as "fill_parent" or "wrap_content" the view controll increases it's height, so I tried to fix the height with 50dp (and 50dip) but the views just gets cut.
Some pics to illustrate my point
Second http://img218.imageshack.us/img218/6776/screenshot20110527at330.png How it should look (Bigger Screen)
Third http://img171.imageshack.us/img171/6776/screenshot20110527at330.png How it looks when fixed 50dp (Small Screen)
First http://img151.imageshack.us/img151/6776/screenshot20110527at330.png How it looks in with "fill_parent" & "wrap_content" property (smaller screen)

These are from emulator, right? Emulators don't scale well on computer screen. Just use mm and know that the size can never be the same in the real world. You will have to get used to variable size. Reasons - different screen densities reported wrong from Android (phone). Even today you can never make equal sized text on computer screen. So, next time you're asked to make an image X cm size, just laugh and ignore.
It will look OK, yes. But will not be the same size. The most important reason is that phone screen have different pixel densities that are reported wrong to Android and as a result the OS cannot scale properly.
See this thread:
Android: how to draw an ImageView with the same size regardless of device?

Use mm or inch , and will be the same physical size for any device

Related

Android Scaling for Multiple Resolution Screens

I am developing an Android application where the server sends all the values corresponding to dimensions in pixels for 1920*1080 resolution device.I need the app to be supported on multiple screen resolutions.I went through Android documentation on supporting multiple screen resolutions.It suggests to convert pixels to dip and then render.I did that in my application but the views are not rendered as required.So I tried applying simple unitary method by dynamically getting the screen width and height and then scaling all dimensions based on current screen width and height.
Say my current screen width is X and height is Y.So what I did was
Scaling factor in horizontal direction = New Screen Width/1920.
Scaled dimension in horizontal direction = Scaling factor in horizontal direction * Dimension from server in horizontal direction.
Similarly for vertical direction.
The application is now looking fine on my device.But is it a reliable way of doing things ? Should I be dealing with density of display too ?
DP is probably the better approach, if you elaborate a bit on what you mean by 'not rendered as required' I can try to help.
I can think of two main issues with your current method:
Different aspect ratios of devices. Using your method you will end up with distorted imagery. For example a square in 'server dimensions' is 400x400. In a 800x480 phone, that square will be 162x177 - no longer a square. Depending on your visuals and purpose of your app, this may or may not be an issue. If it is an issue, you need to account for that.
Physical views' size. One of the purposes of the DP method is to ensure a view will have (almost ) the same size across different devices, mainly never too small to handle for the user. So using the DP approach, a 100dp button will be 200px on a high density device, and 100px on a medium density device. This way the button is physically the same size on both devices.
But your method ignores that. Take the square from the first example - it will always be a fifth (400/1920) of the width of the screen. This can be either huge or tiny, depending on the device dimensions. Again, depending on your needs this may or may not be a problem.
Your method can work, as long as you account for these (and maybe more) problems. But it does require special care and probably more coding and work to make it work perfectly compared to simply using DP.

android sdk. Background image fits. Foreground images too small

I have my view built to fit a phone screen 800x480. The background PNG shows up as a perfect fit. I have a bunch of imageViews of PNGs sitting on the view that should line up perfectly on any screen that is that size.
When tested on my phone, it works fine. However, when tested on my 7" tablet that has the same screen resolution, the backdrop fits as expected, but the imageViews are all too small.
Why wouldn't they fit the same way, considering the resolution is the same?
Could it be the aspect ratio of the second screen?
I know that when I developed an app on my Note I, it showed up differently on almost every other device with the same resolution, on account of the aspect ratio of the Note I being so wide.
Can you check and see the actual pixel ratio of your second device?
Also, is it showing the on screen action bar thing? The back/menu/etc bit? Because that could be because of the version you're targeting is less than the version of your 7" device, causing it to run in backwards compatibility mode. That'll squish your layout a bit as well.
I have a partial answer to this.
I couldn't find a way to set the size of the PNG itself. Only the ImageView height and width. So I set those to 90dp. I tried px first. Don't do that. It's no good.
But, check this out... Forcing the size in dp made the images show correctly on the tablet, but enormous on the phone! So, it more or less reversed my problem.
But at least I know what the problem is now. I just have to create a secondary view for 7" screens to set the imageView sizes. Or, I'm thinking there must be a way to do this problematically. Before the view launches, detect the screen size, if it's not a phone, change the height and width accordingly.
That should work because, as I mentioned in an earlier comment, the relative positioning is perfect. It's just the size that's incorrect.

Size images properly for mobile devices

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.

I'm using dp for my buttons ,graphics, and layouts. Buttons in the wrong place

Is the Eclipse graphical layout editor consistent with actual phone realities? I only own a droid x and have nothing to test say a "2.7 in QVGA: setting with.
I have a button I want to show up in a specific place on the phone. I use the buttons properties to set a specific layout height and layout width and specific layout margin left and top using dp units , however when I change phone sizes in the emulator the buttons are the wrong size and wrong place on a lot of them. The buttons work and are laid out correctly on the screen for the "4in WVGA (Nexus S)" and they work great on my droid X. But when I change the emulator to "2.7in QVGA" the button has moved way down the screen. Doesn't dp mean that the buttons will remain proportionate to the screen size?
Ps I have placed appropriate DPI'd images into their respective Res Drawable folders ie: drawable-hdpi and drawable-ldpi , etc.
I thought maybe i could use weight, but I have never used that before and maybe I am just missing something stupid. Any help would greatly be appreciated.
The size and position, relative to the topleft corner should be the same on each device. But, there are some devices which have a different resolution in height and width, which means that you will have more or less pixels in width/height on different devices, although they might share the same density. For example there are devices which have 800px in height, and some which have 854px, but they have both hdpi-density, so you will have the same margin to the topleft corner on both devices, but a different to the bottomright corner for example.

How do I get around clipping issues with my app in smaller phones?

I have a basic linear layout, with image view that display photos, textviews that show text etc...and when I test my whole app on my android 2, there is never any part of the screen that doesn't show. But when I test it in the QVGA emulator, half the view is off the screen. Now, some of my text is defined to a certain size.
I never use px (only dip) in any of my xml. I use fill_parent, wrap_content where it is needed and never fix a height or length. Could it be with my text, I use say, textSize = 22dip? I couldn't find documentation on why that would not work in all sizes.
Could it be that some apps need to be programmed to those screen sizes? Or am I missing something?
Thanks!
DIP actually doesn't help in fluid layout design. DIP tries to make sure things will looks the same size across different screen density. (imagine the concept of Point in typography)
Without your code and/or screenshot of what happen, it is hard to judge what happens to your program, but 22dip text size is possibly one of the reason which:
22dip text in HDPI will become: 22 * 240 / 160 = 33 pixel
22dip text in LDPI will become: 22 * 120 / 160 = 16.5 pixel
If your setting on QVGA is HDPI, then it is actually 33 pixel tall for a letter, which consumes more than 1/10 of the screen height.
By the way, your 16:9 wide screen (vertical) may fit everything in one screen without scroll, while QVGA is only 3:2 screen, even though everything is in proportion, something would be hidden away for sure.

Categories

Resources