TextView repositions when text is entered in EditText [XML]

Question

I have a simple table layout that looks like this:

https://i.sstatic.net/hnSqa.jpg

My problem is that whenever I type text into the Artist, Venue or Comments EditText boxes, once the text string is in line vertically with the start of the Date TextView, the TextView start position moves position to stay in line with the string of characters; like this:

https://i.sstatic.net/rm2jA.jpg

I'm not sure if the Button is trying to match its end point to the string of characters or if the TextView is trying to match its start point to the string of characters but either way somethings not right.

Can anyone give me some insight as to what is happening here? Thanks in advance!

Here is the XML file for the page shown:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        style="@style/titleBar"
        android:id="@+id/addTitle"
        android:text="@string/add"          />

   <TableLayout
        style="@style/my_table"
        android:id="@+id/addTable"
        android:layout_below="@+id/addTitle">
        <TableRow>
            <TextView
                style="@style/largeText"
                android:text="@string/artistName"/>
        </TableRow>
        <TableRow>
            <EditText
                style="@style/tableEditText"
                android:id="@+id/editName"/>
        </TableRow>

        <TableRow>
            <TextView
                style="@style/largeText"
                android:text="@string/venue"/>
        </TableRow>
        <TableRow>
            <EditText
                style="@style/tableEditText"
                android:id="@+id/editVenue"/>
        </TableRow>

        <TableRow>
            <TextView
                style="@style/largeText"
                android:text="@string/date"/>
       </TableRow>
       <TableRow>
           <Button
               android:background="@android:color/transparent"
               android:drawableRight="@drawable/event_1"
               android:id="@+id/setDateButton"/>
           <TextView
               style="@style/tableEditText"
               android:layout_weight="3"
               android:layout_width="200dp"
               android:id="@+id/editDate"/>
       </TableRow>

       <TableRow>
            <TextView
                style="@style/largeText"
                android:text="@string/comments"/>
       </TableRow>
       <TableRow>
            <EditText
                style="@style/tableEditText"
                android:inputType="textNoSuggestions|textCapSentences|textMultiLine"
                android:lines="3"
                android:id="@+id/editComments"/>
        </TableRow>
    </TableLayout>

    <Button
        android:id="@+id/addButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/add"
        android:background="@android:color/transparent"
        android:textColor="@color/grey"
        android:padding="20dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

Here is the styles.xml file:

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Holo.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>

    <style name="largeText">
        <item name="android:textColor">@color/grey</item>
        <item name="android:textSize">25sp</item>
        <item name="android:padding">3dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">left</item>
        <item name="android:layout_marginRight">20sp</item>
    </style>

    <style name="largeText2">
        <item name="android:textSize">25sp</item>
        <item name="android:padding">3dp</item>
        <item name="android:background">@color/bgOrange</item>
        <item name="android:textColor">@color/nearBlack</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">left</item>
        <item name="android:layout_marginRight">20sp</item>
    </style>

    <style name="titleBar">
        <item name="android:textColor">#fff</item>
        <item name="android:textSize">25sp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_alignParentTop">true</item>
        <item name="android:layout_centerHorizontal">true</item>
        <item name="android:gravity">left</item>
        <item name="android:padding">20sp</item>
        <item name="android:background">@color/headingOrange</item>
    </style>

    <style name="my_table">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:padding">15sp</item>
    </style>

    <style name="tableEditText">
        <item name="android:inputType">textCapSentences|textNoSuggestions|textAutoComplete</item>
        <item name="android:background">@color/bgOrange</item>
        <item name="android:textColor">@color/nearBlack</item>
        <item name="android:gravity">left</item>
        <item name="android:padding">3dip</item>
        <item name="android:textSize">25sp</item>
        <item name="android:layout_weight">1</item>
    </style>

    <style name="smallIcon">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_gravity">left</item>
        <item name="android:padding">2dp</item>
    </style>

</resources>

Answer 1

This is happening because of your use of the TableLayout while not fully appreciating how it works. What it does is it goes through and figures out how many columns it will have. For each TableRow it will put the views in each column starting from the first defined view to the last.

What is happening is that your first TextView for artistName is in column 1. The next few TableRow only have 1 column. Then you get to the TableRow with setDateButton which creates two columns. Now all the other views previously assigned will be in column 1 with a column 2 after them which would be as wide as editDate if they had another view.

As a result setDateButton is now as wide as your artistName TextView and since you are using android:drawableRight the image is being placed to the right side of the Button.

You're going to need to adjust layout_column and layout_span values to adjust the layout. Alternatively, I would suggest removing the TableLayout and using the RelativeLayout appropriately.

Answer 2

Try wrapping the Button and TextView with a LinearLayout