How can I create three buttons such that only the first appears, and once it is clicked it is replaced by two side-by-side buttons in it's place? These buttons should be centered. 

[![First button](https://i.stack.imgur.com/gpVEf.png)](https://i.stack.imgur.com/gpVEf.png)

[![Two buttons that appear once the entered button is pressed](https://i.stack.imgur.com/cyyia.png)](https://i.stack.imgur.com/cyyia.png)

This is what I have so far:

```
<Button
            android:id="@+id/enter_button"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:padding="5dp"
            android:text="@string/enter_button"
            android:textColor="#FFFFFF" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/buttons_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal"
        android:padding="30dp" >

        <Button
            android:id="@+id/clear_button"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:text="@string/clear_button"
            android:textColor="#FFFFFF" />

        <Button
            android:id="@+id/reserve_button"
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:padding="5dp"
            android:text="@string/reserve_button"
            android:textColor="#FFFFFF" />

    </LinearLayout>

```

But this causes the two side-by-side buttons to appear below the first one (not directly over it). I already know how to use setVisibility to make the enter button disappear.