PercentageRelativeLayout left margin is incorrect

Question

My buttons get pushed to the left way too much (not 33% and 66% respectively,as well as not 50% for the first one): Screenshot

This happens in the emulator as well. I am currently testing this on a OnePlus One.

Here is the PercentageRelativeLayout part:

<android.support.percent.PercentRelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/textView"
        android:layout_above="@+id/contactText">

        <Button
            app:layout_widthPercent="30%"
            app:layout_heightPercent="20%"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/round_button"
            android:text="Σουβλακι"
            android:textColor="#fff"
            android:id="@+id/souvlakiButton"
            app:layout_marginTopPercent="0%"
            app:layout_marginLeftPercent="33%"/>

        <Button
            app:layout_widthPercent="30%"
            app:layout_heightPercent="20%"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/round_button"
            android:text="Burger"
            android:textColor="#fff"
            android:id="@+id/burgerButton"
            app:layout_marginTopPercent="66%"
            app:layout_marginLeftPercent="33%"/>

        <Button
            app:layout_widthPercent="30%"
            app:layout_heightPercent="20%"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/round_button"
            android:text="Pizza"
            android:textColor="#fff"
            android:id="@+id/pizzaButton"
            app:layout_marginTopPercent="0%"
            app:layout_marginLeftPercent="66%"/>

        <Button
            app:layout_widthPercent="30%"
            app:layout_heightPercent="20%"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/round_button"
            android:text="Κρέπα"
            android:textColor="#fff"
            android:id="@+id/pancakeButton"
            app:layout_marginTopPercent="66%"
            app:layout_marginLeftPercent="66%"/>

        <Button
            app:layout_widthPercent="30%"
            app:layout_heightPercent="20%"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/round_button"
            android:text="Καφές"
            android:textColor="#fff"
            android:id="@+id/coffeeButton"
            app:layout_marginTopPercent="33%"
            app:layout_marginLeftPercent="50%" />

        </android.support.percent.PercentRelativeLayout>

I also keep this project at Github. How do I fix my issue? I am also trying to go for circle-shaped controls but I guess this is not possible, sometimes they are going to be oval.

Answer 1

If you want the coffeButton to be centered horizontally you should take into consideration the button width when setting the margin. Since the width of the button is 30%, to center it would require app:layout_marginLeftPercent to be 50% - 30% / 2 = 35%.

For the top margin app:layout_marginTopPercent is 33% - 20% / 2 = 23%.

Same thing applies to the rest of the buttons.