Issue
I'm developing an Android App with an interface formed by external images. The size of all images is exported in pixels and when I try to test the application, it looks different in all devices.
What I'm doing bad?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".Control">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="@+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:src="@drawable/logo"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn1"
android:layout_below="@+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="60dp"
android:layout_marginLeft="15dp"
android:background="@null"
android:src="@drawable/btn1state"
android:clickable="false" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn2"
android:layout_alignTop="@+id/btn1"
android:layout_toRightOf="@+id/btn1"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn2state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn3"
android:layout_alignTop="@+id/btn2"
android:layout_toRightOf="@+id/btn2"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn3state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn4"
android:layout_alignTop="@+id/btn3"
android:layout_toRightOf="@+id/btn3"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn4state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn5"
android:layout_below="@+id/btn1"
android:layout_alignLeft="@+id/btn1"
android:background="@null"
android:src="@drawable/btn5state"
android:layout_marginTop="30dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn6"
android:layout_alignTop="@+id/btn5"
android:layout_toRightOf="@+id/btn5"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn6state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn7"
android:layout_alignTop="@+id/btn6"
android:layout_toRightOf="@+id/btn6"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn7state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn8"
android:layout_alignTop="@+id/btn7"
android:layout_toRightOf="@+id/btn7"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn8state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn9"
android:layout_below="@+id/btn5"
android:layout_alignLeft="@+id/btn5"
android:background="@null"
android:src="@drawable/btn9state"
android:layout_marginTop="30dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn10"
android:layout_alignTop="@+id/btn9"
android:layout_toRightOf="@+id/btn9"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn10state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn11"
android:layout_alignTop="@+id/btn10"
android:layout_toRightOf="@+id/btn10"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn11state" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn12"
android:layout_alignTop="@+id/btn11"
android:layout_toRightOf="@+id/btn11"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn12state"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn13"
android:layout_below="@+id/btn9"
android:layout_alignLeft="@+id/btn9"
android:background="@null"
android:src="@drawable/btn13state"
android:layout_marginTop="30dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn14"
android:layout_alignTop="@+id/btn13"
android:layout_toRightOf="@+id/btn13"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn14state"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn15"
android:layout_alignTop="@+id/btn14"
android:layout_toRightOf="@+id/btn14"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn15state"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn16"
android:layout_alignTop="@+id/btn15"
android:layout_toRightOf="@+id/btn15"
android:layout_marginLeft="30dp"
android:background="@null"
android:src="@drawable/btn16state"/>
</RelativeLayout>
That's a sample of my code.
In another 7" it was working well, but this tablet has different resolution.
Should I have to work in dp with image sizes or what I have to do to adapt it? When I put all images in the different folders (drawable-ldpi...) it looks always. Any suggerence please?
Solution
The best way to manage image dimensions on android apps and be sure to keep under control the behavior of the images is to use DensityPixel.
- px is one pixel;
- sp is scale-independent pixels;
- dip==dp is Density-independent pixels.
The best way is to use:
- sp for font sizes;
- dp for everything else.
In addition, use the normal, large, xlarge different RES to manage each different resolution for images.
You can also define one single layout for each different size screen; Let me know, if you need to go in this way; i can link something useful.
For general knowledge, from http://developer.android.com/guide/topics/resources/more-resources.html#Dimension:
px Pixels - corresponds to actual pixels on the screen.
in Inches - based on the physical size of the screen.
mm Millimeters - based on the physical size of the screen.
pt Points - 1/72 of an inch based on the physical size of the screen.
dp Density-independent Pixels - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion. Note: The compiler accepts both "dip" and "dp", though "dp" is more consistent with "sp".
sp Scale-independent Pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.
Answered By - Stefano
Answer Checked By - Cary Denson (JavaFixing Admin)
