Develop Reference

dp differences between Nexus5 and Nexus5X?

I defined this layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/intro_smartphone_data" />
<ImageView
android:id="#+id/ivData1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/ivSmartphone"
android:layout_centerHorizontal="true"
android:layout_marginTop="90dp"
android:src="#drawable/intro_data_1" />
<ImageView
android:id="#+id/ivData2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_2" />
<ImageView
android:id="#+id/ivData3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_3" />
<ImageView
android:id="#+id/ivData4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/ivData3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:src="#drawable/intro_data_4" />
</RelativeLayout>
It should looks like this one according to the android studio preview window:
On a Nexus5X it looks exactly like this, but on a Nexus5 i get
I thought Nexus5X and Nexus5 have the same density and take the images from the same xxhdpi directory? So what's missing?
Thanks in advance.

The size of the Nexus 5 is 360x640dp while the one of the Nexus 5X is 411x731dp while having the same density.
So when you define you layout like this
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/intro_smartphone_data" />
you're using the same image for every screen width without scaling. Instead you need to make sure to fit your images to the screen width.
<ImageView
android:id="#+id/ivSmartphone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:scaleType="fitCentered"
android:src="#drawable/intro_smartphone_data" />
fitCentered might also upscale the image. If you're fine with a bigger spacing consider using centerInside instead.

Image magically increasing in dimensions when set to an ImageView

I'm setting an image (jpeg) resource to an ImageView that has dimensions 877x3719. However when I run the app it tells me:
W/OpenGLRenderer﹕ Bitmap too large to be uploaded into a texture (2631x11157, max=4096x4096)
Which is exactly triple the original image's dimensions. Does anyone know how or why it's tripling the dimensions without anything in my java code telling it to?
Below is the layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView2" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/testlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:contentDescription="#string/imageph" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:contentDescription="#string/imageph" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:contentDescription="#string/imageph" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:contentDescription="#string/imageph" />
</LinearLayout>
</ScrollView>
</LinearLayout>

ImageView has its size measured in dips (device independent pixel), which can be different for devices with different screen density (like regular and "retina" iPhone).
But when we set image to it, for maximum quality we need to assign value for each screen pixel, that's why your image dimensions are "tripled" — for one dip there are three screen pixels.

set images for multiple devices which has different ppi pixels

I am setting up images for different devices as per official google docs.As per google docs we should always use dp(density independent pixels) because pixels may varies for different devices.
So i have managed images as per dp(density independent pixels).
I have put images in drawable xhdpi,hdpi,mdpi and ldpi. it works well for most of devices but for different devices ppi pixels may varies from device to device so dp(density independent pixels) is not fixed so my all calculations according to dp(density independent pixels) goes wrong and cannot be set properly.
Let me explain me with example.
here is my xml i am setting up :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
when i see this layout in Micromax canvas 4(294 ppi pixels) it seems perfect.
but in Google Nexus 4(318 ppi pixels) it leaves more space from right side(you can see it in images i have attached.).
i tried to get following details
density :
dpHeight :
dpWidth :
using below java code :
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();
display.getMetrics(outMetrics);
float density = getResources().getDisplayMetrics().density;
float dpHeight = outMetrics.heightPixels / density;
float dpWidth = outMetrics.widthPixels / density;
i get following results for nexus 4 and canvas 4 :
(canvas 4)
density : 2.0
dpHeight : 640
dpWidth : 360
(nexus 4)
density : 2.0
dpHeight : 592
dpWidth : 384
as you can see here dp(density independent pixels) varies for these devices
i think it is because of different ppi pixels so all my calculations according to dp(density independent pixels) goes wrong.
so how can i manage images if dp is not fixed.??
i have also attached screen shot of the images how layout looks in canvas 4 and nexus 4.
I have also referred this question How do I convert ppi into dpi for Android images?
i know i can adjust layouts using the layout weight but i think there must be another solution to this problem.
Please see and help me to solve the problem.

You just cannot support all the devices, Either you can create different layouts or different drawables to target each device.
The best thing you can do is make a flexible UI that divides the view in proportions and for doing this WEIGHT come into existence . Just use weight to divide the UI into proportion like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal"
android:weightSum="6">
<ImageView
android:layout_weight="1"
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_weight="1"
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>

The dp pixels are density independent, not proportion independent. The difference in proportion of height to width between the two devices is the issue you are having, not an occurrence of non-standard dp. The only proper solution is to adjust the weight based on difference in proportion.
If density independent pixels were dependent on the pixels per inch, a density dependent unit, then they would also be density dependent.

Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:orientation="horizontal" >
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</LinearLayout>

