EditText overflowing into button

Question

I have an EditText and a Button in my fragment activity.

I'm facing two issues.

1) I cannot put the Button, exactly below the EditText.

Here, is the screenshot :

2) Whenever I paste lengthy text in the EditText, button is overlapping with the text. See this screenshot:

Here is my XML:

      <FrameLayout>

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/editText"
            android:text="@string/URL"
            android:hint="@string/hint"
            android:layout_marginTop="200dp"
            android:layout_gravity="center_horizontal|top" />
    
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Track"
            android:id="@+id/button"
            android:layout_gravity="center"
            />
    
       </FrameLayout>

How can I solve the issue?

Answer 1

Instead of using a FrameLayout, you might want to consider using a RelativeLayout. Then you can do the following:

For the EditText, use the following attribute:

// This says the widget should be vertically and horizontally at the center of the container
android:layout_centerInParent="true"

For the Button, use the following attribute:

android:layout_below:"@id/editText"

The attributes that I have mentioned will replace the

android:layout_gravity

attributes for both the widgets you have used.

Also the EditText will lose the

android:layout_marginTop="200dp"

attribute as the layout_centerInParent attribute will automatically center it.