[SOLVED] PercentageRelativeLayout left margin is incorrect

PercentageRelativeLayout left margin is incorrect

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.

Solution

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.