UPD : The problem was solved by switching the tab with themes in AS to DeviceDefault.Light.NoActionBar

Good day. There is the following problem: when marking up items in Android Studio, the preview shows one button layout. When testing an application on a real device, the buttons are arranged differently, but the point is that only the buttons do not correspond to reality, the other elements are in order

AndroidStudio

Android Studio

Real device

it looks like this on a real device

XML Markup

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="150dp" android:layout_height="150dp" android:id="@+id/companyLogo" android:layout_alignWithParentIfMissing="false" android:layout_alignParentEnd="false" android:layout_alignParentStart="false" android:layout_centerHorizontal="true" android:layout_alignBottom="@+id/slider" /> <ru.timuruktus.waroll.Model.ExtendedSliderLayout android:id="@+id/slider" android:layout_width="match_parent" android:layout_height="250dp" android:foreground="@drawable/top_join_alpha" android:layout_alignParentStart="false" /> <TextView android:layout_width="match_parent" android:layout_height="25dp" android:text="@string/join_email" android:id="@+id/yourEmail" android:layout_below="@+id/companyLogo" android:layout_centerHorizontal="true" android:textAlignment="center" android:textSize="20dp" android:background="#fcfcfc" /> <EditText android:layout_width="match_parent" android:layout_height="45dp" android:inputType="textEmailAddress" android:ems="10" android:id="@+id/editEmail" android:layout_below="@+id/yourEmail" android:layout_centerHorizontal="true" /> <TextView android:layout_width="match_parent" android:layout_height="25dp" android:text="@string/join_pass" android:id="@+id/yourPass" android:layout_below="@+id/editEmail" android:layout_centerHorizontal="true" android:textAlignment="center" android:textSize="20dp" android:background="#fcfcfc" /> <EditText android:layout_width="match_parent" android:layout_height="45dp" android:inputType="textPassword" android:ems="10" android:id="@+id/editPass" android:layout_below="@+id/yourPass" android:layout_centerHorizontal="true" /> <Button android:layout_width="match_parent" android:layout_height="50dp" android:text="@string/join_join" android:id="@+id/join" android:layout_below="@+id/editPass" android:layout_centerHorizontal="true" android:layout_marginLeft="100dp" android:textColor="#ffffff" android:background="@color/colorPrimary" /> <Button android:layout_width="match_parent" android:layout_height="50dp" android:text="@string/join_reg" android:id="@+id/button" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginLeft="100dp" android:background="#e3e3e3" android:layout_marginBottom="40dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/join_forgot_pass" android:id="@+id/forgottenPass" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:textColor="@color/colorPrimaryDark" android:textStyle="bold" />

    1 answer 1

    If you wanted the buttons to be under each other, the markup of the second button should be like this:

     <Button android:layout_width="match_parent" android:layout_height="50dp" android:text="@string/join_reg" android:id="@+id/button" android:layout_below="@+id/join" android:layout_centerHorizontal="true" android:layout_marginLeft="100dp" android:background="#e3e3e3" android:layout_marginBottom="40dp" />

    Android Studio shows the location of the buttons on the screen of a specific device. In the XML editing window, you can choose on which device and in which position of the screen to view the markup. Naturally, on different screens the location will somehow be different.