Develop Reference

How to show assets bigger on high density phones

So If its in DP, It should scale itself according to the different screen sizes, but that's not the case when i define fixed width and height to an image,it opens it slightly smaller on high res phones, and slightly bigger on low res phones.
I don't know that either this is an expected behavior or i am missing something here.
I am testing on Samsung s5 and Samsung S7 Edge
Samsung s5 is 432 ppi pixel density
Samsung s7 edge is 534 ppi
I have added a single image in my layout for testing. I have added 4 different sizes drawables for it.
<ImageView
android:layout_width="180dp"
android:layout_height="200dp"
android:src="#drawable/testimage"
/>
Now when i open the same project on s5 and s7 edge, the output is little different. It would be understandable if it was appearing larger on high res phone, but on s7 edge, the image is looking smaller than s5.
Kindly guide me that is it a normal behavior or i am missing something here.

Measuring something in dp means it will be the same physical size, not the same percentage of the screen size, so this is entirely expected.
You can certainly use the Percent Support Library (see the details on this Google+ post to make views a set percentage of the layout's width or height, but you should probably only do that if you use vector drawables that will scale appropriately (otherwise, it will be blurry at some level). Generally you'd want to use the additional space on devices to show more content.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:src="#drawable/testimage" />
</android.support.percent.PercentRelativeLayout>

Drawable and Android screen pixel density for fixed-size image

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

Android Standard UI development for hdpi

I am relatively new to android. I want to develop an UI which works fine on 2 hpdi devices.
For example lets say on these two devices
Nexus 9
Size 8.86"
Resolution 2560x1600
Density xhdpi
Nexus 10
Size 10.05"
Resolution 2560x1600
Density xhdpi
As seen above both have different screen size and different resolution but density is the same.
My understanding is one layout should work perfectly on both devices, but unfortunately that is not the case. I see differences. Can someone please suggest what changes i should make.
Adding below the portion of the code(xml) which is giving me a problem.
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2" >
<customSeekBar
android:id="#+id/abc1"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_marginTop="40dp"
android:thumb="#drawable/eqthumb"
android:progressDrawable="#drawable/progress_eq"
android:max="19"
android:progress="10" />
<TextView
android:id="#+id/abc2 "
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/ abc1"
android:textColor="#FFFFFFFF"
android:layout_marginTop="-10dp"
android:textStyle="bold"
android:text="300"
android:singleLine="true"
android:ellipsize="marquee"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/abc3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/ abc1"
android:text="0 dB"
android:textColor="#FFFFFFFF"
android:textStyle="bold"
android:singleLine="true"
android:layout_marginTop="-5dp"
android:ellipsize="marquee"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
Thank you.

Density is only one part of your layouts though. These devices have different aspect ratios so available device independent pixel (dip or just dp) differs.
So your available width and height differs, but sure logical screen density is the same.
Having said that, android's layouts are rather flexible/adaptable and regardless of screen density. Your layout might need to compensate for different widths or heights though. Just as it might want/need to change due to portrait or landscape mode, different aspect ratios (a potential issue with these two devices) has the same difference.
So you are incorrect in assuming that your layout differs a lot due to hdpi/xhdpi/xxhdpi etc. You might want to qualify your layouts on available screen width or similar (sw720dp for example) instead if needed.
Nexus 9 has a logical screen density of: 1024 x 768 dip
Nexus 10 has a logical screen density of: 1280 x 800 dip
Having said that, your particular layout issue needs your specific xml layouts to be explained. For many layouts those two devices should be able to look the same.
Note: Your device data is off. Nexus 9 is 2048 x 1536 pixels and has an aspect ratio that's 4:3 mind you, compared to 16:10 for the Nexus 10. Both fall in the xhdpi bucket though for resource qualifiers etc. Physical screen density is 288 for the Nexus 9 and 300 for Nexus 10.

As seen above both have different screen size and different resolution but density is the same. My understanding is one layout should work perfectly on both devices
That's not true, you are building on top of this wrong premise. Simply put:
Devices with different screen sizes, but same density, will always work with the same layout
False: different screen sizes (in inches) mean you probably will have to adjust your views. So, provide different layouts, or at least different dimensions.
Devices with different densities, but similar screen sizes, should always work with the same layout
True: if the screen size is the same, a 40dp button will cover the same portion of screen in both devices. That's because dps are density independent pixels, and allow us to work on all densities out there with a single value.
I suggest you read this official resource, that should clear your mind. In the very first bullet list, we read:
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
As you can see, there's no Provide different layouts for different screen densities, which was the premise of your question. That's just something you don't do usually, it makes no sense if you use (and understand) dps.

Android button size changes at different devices (width is set to dp)

I am designing an app which needs the customized button. I made it by inheriting the Android Button and I set its width to 300dp in the layout xml. However, I found the size of button is changing on different devices. Here are the example:
My UI in the original device: Galaxy S5
My UI in the new device: Nexus 5X
My UI in another device: Galaxy Note4
(In this trial, I set the left button to use sp instead of dp)
It seems the whole layout scale is smaller in my new device even though both of them are 1080 x 1920 pixels.
I also try to use sp but it behaves the same (problem). My guess is the style? Can any one gives me more thoughts. Thanks!
--- UPDATE ---
Hi, let me rephrase my problem.
I am looking for a way to make a button which width is fix to like (relatively) 1/3 screen width at any device. And its text also changes accordingly. I think the ultimate way is to translate everything to pixel and assign those value manually in program. I used to think using dp and sp is an easy alternative to achieve it, but it turns out not :(

To set width of each child programmaticaly,
view.getLayoutParams().width = getScreenWidth() / VIEWS_COUNT_TO_DISPLAY;
And Screensize as below
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics).widthPixels;
Now, If you want to set Text than use SP for that.

If you are using dp then it will change according to device's screen density. In order to keep the button size same in different screen density conditions you need to use pt,in or mm in your button's width.
Please check link : What is the difference between "px", "dp", "dip" and "sp" on Android?

I think here is what you want.
<?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="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/test"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Normal Charge (Testing)"/>
</LinearLayout>
</LinearLayout>
With the use of weightSum and layout_weight, you can fix the item as 1/3 width of your screen.
Inside the imageview, android:scaleType="fitXY"
It means that the image will be changed to size in order to match the size of imageview.
You can delete that attribute if you do not want that.
For the image, the best way is to prepare different size of the image inside different folders:
for mdpi it should be 100X100
for ldpi it should be 75X75
for hdpi it should be 150X150 (e.g. Xperia U)
for xhdpi it should be 200X200 (e.g. Galaxy S3, Galaxy Note II, Xperia S)
for xxhdpi it should be 300X300 (e.g. Galaxy S4, Galaxy S5, Xperia Z, Xperia Z1, Xperia Z2)
The above size is just an example, you have to find the base case, i can explain more about that if you need.
Hop that can help, thanks!

Image blurry on another device

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.