First of all, I want to apologize in advance since I'm sure that this kind of question has been asked before, but even though I was looking for about 2 weeks at those questions I could not figure out what I'm doing wrong.
This is where I load the image in the activity:
ImageView image = (ImageView) findViewById(R.id.shop_Image) ;
image.setScaleType(ImageView.ScaleType.CENTER_CROP) ;
String mDrawableName = data.vec.elementAt(id).fuenf ;
if ( mDrawableName.equals("leer") )
mDrawableName = "ic_launcher" ;
int resID = getResources().getIdentifier(mDrawableName , "drawable", etPackageName());
image.setImageResource(resID) ;
And this is the xml-file:
<LinearLayout
android:id="#+id/shop_Layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FDFDFD"
android:orientation="vertical" >
<ImageView
android:id="#+id/shop_Image"
android:contentDescription="#string/shop_image"
android:layout_width="match_parent"
android:layout_height="400dp"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
[...]
And these are the results:
On a Galaxy Nexus, Nexus 5 or Samsung S3 it looks like this:
And on a Razr I or HTC Desire X it looks like this:
I'm aware that the above devices, which display the image correct have a display with at least 4,7 inches while the both with the blurry images have 4,3 inches or 4 inches.
And even though I have put those images in the different drawable folders, I still get these unpleasant results.
If further code-examples are needed, please let me know.
PS: Sorry for the missing highlighting, I'm still a newbie :)
A quick search on Google let me know these facts:
Desire X specs: 480 x 800 pixels, 4.0 inches (~233 ppi pixel density) - So, it's an hdpi device
Samsung S3 specs: 720 x 1280 pixels, 4.8 inches (~306 ppi pixel density) - So, it's an xhdpi device
Now, you should read this: developer.android.com/guide/practices/screens_support.html.
A very quick fix could be: put the image in the /res/drawable-xhdpi folder (if you don't have the folder, just create it).
Also consider that:
The images should be saved at the proper dpi resolution.
A common error is to leave them at the standard (insufficient) resolution of 72 dpi or 96 dpi.
hdpi images resolution should be 240 dpi and xhdpi images resolution should be 320 dpi, to display properly and scale well.
So, what to do?
Change the resolution of the bigger image, without changing its size (which is automatically scaled when you touch the resolution - so, reset it to 1280*800).
Then make the smaller image out of this one, by changing the resolution (it should scale down to the correct size 480*854 - just cut out the exceeding 54 pixel - 27 from the top and 27 from the bottom).
Once you put the right images into their proper folders, everything should now fit well.
Related
I'm going through a problem in an application here my related to this issue. See if you can help me:
In my case I have a ImageView showing a ruler, and then I need to show this rule in real size, where it does not need to grow or shrink as the screen size or density. Using as a basis my Moto G3, it works perfectly, but when testo other devices, it loses the actual size of a ruler because the image tries to fit the screen size.
The image of the ruler is in PNG and measures 3600px x 155px and has measured up to 30cm, it is within a LinearLayout orizontal. In my Moto G3 visible area it is in 10cm, a larger screen for example it should show a larger area of the ruler (11 to 15cm for example), but it contunua only 10cm in the visual field of the screen, showing that it grows and shrinks as the display settings and density of the device.
Before I had a picture of RAGUA for each resource (xxhdpi, xhdpi, etc), so I decided to migrate it to the assets folder of Android, but still with the same problem.
Do you have a light on how to fix it?
Follows the code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/rulerPolegada"
android:layout_width="1780dp"
android:layout_height="103dp"
android:layout_marginTop="-10dp"
android:layout_marginLeft="#dimen/left_ruler"
/>
</RelativeLayout>
</HorizontalScrollView>
</LinearLayout>
And as I said, after I image for assets, I started to set it in java:
rulerPolegada = (ImageView) view.findViewById(R.id.rulerPolegada);
rulerPolegada.setImageDrawable(Controller.getImageAssets(getActivity(), "ruler_polegada.png"));
Due to Understanding Density Independence In Android, you can calculate those values as follows
Here is how you can calculate for your device (Moto G3)
30cm = 11.811 in
Moto G3 screen density bucket is xhdpi - 320dpi
320px ~= 1 in
320px * 11.811in ~= 3780px
With this steps you can calculate how big your image should be.
Now, instead of providing different ruler's images for different screen densities, place your high quality image in drawable-anydpi folder, because A drawable in res/drawable-anydpi/ also is valid for any screen density. However, in this case, the -anydpi variant trumps any density-specific variant. due to '-nodpi, -anydpi, and WTF?' article from The CommonsBlog
Unfortunatelly, you can't used calculated values in layout xml file directly - ImageView size needs to be changed dynamically in Java code.
Above solution should give you decent accurancy (it can be diffent by 10%), but you can use DensityMetrics together with default display to get actual horizontal and vertical density, which will help you calculate image pixel size more precisely.
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
// these will return the actual dpi horizontally and vertically
float xDpi = dm.xdpi;
float yDpi = dm.ydpi;
Edit
Calculation for 480dp:
30cm = 11.811 in
density bucket xxhdpi - 480dp
480px ~= 1in
480px * 11.811in ~= 5669px
I'm not sure if you get your answers correct because it appears that previous answers were not satisfied. I had once the same problem - I need this ImageView to have the same size on a plethora of devices without scaling. I solved my problem by providing defined value in dp for layout_width and layout_height
You should read this guide for run in multiscreen
I know the discussion about this is available everywhere and I myself have worked with these folders, but still after reading them I recently I had a big confusion regarding how to arrange images in drawable folders -
Look at this XML File -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wallpaper_chapter_selection"
tools:context="com.greenloop.joindotsandpaint.ChapterSelection">
<ImageView android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:src="#drawable/img2"
android:padding="20dp" />
<RelativeLayout
Let's consider 2 phones regarding this Landscape Mode -
Nexus 10 - 2560 px * 1600px xhdpi
Nexus 5 - 1920px * 1080px xxhdpi
In the case of Nexus 10 - Image size will be 1600px (height)
And in the case of Nexus 5 - Image size will be 1080px
Image size required by Nexus 10 will be greater than that required by Nexus 5, But nexus 10 will take image from the xhdpi folder (smaller image size) as it is xhdpi
and nexus 5 will take image from xxhdpi folder.
So how should I work around this. I have lots of similar layouts in which I am facing a similar problem.
The drawable-hdpi, drawable-xhdpi, drawable-xxhdpi etc. specifies only the dpi dimension and devices of all sizes are going to get resources from the same folder as long as they have the same dpi specifications. To add the screen size dimension you can add large (for devices 7" and around), xlarge(for devices 10" and around) etc. to this. For example you can have a drawable-xlarge-xhdpi to force the Nexus 10" to get a particular resource from this folder. Or your can have only drawable-xlarge and this way all the 10" devices will pull the resources from this folder, no matter what their dpi is.
Basically the one-catch-all is the drawable folder and you overwrite on a case by case basis with the values from drawable-*-*-etc. folders.
Check the part under "Screen size":
http://developer.android.com/guide/topics/resources/providing-resources.html
You can (or rather need to) create different layouts for different screen sizes. Phones and tablets are treated differently.
The Nexus 5 has a higher DPI. 1080px on 5" VS 1600px on 10"... So it is correct that Nexus 5 uses the xxhdpi resource (here: image!) and Nexus 10 the xhdpi. (xhdpi isn't "bigger" than xxhdpi, it just "has less" pixel per inch).
Layouts for phones and tablets are something different to DPI of screens.
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.
Ok here is a problem that is puzzelling me that I really would like you to help me out with.
I am testing my app with both HTC amaze and Galaxy S2 (as I know both are High density) and both in the 3.7-4.3 screen range
The problem is that the same image looks different in terms of size on both screens. On The HTC amaze it is much smaller. I have my 3 drawable folders with the appropriate different sizes ( which I should need anyways here because both devices are of the same density)
I did some debugging on the DisplayMatrics and I found for HTC amaze the follows:
density 1.5
desnityDPI 240
Height pixels:540
Width pixels:960
xdpi 258
ydpi 256
However, for the S2 galaxy the display metrics are:
density 1.5
desnityDPI 240
Height pixels:480
Width pixels:800
xdpi 160
ydpi 160
So can someone explain to me why the images sizes on both devices are different. On HTC amaze images are much smaller than on the S2?
Thank you
Edit: Code used to get the DP info is
DisplayMetrics mt =getApplicationContext().getResources().getDisplayMetrics();
EDIT:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carpet"
android:clipChildren="false"
android:clipToPadding="false"
android:keepScreenOn="true" >
<RelativeLayout
android:id="#+id/relativeLayoutBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:clipChildren="false"
android:clipToPadding="false" >
<ImageView
android:id="#+id/ivBottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/ivBottom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp" />
<ImageView
android:id="#+id/ivBottom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp" />
</RelativeLayout>
</RelativeLayout>
private void initialize(ArrayList<CardSuitNumber> cards) {
RelativeLayout flBottom = (RelativeLayout) findViewById(R.id.relativeLayoutBottom);
player1.clearAll();
for(int i=0; i<GameConstants.MAXRANKS;i++){
player1.addCard((ImageView)flBottom.getChildAt(i));
}
}
public void addCard(ImageView im){
Drawable drawable = card.getCardSuitNumber().getDrawable(mActivity);
im.setImageDrawable(drawable);
imsetVisibility(View.VISIBLE);
}
The answer is in the numbers right in front of you.
Source http://www.androidauthority.com/htc-amaze-4g-vs-samsung-galaxy-s-ii-t-mobile-27110/
In terms of screen size, the Samsung Galaxy S2 has a slightly larger
screen with 4.52 inches of display. The HTC Amaze 4G, on the other
hand, comes with a screen similar in size to the international variant
of the Galaxy S2–4.3 inches.
The HTC Amaze has a higher resolution, and a smaller physical screen. This results in a higher pixel density- that means smaller physical pixels, because a larger number of them needs to be crammed into a tighter place.
An image of for example 240x160 would therefore appear smaller on the Amaze.
The reported DPI values for the S2 is clearly wrong. According to the metrics given it is '
800/ 160 = 5 inches on the long side, and 480/160 = 3 inches on the short side.
This would have given a screen size of sqrt (5 * 5 + 3*3 ) = 5,8 inches.
The DPI values for The amaze is correct. As we see if we do a simple pythagoras. Sqrt (960/258^2 + 540/256^2) = 4,27"
As a developer I experience the same thing when moving from my test device HTC sensation, and the S2.
The xdpi and ydpi on HTC is very high thats why the image is smaller.
I remember there was a bug that the reported xdpi and ydpi was totaly wrong, and to be honest they look wrong.
Would this be related to this issue: https://groups.google.com/forum/?fromgroups#!topic/android-developers/g56jV0Hora0
I am not sure but the One Solution that i come to know base on your issue is, You have to made the layout as per the Device Screen Resolution.
As like,
Galaxy SII Support layout-normal-hdpi
As like,
Maybe HTC amaze support layout-large Screen.
So try to make the Layout as per the Device and it will solved your issue.
Hope it will help You.
Other detail that same to your question is here: android-layout-issue-for-htc-evo-3d
Enjoy Coding. . . . :)
I'm designing splash images for an Android app. But when it comes to different screen sizes and resolutions, i'm stuck at the root.
I have understood that there should be a 3:4:6:8 ratio in image sizes to fit each screen dpi requirements, so I have designed (designed in Photoshop CS 5) a splash image as below
low (ldpi) - 184px X 58px
medium (mdpi) - 246px X 78px
high (hdpi) - 369px X 117px
x-high (xhdpi) - 492px X 156px
But the issue is, there are small screen sizes such as 240 x 320 with high or medium resolutions (example: Sony Ericsson Xperia Mini Pro) and when the app selects the image appropriate for this resolution, the image is too large for the screen size.
In my case, the hdpi image will be selected for the Xperia Mini and its 369px X 117px but the actual screen size is 240px X 320px
Is there something i'm missing in this? or should I do something differently when designing. Android documentation is gibberish to me.
Help !!!!!
Thank you in advance!
Note: 9-Patch Samples
Just make sure you mention fill_parent for height and width attribute. That would be just fine.
Reg the image designing the best way is to create a 9 patch image. If you create different image for diff sets of device. It is a over head always. Check this and this
Simply you can use the Image view to set the screen content.
ImageView iv=ImageView(this);
iv.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
......
......
......
setcontentView(iv);
This will match for the screen width and height.