In the app I am working on, there is inconsistency between what is displayed in the Android Studio UI builder and the 2 phones I tested it on (A nexus 6p and an Xperia XZ Premium. They both have the same aspect ratio, with the 6p being 2560x1440 and XZ being 3840x2160 but scaled down to 1920x1080 during normal use if I understand correctly)
For instance: I have 3 buttons with a static width in dp at the top of the screen in a constraintlayout, and in the UI builder they go from one end of the screen to the other, each constrained to the left and evenly spaced. In the builder and on the 6p, it displays properly. However, on the XZ, it is but off.
After further testing, it seems the XZ always cuts off around 25dp on the right and bottom when the layout contains objects with set widths and lengths that cross into those missing 25dp. How do I fix this? The 6p displays everything just fine
Try using auto layout constraints to help adjust the dimensions. Something you should consider for the future is that you need move fragments, that will insure consistent UI over many versions of android phones and tablets currently in the market.
Android layout view can help you do all that.
Right click not the textfield/button that you want to set to a specific constraint and let the magic happen.
Related
We are working on an app that mainly uses either Framelayouts or Linearlayouts.
In our app, we provide 5 different folders with drawables, from mdpi to xxxhdpi.
Working with weights or DisplayDimensions made our app look the exact same on basically every smartphone device.
Every smartphone device, but one. The Samsung S8.
The problem is as seen below:
This is the main menu on almost any other device (S3, S4, S5, S6 -Edge, S7 - Edge)
This right here, is a screenshot of the mainmenu on the S8:
.
Removing the bottom buttons and displaying the app in fullscreen makes this even worse!
So what is going on here?
Simple - the S8 uses the same width (1440px) as the S7 for instance, but yet its screen is higher. Increasing the screen height without the width changes the aspect ratio.
While most smartphones use a ratio of 16:9, the S8 is somewhere at 20.5:9 I believe. Ergo: The screen DO NOT look the way they are supposed to.
Now theres gotta be a solution to that, which won't have us redisign almost every activity to ALSO fit the s8.
What optins are there?
Is there maybe an option in VISUAL STUDIO, to "lock" the aspect ratio to 16:9 and display maybe a black bar on top instead of streching the layout?
I hope you guys can help us! That'd be great!
Thank you!
Btw: I noticed that the apps that we made in unity which are usually games DO look the same. There the aspect ratio is maintained and a black bar is shown on the sides. This I hope, is possible for Visual Studio?
I have found a workaround, that is pretty easy.
if (Resources.DisplayMetrics.HeightPixels >= 2560)
{
intHeightOfDisplay = 2560;
}
else
{
intHeightOfDisplay = Resources.DisplayMetrics.HeightPixels;
}
Basically saying, that if the height of the display is heigher than "most phones" I just set it to the maximum height of my app. This works pretty much everywhere.
My most resend project involves a Samsung Tab A 9.7" with 1024x768 pixels in a 4:3 format. This tablet is quite new and this format is unfortionatelly not supported by Android Studio so I've tried adding a new virtual device with these resolutions. I've set the scale option to: '1dp on device = 1px on screen'
The thing that seems wrong, is there is a difference between dp and px. If, for example, the width of a view is set to 1024px, it lines up nicely with the borders of the screen. But if I set it to 1024dp, it is much smaller... 1dp=1px means it is supposed to be the same, right?
When I launch it on the tab, all content gets wrong sizes etc (due to the problem above ofc).
Is there a way to propper add a 4:3 resolition so it can be used in the layout editor? I know there is a difference between px and dp but 1/1 is supposed to be the same?
Thanks a lot,
Jesse
After a long mixture between research and trail and error, finally 'found' the cause. When adding a virtual device in android studio for a custom resolution, it automatically focuses on portrait mode I think. Putting a view till the middle in portrait mode inside the editor -> In the middle in landscape on the tablet. Not sure if this is mend to be or an error of some kind.
Found out you can use the Nexus 9 layout, also 4:3 (2048 x 1538).
Thanks for the support Nanoc
I have an idea for an application for Android. I have a decent background in Android but I have never encountered a problem like the one I am currently facing.
Background
I am creating an overlay activity on top of WhatsApp. When you launch WhatsApp a red circle shows on the overlay activity and it needs to be entered exactly above the "new chat" button in the latest version of WhatsApp (Android Lollipop).
This is easy when positioning with DP on a specific device but this circle will not be in the correct location if I test the app on my LG G3.
The obvious answer is that I would create a xxhdpi layout too, but the problem is that this circle needs to be dynamic, so if I want it to be above the search button, it needs to be there.
Question in a sentence
My question is based on margins in DP on a specific device, how can I make sure the circle appears in the exact same position on all other devices that have the same version of WhatsApp?
Example: On Note 3 (1080p, 388 PPI) margin right is 30dp, How do I use the resolution knowledge and DPI knowledge to make the circle appear in the same place on my LG G3 (1440p, 538 PPI)
What I have tried
Firstly the dumb approach at positioning it correctly on phone one with dp and running on phone two (Failed)
Second I tried positioning according the width of screen in pixels times a percent (I.E. screen_width * 0.75) so the circle will appear always at position x 75% of the screen (Failed due to screen density? 1)
Thirdly I tried the same approach as my second attempt but instead of raw pixels I used the total screen DP and used that as my relative measure (I.E. screen_width_dp * 0.75) so the circle will appear always at position x 75% in dp of the screen. (Failed 2)
Notes
In all tests I made sure that the units I am working with are correct, for example if I had screen_width_dp x 0.75 I made sure to convert the DP into PX before setting the margins.
1 - Why would this fail? using screen resolution ratios.
2 - Why did this try fail as well?
This was tested on Note 3 (1080p, 388 PPI) as base phone, and LG G3 (1440p, 538 PPI) as secondary phone that the circle should move relatively to be placed correctly on.
Thanks!
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.
I've small problem - I've and app (home screen widget) for android ICS and higher. But different phones with different OS version (4.0.4, 4.1.2, 4.2, etc) and also different brands (Samsung, HTC, LG, ...) makes my app look diferent.
Ok, it doesn't happens always, but on some phones just Android adds automatic margins to my own - and on some not!!! How is this possible, and how to avoid this? Looks like every brand does it in their own way - which is fine for them, but bad for me :)
EDIT:
I use dp, not px. The main problem is not in dp/px nor in portrait/landscape changes. Main problem is, that for example on phone1 my widget has NO margins (it's like sticked to screen borders) and on other phones it has automatic margins like it should. When I add my own margin to widget provider, it has this margins on phone 1, but on other phones it has (my margins + automatic margins). Hope, now it's clear :)
Welcome to Reality show, when the Android it isn't platform independent, either Java it isn't.
For this reason a single android layout.xml should use elements which are doing layout acceptable in all targeted devices. The screen ratio differs, the dpi differs the resolution differs... As best practice:
use dp size instead of pixels
do different layout for portait and landscape case
have multiple folders based on screen size ( and different layout)
I hope it helps!
well, to close this answer - it looks like there is really no option to have same margin on all devices - as different devices uses different home screen implementation. I can't do anything with that...Closed.