I know the Internet is overwhelmed with questions about DPI px inches and so on.
But after several hours of googling my situation doesnt seem to happen to anyone else!
I have 2 devices custom build with android studio which are both mdpi.
BUT one device is 3.65inch and the other device is an 10.1 inch.
I have created a folder with 2 images 250x125 with the dpi set to 160 dpi
If normally I would declare my 2 images in my XML with dp units instead of pixels...I would suppose on both screens the result should be the same right ?
Well it seems the images keep remaining the same size and don't look # how many inch the device is
So to set things clear:
What do I have to change at my resources or my code so that my layout scales identical for different Inch sizes ?
This is my GOOD layout for my mdpi 10.1 tablet :
This is my BAD layout for my mdpi 3.65 device
How can I make it so that even on the 3.65 inch screen the buttons will scale to the same PROPORTIONS as the 10.1. Not the inches...not the pixels...the proportions....
This is my XML File
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/buttonEnglish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/english"
android:layout_marginBottom="5sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="2sp"
android:layout_marginTop="0sp" />
<Button
android:id="#+id/buttonNederlands"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/nederlands"
android:layout_marginBottom="5sp"
android:layout_marginLeft="20sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
</LinearLayout>
I'm desperate...
Thanx in advance
This might help explain the problem you are facing...
You have an image that is 250x125 - that is 250 pixels wide by 125 pixels in height.
You have specified 160 dpi - which means that 1 inch = 160 pixels.
So, both screens are doing what you ask and displaying the 250 pixels across 1.5625 inches. On the large screen it looks "proportionally" correct. On the 3.65" screen the button takes up more than half the screen - just like you asked it to.
If you want the smaller screen to look like the larger screen, then you have three options:
adjust the size of the image and provide 2 image assets (or more for a wider variety of screens). This is why you can have resource folders for mdpi, hdpi, xhdpi, etc. You adjust the pixels in the image to accommodate the screen size.
You use a "weighted" LinearLayout that adjusts the size of the space provided based on the available screen space. For this type of layout you should not worry about performance.
Do runtime scaling of the image based on screen size - use DisplayMetrics to get the size and density of the screen and adjust your image to fit the screen appropriately.
The last option is the most flexible in many ways, because if you end up with a screen that is either very large or very small, you can make adjustments to do things like move buttons or text to another place on the screen (above or below other content). But for your specific problem, any of them will suffice.
There is no need of Designing two xml layout.
You can use Dimension for margin and padding according to device.
You are giving static value for margin.
Use dimen.xml in value folder each device.
Following code in your layout.xml will work for you.
android:layout_marginLeft="#dimen/margin_button"
Value folder name for dimen.xml:
values-mdpi
values-hdpi
values-xhdpi
values-xxhdpi
values-sw600dp
create dimen.xml in each values folder.
and in dimen.xml you have to define value for margin in all values folder but value of that property is different according to device size like this:
values-mdpi
<dimen name="margin_button">20dp</dimen>
values-hdpi
<dimen name="margin_button">23dp</dimen>
like wise in all values folders.
Thanx everyone for the answers. Due to answer from #Iacs I discovered that I had to made changes to my folder structure.
I have completely overlooked the fact that in the /res folder there can be more directories then just the standard "layout" directory. You can create other directories with these names : layout-large, layout-xlarge, layout-small, and so on...
In these folders you can paste your layout.xml and adjust the values...
This is how things look now in my android studio
note the layout folder structure:
And now ofcourse my 2 devices with both the same DPI but different screen size are showing my buttons the way I want them to be showned!
Related
I have four dimens.xml files in my values folder and I have different values for different dimens.xml files.
for example, in dimens.xml(hdpi) u_video_width is 306dp and dimens.xml(xhdpi)u_video_width is 404dp.but this values not working, because when i run my app in Nexus S (480X800) hdpi model genymotion
This is what my View looks like:
[![This is what my View looks like][1]][1]
As I said in hdpi dimens folder, I have 302dp but I have different width when I run my app (in XML activity file)
this is a my XML code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#D53362">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true">
<VideoView
android:layout_width="#dimen/u_video_width"
android:layout_height="#dimen/u_video_height"
android:id="#+id/video_view"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
This is a my dimens xml files
Nexus S has 480X800 resolution and i want to my VideoView to have 302dp in hdpi resolution and another resolution--another dpi how I can solve my problem?
To make same dimension appear the same on higher dpi devices android multiply these dimension with a constant ie
for mdpi it is 1x
hdpi 1.5x
xhdpi 2x
xxhdpi 3x
So in your case it is 306 * 1.5 = 459px
reset of the space (14dp ~35 px) is available on both sides of VideoView
Please refer android developer page
At least this is what I understood. Hope it helps you.
As far as I've understood, it seems it's working right. Your screen is 480px wide and your VideoView is 306dp(in a hdpi screen ~453px), and as it's centered, it remains a bit of margin.
If you want the same dp in another resolution, just remove u_video_width from the other files.
I have a Micromax AQ5000 with Screen Resolution- 1280*720 pixels and Motorola Moto G XT1033 with resolution 720 x 1280 pixels.I have a layout folder named layout-sw360dp which I designed for devices like Samsung s4,s3,Micromax canvas etc but this Motorola device is also using the same layout and this creates the images displayed as distorted in it.
How can I create a folder for the small device(Moto g) I tried layout-xhdpi but it doesn't work how can I name layout with height and width.
Well you are right in some sense android should take layout dependent on different densities but some mobile do not fall under specific density. Therefore android will pick up default layout from layout directory.
to support multiple screen resolution provide different layout for different screen sizes, you can make following directories in res directory like this
layout-hdpi
layout-mdpi
layout-xhdpi
layout-xxhdpi
layout-w320dp-h408dp
layout-w480dp-h800dp
layout-w480dp-h854dp
layout-w720dp-h1280dp
layout-w1080dp-h1920dp
when you provide layout in all this directories you will give multiple screen support for different sizes as well
layout-w1440dp-h2560dp
Use "dip" instead they will help you in debugging your layout as they will try to keep a coherent size to multiple screen resolutions,
<ImageView
android:id="#+id/avtar_animation_11"
android:layout_width="45dip"
android:layout_height="45dip"
android:src="#drawable/avtar011"/>
while supporting multiple screen when you give "dp" to dimensions, Actually android expects you to provide different values for different screen resolution. Lets say below is your imagview dimensions make few folders in res folder in your android project like these below
values-hdpi, values-mdpi, values-ldpi, values-xhdpi, values-xxhdpi
and in them make a dimens.xml file each of them and write
<dimen name="image_view_width">28dp</dimen>
<dimen name="image_view_height">28dp</dimen>
now that i have mentioned "dp" here instead of dip android wants me to keep track for different dimensions for different screen resolution, So i will change the image_view_width and image_view_height values are in separate values folders where dimens.xml is located. Make sure your dp values change as per your screen resolution you want your view to fit in.
<ImageView
android:id="#+id/avtar_animation_11"
android:layout_width="#dimen/image_view_width"
android:layout_height="#dimen/image_view_height"
android:src="#drawable/avtar011"/>
hard part is over now android will pick one of dimens.xml values depending on which screen your app is running, Voila now your layout rocks
I'm trying to make application run on each device and I come to a problem of making layouts and drawable folders. So, as I'm understanding ratio dpi is following - mdi:hdpi:xhdpi:xxhdpi - 1:1.5:2:3. DPI stands for dots per inch and this dots are actually presenting "DP" as density pixels which we put into XML attribute like: android:layout_width="150dp". (Please, correct me if I'm mistaking)
Problem occurs that some devices can have let's say 240x320 with xhdpi and there can be device 720x1280 also with xhdpi. Even if i would make separated pictures with already mentioned ratio, I would still need to make separated layouts in which:
layout-small would have something like this for ImageView:
<ImageView
android:id="#+id/slikaPitanja"
android:layout_width="150dp"
android:layout_height="100dp"
android:visibility="gone"
android:layout_below="#+id/sadrzajTekstualnogPitanja"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:contentDescription="Country flag" />
and layout-large where I would have the same code for ImageView except I would have these lines:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
(Actually I could have layouts separated with sw_ _ _dp format).
Is that right to do it like this? Am I missing point somewhere? Something tells me that it's never good to manually determine dps in width and height as I would for layout-small.
Try to NOT use static dpi for your layout, Instead use "wrap_content , fill-parent and gravity". this will make your layout to spread dynamically depending on the screen size
I'm trying to support mdpi, hdpi and xhdpi on my current App. The problem is that I'm fetching images from the web (profile pics). I'm using an imageview with height = 200dp the thing is that even tho I have read tons of tutorials and documentation about dp and dpi, I still don't get them.
So my problem is that on an hdpi phone (atrix 2) the image takes about 1/3 of the screen, which is perfect for me. but on mdpi (galaxy ace) it takes almost 2/3.
What's the best way to set a height for an imageview (from the web, not resources) to support mdpi and hdpi.
thanks
<ImageView
android:id="#+id/expositor_image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_below="#+id/expositor_info_header"
android:layout_centerHorizontal="true"
android:layout_marginTop="-27dp"
android:contentDescription="#string/misc_placeholder"
android:scaleType="centerCrop" />
basically my problem is that the 200dp takes different % of screen on mdpi and hdpi
For starters, you are going to want to set a scaleType (try "center_inside") in your xml definition of the ImageView.
If you provide some code (in particular your layout xml file) I might be able to be of more assistance.
Update
Now, this may not fully be your problem, but it is a piece of it. DP (or DPI, they are the same thing) adjust for the screen density (pixels per inch), not the screen size. That means that an image of 200dp x 200dp will be approximately the same size in inches on both screens, not the same percentage of the screen.
Specs:
Atrix 960 × 540 (https://en.wikipedia.org/wiki/Motorola_Atrix_2#Features)
Galaxy Ace 480 x 320 (https://en.wikipedia.org/wiki/Samsung_Galaxy_Ace)
Since the Atrix is hdpi, and hdpi is a 1.5 multiplier, 200dp will take up 300px in real pixels, or approximately 1/3 (300/960) of the screen as you point out.
On the mdpi Ace, the 200dp translates evenly to 200px, which should be closer to 1/2 the screen. However, with the addition of the actionbar taking up screen real estate, it may seem like more.
The best way to deal with very small screens like the ace... well, my normal solution is to not support them very well, at least not on my first pass, as they are pretty rare. But if you want to, the best way is to provide alternate layouts.
For Example:
Create a folder named layout-large (or similar, see: http://developer.android.com/guide/topics/resources/providing-resources.html#Compatibility).
Make a copy of your existing xml file in that folder. (name must be exactly the same)
Modify the file in layout/ so that it works better on smaller screens.
Essentially, if the device has a "large" screen or above (where large is basically the standard these days), it will use the layout in the layout-large/ folder.
Otherwise, it will use the default layout in the layout/ folder.
If you think this explanation is not what is happening, please provide screen shots to verify that the layout is in fact not behaving like it should.
So, I have googled a lot, but still cant quiet grasp the concept. I have 3 folders : xhdpi, lhdpi and mhdpi. I do understand the conversion and downscaling to different dip and screen densities. Android selects resources for the right screen type when the application runs.
But, how do I start? I made a background for my application in Photoshop. The background was defined in 720x1080px and exported as an .png file. I put the .png in the xhdpi folder. Everything worked out fine on my Sony Xperia Z, but when a friend loaded it on his Galaxy 3 the background was "to-small" and did not fit his screen. I assume this is because the bacground was to small.
But how large do I need to make it? What px-sizes should xhdpi drawable resources be to fit every single xhdpi screen?
Would a good approach be to start with the largest size, xhdpi? And then convert the drawables down to mdpi and ldpi later on? If so, I need a starter size in px so I can create the background for the application in Photoshop.
Here is how I use the background : (Note, i changed my height to fill_parent it fixed the "not filling the whole screen problem")
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_xhdpi" >
</RelativeLayout>
To make PX sizes scale appropriately you will need to scale using the following ratios:
2X for XDPI
1.5X for HDPI
1X for MDPI (baseline
.75X for LDPI
When you are specifying sizes in your code (or XML), use the DP parameter to specify the value (or SP if you are specifying fonts).
for example: android:layout_marginLeft="12dp"
Here is the docs: http://developer.android.com/guide/practices/screens_support.html, you will notice this image, and a lot of other details describing this.
You can find in this table a briefing of different devices screen densities and resolutions; according to it, Galaxy SIII is xhdpi with a resolution of 1280 X 720. Besides, you could want considerate to follow compatibility mode guide to avoid rendering issues in multiple screens.