Develop Reference

Why do these ImageButtons changing position using relative layout?

Learning some Android development through trial and error, however I'm having a slight issue with the rendering of buttons on top of an image view depending on the resolution of the phone.
I have an imageview with two imagebuttons (at the moment) on top. They are relative to the imageview. I will post the xml markup below. The issue is when I run this on the "Nexus 4" in Android studio, everything looks correct. When I debug through my Samsung Galaxy S4, the imagebuttons are off slightly, and I'm not sure why this would be a problem if everything is truly relative to the imageview. I understand that the resolutions are different, but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
I can post pictures if need be, but I feel that the xml will provide adequate information on the issue.
Any help is appreciated. Thanks in advance!
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/SRMap"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="false"
android:background="#drawable/sr_map"
android:layout_columnSpan="2"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_row="0"
android:contentDescription="Map of Summoners Rift"
android:cropToPadding="false"
android:layout_marginBottom="177dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_BlueBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="90dp"
android:layout_marginTop="128dp"/>
<ImageButton
android:layout_width="15dp"
android:layout_height="15dp"
android:id="#+id/BlueSideAlert_RedBuff"
android:background="#drawable/blue_alert_circle"
android:layout_alignTop="#+id/SRMap"
android:layout_alignLeft="#+id/SRMap"
android:layout_marginLeft="180dp"
android:layout_marginTop="215dp"/>

but how would one go about making sure that this renders the same on the smallest of screens, as well as the newer 1080p screens that are becoming more popular?
See the Docs here about supporting different screen sizes/resolutions. You create separate layout files adjusted to what you need. Simply use different qualifiers for the layout folder name according to the docs and the correct one will be used according to the device that loads it.
You can try and adjust one file to work on different screens but you are a lot better off using different layouts if it will be ran on different screen sizes and resolutions.
For example: you can have a default res/layout folder and a res/layout-large to be used on larger screens

I handled this in a fairly ugly way, but it works across all screen sizes now. Basically say the primary image was 800x800 dp (the image view). The buttons would be smaller than this (20x20 dp), however through transparency, i created 800x800 dp imageviews (note: no longer buttons) with everything transparent but the "icon" (still 20x20 dp). Although slightly larger in terms of file size, it's negligible in my case. Now no matter what the size of the screen, the imageviews all stretch the same amount, thus removing any guesswork from using the different pixel densities.
I realize that this wasn't the most graceful solution, but I cannot see any drawback aside from making some of the layout development more difficult, and the image files are slightly larger. I used Paint.NET in order to create the .png's that I used.
I am creating an app that is relevant to me, and that I figured would be easy to implement using some of the core functionality already provided in android. My idea is a simple League of Legends Jungle Timer Application. This is important to know as I link the pictures so people can understand the context.
Note that both images are the same resolution, there is just no border on the second one.
http://i.stack.imgur.com/Ad3LZ.jpg
http://i.stack.imgur.com/NfhRM.png
Additional details:
For this app I have disabled the "landscape" orientation, I plan on doing this using some of the details that were provided on this page (layouts).
All of these icon ImageViews are relative to the map, which is the first link, so they will always resize correctly. There are 12 of them also, if it matters.
Thanks all for your help!

Android positioning problems

So my problem is simple- I want to use XML layouts to precisely control the positioning of widgets on multiple devices. To do this, I thoroughly read the google docs on supporting multiple devices. According to this part, the WVGA854 and HVGA are both considered "Normal screen" size. So theoretically, positioning a widget on WVGA854 should look the same as with HVGA. However, the resultant screenshot shows otherwise.
The widget appears relatively higher placed on the WVGA854 skin. The XML code is shown below, and was placed under the layout-normal/ folder:
<?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" >
<ImageButton
android:id="#+id/button1"
android:src="#drawable/icon_unlock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:text="Button" />
</RelativeLayout>
The drawables I constructed are in the proper ratios (3:4:6:8 as recommended). So why does this positioning mismatch happen? I beginning to think that using XML to position things is quite fruitless. My app requires very accurate positioning of widgets so even this slight mismatch is a problem. Any help how I can remedy this?
EDIT:
What I want is for the widget to be placed in a manner such that the ratio of margin from top to the margin from bottom is exactly the same across devices. From the screenshot, you can see that this ratio is not the same for WQVGA854 and HVGA.

"Normal Screen" size does not mean that screens have the exact same number of dip. You need to think of it as a bucket which contains a number of different screen sizes which are all similar in physical size.
so using fixed size margins and paddings is not (easily) going to achieve the effect you need. So please clarify your question and give an example of what you exactly want to achieve.

Honeycomb makes texts pixelized

My app looks fine on my Galaxy S, but when I run it on a Galaxy Tab 10.1 (Android 3.0), the texts look pixelized/smeared:
The XML used for the Synchronize button follows:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/synchronizeButton"
android:background="#drawable/button"
android:text="Synchronize"
android:textSize="20dp"
android:textColor="#drawable/buttoncolors"
android:layout_marginBottom="10dp"/>
Is there something wrong I am doing, or is there something special I need to do to make my apps Honeycomb-compatible?

Is your application running in compatibility mode? If so, this is expected. You need to indicate in your manifest that you support large screens.

Try changing textSize="20dp" to textSize="20sp". When dealing with text you should always use "sp" (scale-independent pixel). Hopefully this fixes it.
see this page for more info: http://developer.android.com/guide/practices/screens_support.html

how to design for all device resolution

hi all
i have to use linear layout with all resolution type device such as 480x800,480x854,320x480.
i use x,y position for placing element in linear layout while designing for 320x480. i have to redesign for other resolution device therefore it takes more time. please give common method for all the resolution with linear layout. thanks in advance.