I do in such a way
Display display = getWindowManager().getDefaultDisplay();
int screenWidth = display.getWidth()/6; //number of buttons
button.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
button2.setLayoutParams(new LinearLayout.LayoutParams(screenWidth, android.view.ViewGroup.LayoutParams.WRAP_CONTENT));
....
make it as for each buttons in same way..
or
Tabbar concept works in anotherway..

For your problem as seen in your screenshot your background have repeatable texture. Crop the image for texture and use repeatable background in place of single image. You can use following XML for repeatable background bg_repeat.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
background.png
give your cropped image as src here and put this XML file in your drawable. Now, in your layout do this -
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_repeat"/>
</LinearLayout>
IMO this will serve your purpose and it will also save you some bites.

I think you need to work with weight here.Just put the same code in your XML and see the difference:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="#+id/ft_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" >
<ImageView
android:id="#+id/ft_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ft_6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/ico_test" />
</LinearLayout>

You just cannot support all the devices, Either you can create different layouts or different drawables to target each device.
Instead of linear layout use Relative layout that will be better for all devices.

Android screen not scaling correctly even though I used dp as units?

I have done a lot of reading on SO and googling all over the place but still cannot get my answer...I have this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/welcomeRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/graph_paper" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/first"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Blue" />
<TextView
android:id="#+id/second"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Cyan" />
<TextView
android:id="#+id/third"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Brown" />
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="203dp"
android:background="#color/Black"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Yellow" >
<ImageView
android:id="#+id/welcomeWImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/WelcomeOImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/welcomeRImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/welcomeDImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/lime" />
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Pink" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/ImageView04"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
As stated in the answers from different threads I have used dp as a scaling unit but I still get these images as a result when moving from different screen size and resolution.
here are the different images I get on different screen sizes and resolutions:
why arent the textboxes growing proportionally to the screen size and resolution? As they are textviews without graphics and dp is used for the unit.
Thank you guys ahead of time.

I cant really tell you the exact xml code to fix this, but as an idea, you need to make use of following properties to equally distribute the screen area among your views:
android:weightSum //for your LinearLayout
android:layout_weight //for your child views
and depending on the orientation of your LinearLayout, you need to set either of the following to your child views.
android:layout_height="0dp"
android:layout_width="0dp"
For examples, read this and this.

you have to create three different layouts for your application .
1- layout folder ( basically its for small screens)
2- layout-large ( basically its for large screens such as 5.0)
3- layout-xlarge ( its used for Large screens "Tablets" )
in order for your application to fit in every screen perfectly you have to create these folders. below steps shows how to work with it
1- create new two foldesr in res folder layout-large and layout-xlarge.
2- copy your layout.xml from the layout folder and paste it on each folders u created now.
3- open them and you'll see how they look on bigger screens , then simply you'll have to change a bit on your layout.xml on each folder.
hope that what you seek for. its that simple . two extra folders

Scaling down PNG images for android buttons become blurry

I am trying to scale an image down from 109x105 to 48x48 to make a button background. I have done the scaling in photoshop and the image is a vector.
However when I run it on my phone the smaller image comes out blurry. The large image is perfect and I can load that onto the phone with no problems so the quality loss. I must mention there is some text in the image too where the blurriness is quite obvious.
I have attempted to use the 9 patch drawable, making the whole image stretchable. I can't seem to find any answer on line that addresses this issue precisely so any input would be useful.
My question is, how do I scale the PNG image down without losing quality? Is this something I can do before I copy the image into my drawable folder or is it something I can let android do automatically.
Edit: The issue is evident in the 3 buttons near the end of the code "#drawable/map" "#drawable/block_small" and "#drawable/share"
<?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:background="#drawable/expandable_deal_back_white"
android:orientation="horizontal"
android:padding="8dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="23dp"
android:contentDescription="#string/logo_content_description"
android:maxHeight="100dp"
android:maxWidth="100dp"
android:minHeight="100dp"
android:minWidth="100dp"
android:scaleType="fitXY"
android:src="#drawable/food_selector" />
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="23dp"
android:background="#drawable/button_selector_new"
android:padding="8dp"
android:text="#string/tandc"
android:textColor="#drawable/button_text_selector_new" />
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:background="#drawable/map"
android:text="#string/empty" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/button2"
android:background="#drawable/block_small"
android:text="#string/empty" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/button2"
android:background="#drawable/share"
android:text="#string/empty" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

how do I scale the PNG image down without losing quality?
You don't. By definition a smaller (by pixel count) image has less data.
That said, there are a couple of things you want to check to ensure the blurriness is due to loss of image quality and not some other factor. Does the small image look fine on your computer? Have you made sure you are putting the images in the correct drawable folders?