将TimePicker和DatePicker添加到Android混乱小部件外观中

Question

我想在我的应用程序中放置一个TimePicker和DatePicker，布局是TableLayout，我将DatePicker放在一行，将TimePicker放在另一行。但是，只要我添加了TimePicker小部件的外观。请参阅附件中的截图图片。

如何解决此问题以使其在DatePicker下正确显示。

编辑：

这是xml代码。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:paddingBottom="20sp"
        android:text="@string/set_pill_text"
        android:textSize="25sp" />

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="@string/doctor_string" />

        <EditText
            android:id="@+id/doctorTxtField_new"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10"
            android:gravity="left"
            android:hint="@string/doctor_placeholder" >

            <requestFocus />
        </EditText>
    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center" >

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text="@string/time_string" />

        <DatePicker
            android:id="@+id/datePicker1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left" />
    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TimePicker
            android:id="@+id/timePicker1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </TableRow>

</TableLayout>

注意＃2：我添加了TimePicker左侧的文本视图，就像它上面的行一样，它显示得应该是这样。但无论何时，我删除第二个文本视图，我再次得到混乱的布局。如何在不弄乱布局的情况下做到这一点？