Question

I have a weird problem that I’m hoping someone might be able to help me with.

I’m trying to get 3 buttons to appear one beneath the other with a 10dp top-margin starting from the center of the screen. So the first button is in the center of the screen, the second button is below that button (without pushing the center of the screen button up), and the third button is below the second.

Whenever I add a large (greater than the size of the screen) background image to my RelativeLayout (which fills the whole screen), it causes the second and third image to go back to the top of the screen (where they are supposed to be if I removed the centerInParent attribute from the first button). The first button still stays in the middle of the screen.

I was wondering if anyone has had this issue before and what is the best solution around it? Using a smaller image can work but isn’t ideal as the issue once again appears at a smaller screen size, which requires me to shrink all my images, and it sometimes still appears at certain screen sizes.

Here is my XML file:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg" >
<Button
    android:id="@+id/button1"
    android:layout_centerInParent="true"
    style="@style/Button" />
<Button
    android:id="@+id/button2"
    android:layout_marginTop="10dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button1"
    style="@style/Button" />
<Button
    android:id="@+id/button3"
    android:layout_marginTop="10dp"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button2"
    style="@style/Button" />
</RelativeLayout>

The button style is simply:

<style name="Button">
    <item name="android:layout_width">200dp</item>
    <item name="android:layout_height">40dp</item>
    <item name="android:gravity">center</item>
    <item name="android:padding">0dp</item>
    <item name="android:textStyle">bold</item>
</style>

Since I couldn’t find anyone that had an answer to this question while googling it must be something that I’m misunderstanding. It would seem like it should be a common issue.

I’ve also tried wrapping the buttons in a LinearLayout, but it doesn’t achieve the desired effect as the bigger the LinearLayout gets (by adding buttons) the higher it’ll go, and I kind of want the buttons to start from the middle of the screen and go downwards. Basically it achieves the same result as just not having the RelativeLayout and just having your gravity set to the center in a LinearLayout with orientation set to vertical.

Any help greatly appreciated, I’m kind of lost in this at the moment!

Cheers!

Answer 1

I couldn’t solve this problem (it seemed to me like it was a bug of some sort) so I just took a compromise in how I wanted to display the buttons on the screen and simplified it to just using a LinearLayout with the buttons going down the screen.