Develop Reference

ImageViews accurate Position In Multiple Screens

I want red and green pin in the picture be exactly Like the picture in Nexus 4 (Top-left screen) in all screens.i read similar pages and also read http://developer.android.com/guide/practices/screens_support.html
and i know i can solve this with layout-large,layout-xlarge,etc but i have 40 layout like this and if i make each of them for different screens it comes(40*4) 160 layout!
Here is the XML Layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/outlineLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/arrowleft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="107dp"
android:scaleType="fitCenter"
android:src="#drawable/arrowleft" />
<ImageView
android:id="#+id/greenpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/img_start"
android:src="#drawable/greenpin" />
<ImageView
android:id="#+id/redpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:src="#drawable/redpin" />
</RelativeLayout>

Use following layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/outlineLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/arrowleft" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageView1"
android:src="#drawable/greenpin" />
<ImageView
android:id="#+id/img_start"
android:layout_toLeftOf="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:src="#drawable/redpin" />
</RelativeLayout>
You can add your other tags according to need, however from above logic you can align all three images as you want.
Happy Coding

please android:layout_marginTop="107dp" line in all dimension file of all specific device.
for ex.
values-large -> dimens.xml ->add this line android:layout_marginTop="107dp"
values-sw600dp -> dimens.xml ->add this line android:layout_marginTop="97dp"
put only 1 layout folder and multiple valaues folder.
i hope this is useful to you..

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- The background is longer in hdpi screen

I have a trouble issue with the attribute background in android. I want to design a layout which runs find on mdpi and hdpi screen density. I have 2 background image as below:
the background for mdpi at 800x480 resolution:
The background for hdpi at 800x480 resolution:
I use draw9patch to define the content padding as below:
![enter image description here][3]
When I set these images at background of my layout, they worked find on mdpi screen but didn't on hdpi. The background on hdpi longer than what it was designed. Here are the screenshots:
It's fine on mdpi screen:
It's longer (stretch) on hdpi screen:
Here are my code:
<?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="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ui_win_background"
android:orientation="vertical" >
<TextView
android:id="#+id/activity_win_textview_congratulationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_marginXExtraWide"
android:gravity="center"
android:text="CONGRATULATION!\nYOU WON!!!"
android:textColor="#FFF"
android:textSize="#dimen/textSize_XLarge" />
<TextView
android:id="#+id/activity_win_textview_percent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_marginExtraWide"
android:gravity="center"
android:text="50%"
android:textColor="#BD1142"
android:textSize="72sp"
android:textStyle="bold" />
<TextView
android:id="#+id/activity_win_textview_prizeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="Combo Starbucks"
android:textColor="#color/black"
android:textSize="#dimen/textSize_XLarge"
android:textStyle="bold" />
<TextView
android:id="#+id/activity_win_textview_prizeCode"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_margin="#dimen/activity_vertical_margin"
android:background="#drawable/statelist_textview_white_roundborder"
android:gravity="center"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="#fsdjflsejp34230sfmwr3"
android:textSize="#dimen/textSize_large"
android:textStyle="italic" />
<TextView
android:id="#+id/activity_win_textview_prizeName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_vertical_marginWide"
android:gravity="center"
android:text="This screen closes in"
android:textColor="#color/black"
android:textSize="#dimen/textSize_large" />
<TextView
android:id="#+id/activity_win_textview_countDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:gravity="center"
android:text="00:20:40"
android:textColor="#BD1142"
android:textSize="#dimen/textSize_large"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Please take a look and help me to resolve this issue.
Thanks.

Don't use backgrounds.
Use ImageView (with RelativeLayout) and set the ScaleType property of the image view as you like.
You can set a scale type that will keep the aspect ratio of your image.
Also, please note, in cases where you don't want the image to scale, 9patch is useless. The all purpose of 9patch is to let you control how the system scales your image (mostly used for buttons and backgrounds of ui controls).
Your layout (removed some of the elements):
<?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="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scale_type="centerInside" //Do whatever scale type you like
android:src="background image goes here"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/activity_win_textview_congratulationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_horizontal_marginXExtraWide"
android:gravity="center"
android:text="CONGRATULATION!\nYOU WON!!!"
android:textColor="#FFF"
android:textSize="#dimen/textSize_XLarge" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>

Buttons are cropped

I have this layout, and when they're becoming visible, the go and again buttons are being cropped on some devices, so you can only see half of them.
any idea why?
Could it possibly be the margins? How do I fix it?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_camera"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="false" >
<FrameLayout
android:id="#+id/camera_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignEnd="#id/camera_preview"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:clipChildren="false" />
<ImageView
android:id="#+id/head"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/square" />
<ImageView
android:id="#+id/body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/square" />
<ImageButton
android:id="#+id/stop"
android:src="#android:drawable/ic_delete"
android:layout_height="40dp"
android:layout_width="40dp" />
<ImageButton
android:id="#+id/takePic"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:src="#android:drawable/ic_menu_camera" />
<Button
android:id="#+id/go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/camera_preview"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|right"
android:layout_margin="20dp"
android:clickable="false"
android:text="Go!"
android:visibility="invisible" />
<Button
android:id="#+id/again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="20dp"
android:clickable="false"
android:gravity="center_vertical|center_horizontal"
android:text="Again"
android:visibility="invisible" />
</RelativeLayout>
thanks!

Yeah, it might be the margins : I guess the devices where this code doesn't work are the smallest or these with the lowest resolution. To solve your problem, I'd propose that you create a dimens.xml file in your res folder and you call it value-??dpi (depends on which resolution you have problem with). Here is an example :
My Layout file (res/layout/mylayout)
<LinearLayout
android:height="#dimen/heightmylayout"
android:width="#dimen/widthmylayout"
android:orientation="horizontal"/>
My Dimens files : as many as you want ; here one for mdpi and one for hdpi:
HDPI (res/values-hdpi/dimens.xml) :
<resources>
<dimen name="heightmylayout">160dp</dimen>
<dimen name="widthmylayout">160dp</dimen>
</resources>
MDPI (res/values-mdpi/dimens.xml) :
<resources>
<dimen name="heightmylayout">110dp</dimen>
<dimen name="widthmylayout">110dp</dimen>
</resources>
With that, the emulators and phones will see which dimens they must take.
Hope it helps !

Images not getting scaled up ( Android)

I am using some .png images for my Android app's UI. I have kept the images in the 'res/drawable' directory. I read in some tutorials that Android automatically scales up the images when the screen resolution is bigger than mdpi. But when I run my app on big screened devices, the images are displayed as their original sizes, and not scaled up. Rest of the space is empty( black). What am I doing wrong here? Below is the XML for my layout, if it helps:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:theme="#android:style/Theme.Black.NoTitleBar"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/volbar" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/head" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="19dp"
android:text="#string/press_to_update" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/frag11"
/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView9"
android:layout_alignParentLeft="true"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/base" />
</RelativeLayout>

I'm guessing that you want your image to scale up to fill the space. If that is the case, you will need to specify scaledType for your ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="cropInside" />
Experiment with different values from ImageView.ScaleType to get the effect you want.
FYI, when you put an image in res/drawable, it is scaled according to device density. For instance, if your png is 200x150, it will be scaled to 300x225 on a device with 1.5 density. This scaling happens independent of the scaleType.