模拟器中应用程序的设计与预览不同

Question

Created an activity design. Launched id order to check everything. It turned out that the design for the preview is different from the desigh itself in the emulator (Awful gradient and buttons overlap each other).

I am new to this. Help me please.

first

second

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200sp"
        android:fontFamily="sans-serif-light"
        android:text="Введите данные"
        android:textColor="@color/colorWhite"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/MainActivity_EditText_Email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30sp"
        android:layout_marginTop="30sp"
        android:layout_marginEnd="30sp"
        android:background="@drawable/edit_text_style"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:hint="Email"
        android:textColor="@color/colorBackground"
        android:textSize="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/MainActivity_EditText_UserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30sp"
        android:layout_marginTop="30sp"
        android:layout_marginEnd="30sp"
        android:background="@drawable/edit_text_style"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:hint="Имя пользователя"
        android:textColor="@color/colorBackground"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_Email" />

    <EditText
        android:id="@+id/MainActivity_EditText_Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30sp"
        android:layout_marginTop="30sp"
        android:layout_marginEnd="30sp"
        android:background="@drawable/edit_text_style"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:hint="Пароль"
        android:textColor="@color/colorBackground"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_UserName" />

    <Button
        android:id="@+id/MainActivity_Button_Login"
        android:layout_width="100sp"
        android:layout_height="30sp"
        android:layout_marginTop="50sp"
        android:background="@drawable/button_style"
        android:fontFamily="sans-serif-light"
        android:text="Войти"
        app:layout_constraintStart_toStartOf="@+id/MainActivity_EditText_Password"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_Password" />

    <Button
        android:id="@+id/MainActivity_Button_Register"
        android:layout_width="230sp"
        android:layout_height="30sp"
        android:layout_marginStart="20sp"
        android:layout_marginTop="50sp"
        android:background="@drawable/button_style"
        android:fontFamily="sans-serif-light"
        android:text="Регистрация"
        app:layout_constraintEnd_toEndOf="@+id/MainActivity_EditText_Password"
        app:layout_constraintStart_toEndOf="@+id/MainActivity_Button_Login"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_Password" />


</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

add this line app:layout_constraintEnd_toStartOf="@+id/MainActivity_Button_Register" like

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="200sp"
        android:fontFamily="sans-serif-light"
        android:text="Введите данные"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/MainActivity_EditText_Email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30sp"
        android:layout_marginTop="30sp"
        android:layout_marginEnd="30sp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:hint="Email"
        android:textSize="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/MainActivity_EditText_UserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30sp"
        android:layout_marginTop="30sp"
        android:layout_marginEnd="30sp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:hint="Имя пользователя"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_Email" />

    <EditText
        android:id="@+id/MainActivity_EditText_Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30sp"
        android:layout_marginTop="30sp"
        android:layout_marginEnd="30sp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:hint="Пароль"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_UserName" />

    <Button
        android:id="@+id/MainActivity_Button_Login"
        android:layout_width="0sp"
        android:layout_height="47dp"
        android:layout_marginTop="50sp"
        android:fontFamily="sans-serif-light"
        android:text="Войти"
        app:layout_constraintEnd_toStartOf="@+id/MainActivity_Button_Register"
        app:layout_constraintStart_toStartOf="@+id/MainActivity_EditText_Password"
        app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_Password" />

    <Button
        android:id="@+id/MainActivity_Button_Register"
        android:layout_width="0dp"
        android:layout_height="47dp"
        android:layout_marginStart="20sp"
        android:layout_marginTop="50sp"
        android:fontFamily="sans-serif-light"
        android:text="Регистрация"`enter code here`
        app:layout_constraintEnd_toEndOf="@+id/MainActivity_EditText_Password"
        app:layout_constraintStart_toEndOf="@+id/MainActivity_Button_Login"
     app:layout_constraintTop_toBottomOf="@+id/MainActivity_EditText_Password" />

one thing if your device screen is small than overlapping can happen for fix width. you can decrease you width or make it 0dp with proper constraint.