When I switch to RelativeLayout, everything I put in the designs shows up in the top left corner of screen

Question

I switched from ConstraintLayout to RelativeLayout in Android studio, now everything I put in the design shows up in the top left for some reason.

I can drag and re-position it in Design, but writing padding is very time consuming and tiresome. I even changed the default to RelativeLayout but nothing changes.

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

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

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

I want to re-position them by dragging them on screen without them being stucked in the top left corner of the screen.

Answer 1

Yes, this is the property of RelativeLayout.

RelativeLayout needs you to tell the position relationship between widgets. If you don't specify the position relationship for all widgets, then all widgets will collapse to the (0, 0) of parent, which results in what you see,

everything I put in the design shows up in the top left.

To specify the relationship between widgets, you may use android:layout_* series property, for example:

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" /> <!-- this will at top left -->

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/textView"
    android:text="Button" /> <!-- this will at right of textView -->

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toBottomOf="@id/button"
    android:text="TextView" /> <!-- this will below button -->

You may try to specify them in Design Layout, however I found it is a little difficult.

1. Click a widget, then there will be circles around this widget.
2. Click on one circle, hold on. All widgets will have circles around.
3. Drag this circle to the circles of one other widget, this will make a connection between them, if you are using ConstraintLayout.
4. However, it seems impossible to do so if you are using RelativeLayout, since all widgets are collapsed to the same position.

See Android Guide to RelativeLayout for more details.