DON'T design for a specific resolution. Use combinations of layout_weight attributes, layout_width and layout_height values of wrap_content and match_parent to get different proportional widths depending on the screen size, rather than hard coding pixel values.
For example, say you want to add a row of four buttons, each taking up equal width, along the top of the screen, offset from the top left by ~5 pixels:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:gravity="top"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 4"
/>
</LinearLayout>
This will give you a reliable result for any screen density, and you never have to worry about a certain pixel value. The use of dp (device-independent pixel) for the padding also changes slightly depending on the density, so that it stays a consistent physical size no matter what the resolution.
Read through the examples on the Android Developers site about LinearLayouts, FrameLayouts, and RelativeLayouts. You'll get a good feel on what each one is good for, and their advantages and disadvantages.

You can define different layouts for different screen categories. So you can adapt your layout so that it fits the actual screen. A good resource that describes how this is done is available here:
http://developer.android.com/guide/practices/screens_support.html

It's a good idea to use density-independent pixel (dp) in layouts. And I think this could be helpful: http://developer.android.com/guide/practices/screens_support.html

Very EXCELLENT ANSWERS ... I believe that alot of individuals and business alike think that Android is a "Device" and not clearly understanding Android is a "OS". Inorder to properly display images for all devices running Android OS one must go with the option to Support Mutiple Devices and develop according to Android OS and not a certain device running Android OS. I have encountered this problem before, my Boss (at that time) said "What size Images does your Test Device need? I said "just get me the images! I was forced to use 320x480 images (according to the test device) and when the Regional Manager saw the demo product on his ThinkPad (and 4 other device's) I was terminated from my position because my Supervisor thought Android was a Device and Not a OS ... and the company Android App has yet to be completed.My opinion holds "Supporting Mutiple Devices is developing for General Android OS while developing according to "Resolution" is for a certain device or type of device.

ANDROID layout gets messed up from emulator to tablet

I've recently developed an android game using Eclipse. I'm really a newbie at this so forgive me if what I will ask is too simple. >.<
The application runs and looks perfectly in the Android emulator installed in Eclipse. However, when we tried to install it in a Samsung Galaxy tab which obviously has a bigger screen than the emulator, the layout gets messed up. Buttons are not in their right order etc. I do have screens using XML layouts and some are simple canvases with sprites. Any idea how I could retain the original layout in the emulator to the tablet? I've tried using RelativeLayout instead of LinearLayout but it still doesn't work.
Any help would be appreciated. Thank you!
One XML file code and it's corresponding screen from emulator shown below.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MenuLayout" >
<Button android:id="#+id/btnNew"
android:layout_width="140px"
android:layout_height="65px"
android:layout_marginTop="160px"
android:background="#drawable/newgame"/>
<Button android:id="#+id/btnInst"
android:layout_width="140px"
android:layout_height="65px"
android:background="#drawable/instructions" />
<Button android:id="#+id/btnCredits"
android:layout_width="140px"
android:layout_height="65px"
android:background="#drawable/credits"/>
<Button android:id="#+id/btnExit"
android:layout_width="140px"
android:layout_height="65px"
android:background="#drawable/exit"/> </LinearLayout>

You need to use dpi and not pixels.
Here's a good resource.
http://developer.android.com/guide/practices/screens_support.html

As others have mentioned, you should be using "dp" instead of "px". These are device independent pixels and will scale to match different screen resolutions.
You should also follow this guide on how to use a folder structure to support different screen resolutions and sizes.
Cheers

Based on your edited question, and on the comments, here is a way to change your layout to a relative one:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/MenuLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/btnNew"
android:layout_width="140dip"
android:layout_height="65dip"
android:layout_marginTop="160dip"
android:background="#drawable/newgame"
android:layout_centerHorizontal="true"
android:layout_above="#+id/btnInst" />
<Button android:id="#+id/btnInst"
android:layout_width="140dip"
android:layout_height="65dip"
android:background="#drawable/instructions"
android:layout_centerHorizontal="true"
android:layout_above="#+id/btnCredits"/>
<Button android:id="#+id/btnCredits"
android:layout_width="140dip"
android:layout_height="65dip"
android:background="#drawable/credits"
android:layout_centerHorizontal="true"
android:layout_above="#+id/btnExit"/>
<Button android:id="#+id/btnExit"
android:layout_width="140dip"
android:layout_height="65dip"
android:background="#drawable/exit"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="25dip"/>
</RelativeLayout>
Though, if you want a perfect solution, you need to design the buttons and background pictures in 3 sizes, and put them in the respective folders drawable-hdpi, drawable-mdpi and drawable-ldpi(and for tablets, from 2.2, you can also have drawable-xhdpi!). Read carefully this article and test your layout in emulator for as many screens as possible (from ADT 10.0 it is really easy to preview your layout for different configurations directly from Graphical Layout tab in xml).
Also, android:layout_marginTop="160dip" and android:layout_marginBottom="25dip" are not really useful in a Relative Layout. I would suggest you to try a 9-patch picture for your background, with only the wood board stretchable for the buttons (though I am not sure it's working like that). Alternatively, I would have a separate picture with Main Menu, that I'd place above the buttons, and keep in the background only the trees and everything else.

itz better to provide diffrent layout for diffrent screen size . i also have same issue when developing a game.nw its done.
u may have provided layout ,so u just provide
layout-large,small,and xlarge.and vice verse to ur layouts u must provide drawable folders like hdpi,mdpi,ldpi,xdpi folders and u must save diffrent sized images 58*58,75*75,100*100 for following then u check it u will get it.