Misaligned images

Question

I’m using the following .xml as a main screen:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="*">

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp">

    <TextView
        android:drawableTop="@mipmap/gasolina"
        android:layout_width="45dp"
        android:layout_height="match_parent"
        android:text="ÁLCOOL X GASOLINA"
        android:onClick="iniciarTela1"
        android:padding="30dp"
        android:gravity="center"
        android:textColor="#7d7d7d" />

    <TextView
        android:drawableTop="@mipmap/moedas"
        android:layout_width="45dp"
        android:layout_height="match_parent"
        android:text="QUANTO VOU GASTAR?"
        android:onClick="iniciarTela2"
        android:padding="20dp"
        android:gravity="center"
        android:textColor="#7d7d7d" />


</TableRow>

    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp">

        <TextView
            android:drawableTop="@mipmap/grafico"
            android:layout_width="45dp"
            android:layout_height="match_parent"
            android:text="MÉDIA POR KM PERCORRIDO"
            android:onClick="iniciarTela3"
            android:padding="30dp"
            android:gravity="center"
            android:textColor="#7d7d7d" />

        <TextView
            android:drawableTop="@mipmap/grafico2"
            android:layout_width="45dp"
            android:layout_height="match_parent"
            android:text="MÉDIA POR KM INICIAL/FINAL"
            android:onClick="iniciarTela4"
            android:padding="20dp"
            android:gravity="center"
            android:textColor="#7d7d7d" />


    </TableRow>

</TableLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="AVALIAR APP"
        android:onClick="avaliar"
        android:padding="15dp"
        android:gravity="center"
        android:background="#122d98"
        android:layout_alignParentBottom="true"
        android:textColor="#fff"
        android:textSize="16dp" />


</RelativeLayout>

It looks like this on the screen:

The problem is the following images of the second column are higher up (they are not aligned) until I made a red line to be sharper:

What am I doing wrong? how can I fix this problem?

Answer 1

The error you are making is in the property android:padding of your TextView.

You are defining 30dp and 20dp. Try to keep uniform this value for both TextView's.

<TextView
    android:drawableTop="@mipmap/grafico2"
    android:layout_width="45dp"
    android:layout_height="match_parent"
    android:text="MÉDIA POR KM INICIAL/FINAL"
    android:onClick="iniciarTela4"
    android:padding="20dp" <!-- altere esse valor para ambos TextView's -->
    android:gravity="center"
    android:textColor="#7d7d7d" />

Answer 2

Ever tried to use:

Ex:

layout_marginTop=

Or

Layout_marginBotton=

In the images