Image buttons position appearing differently in different phones

Question

I created a xml file having 5 image buttons but when i run my app in my phone they are not in position with the background( i.e, not in the position i wanted). they acquire position which are little bit downwards then i expected. here is the code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/menuname1" >

<ImageButton
    android:id="@+id/imageButton2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/imageButton1"
    android:layout_centerHorizontal="true"
    android:padding="50dp"
    android:background="@drawable/i1" />

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="130dp"
    android:background="@drawable/i2"
    android:padding="65dp"
    android:scaleType="fitCenter" />

<ImageButton
    android:id="@+id/imageButton3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignTop="@+id/imageButton1"
    android:layout_marginTop="15dp"
    android:background="@drawable/i3"
    android:padding="50dp"
    android:scaleType="fitCenter" />

<ImageButton
    android:id="@+id/imageButton4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/imageButton3"
    android:background="@drawable/i4"
    android:padding="50dp"
    android:scaleType="fitCenter" />

<ImageButton
    android:id="@+id/imageButton5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton4"
    android:layout_centerHorizontal="true"
    android:padding="50dp"
    android:scaleType="fitCenter"
    android:background="@drawable/i5" />

</RelativeLayout>

EDIT: I want all the image buttons to be in relative to imageButton1(left of imageButton1 and no space between them) and imageButton1 should be in relative to the centre of the phone(not in exact center, just in relative to it). in my background i drew a separator which separates all the button in a stylish way but my buttons are not in relative to it. i want the button to be placed in a position 40% from bottom. can i do it.

give the full xml layout, or at least with the parent layout — TootsieRockNRoll, Dec 16 '13 at 20:33

score 0 · Answer 1 · answered Dec 16 '13 at 20:56

Android isn't known for the exact alignment of controls. They're intentionally flexible to make them make best use of the screen size and shape they're given. That's not to say that you're out of luck though. Try setting the width and height of the buttons explicitly. At the moment, they're wrap_content and if the density of pixels on your phone is slightly different from those on the emulator or anywhere else, then the images might be very slightly different. Set a fixed number of dp and consider placing the buttons not relative to each other but only relative to the parent. I assume you're using a RelativeLayout because of the keys you're using on these children. Instead of layout_above etc, just set the layout_marginTop and layout_marginLeft for the distance from the parent edges.

Also, tidy up your XML - try to keep the keys in the same order as it makes it easier to spot problems. And when you use @id/, don't always use @+id/. You're only supposed to use the + on the first mention of the id in the xml file.

sir i have updated my question. please take a look on that and provide me a solution. — Info Seeker, Dec 17 '13 at 16:22
Could you perhaps provide a drawing / diagram of what you want it to look like afterwards? It's really hard to understand what you're trying to ask — SDJMcHattie, Dec 17 '13 at 22:06

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

This is where using a dimensions XML file can help. See Using configuration qualifiers. In your case having different values folder with their own dimens.xml file will allow you to set different dimensions for different devices.

Like, here is one of your ImageButtons:

<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="@dimen/image_button_one_margin_bottom"
android:background="@drawable/i2"
android:padding="@dimen/image_button_one_padding"
android:scaleType="fitCenter" />

Then in a dimens.xml file (like the one in your default values folder):

<dimen name="image_button_one_margin_bottom">130dp</dimen>
<dimen name="image_button_one_padding">65dp</dimen>

You put the same dimens.xml file in different values-xxxx folders to target different screen sizes and/or densities, like:

values-small
values-normal
values-normal-mdpi
etc.

And you set the values (130dp and 65dp) to different values that work better for those devices.

Another way to do this is to have different layout folders, where you have the same layout file in folders for different devices.

Image buttons position appearing differently in different phones

2 Answers2