Расположение было смещено при просмотре в эмуляторе и на мобильном устройстве.

Question

Я реализую экран входа в систему при реализации его в Android Studio. Дизайн выглядит хорошо, но после сборки приложения на эмуляторе и на мобильном устройстве он выглядит странным, как будто элементы не на своем месте, растянуты и сжаты. Я использую нарисованный элемент разных размеров, потому что я хочу, чтобы это приложение поддерживало устройства с несколькими разрешениями.

Ниже изображение из XML предварительного просмотра

На картинке ниже скриншот эмулятора

Ниже изображение от Android устройства

здесь xml дизайн [ссылка] [4]

Что я тут делаю неправильно, любые предложения будут полезны

  [4]: https://pastebin.com/d9MPen7c

Answer 1

Проблема в том, что вы неправильно установили ограничения. Вот почему это выглядит хуже на реальных устройствах.

Вот код XML:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:gravity="center"
    android:orientation="vertical">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/tv_UserName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="100dp"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="24dp"
            android:text="User Name"
            android:textSize="18sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/et_UserName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:backgroundTint="#FFFFFF"
            android:ems="10"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_UserName" />

        <TextView
            android:id="@+id/tv_Password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:text="Password"
            android:textSize="18sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/et_UserName" />

        <EditText
            android:id="@+id/et_Password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="24dp"
            android:backgroundTint="#FFFFFF"
            android:ems="10"
            android:inputType="textPassword"
            app:layout_constraintBottom_toTopOf="@id/iv_google_bt"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tv_Password" />

        <ImageView
        android:id="@+id/iv_google_bt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp" 
        android:layout_marginTop="24dp" 
        android:layout_marginEnd="24dp" 
        android:layout_marginBottom="80dp"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_Password" />

    <ImageView
        android:id="@+id/iv_fb_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp" 
        android:layout_marginTop="24dp" 
        android:layout_marginEnd="24dp" 
        android:layout_marginBottom="80dp"
        android:layout_toStartOf="@+id/iv_google_bt"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/et_Password" />


    </androidx.constraintlayout.widget.ConstraintLayout>

    <ImageView
        android:id="@+id/iv_getstarted_login"
        android:layout_width="0dp"
        android:layout_height="75dp"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
        app:layout_constraintStart_toStartOf="@+id/constraintLayout"
        app:layout_constraintTop_toBottomOf="@id/constraintLayout">

    </ImageView>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="176dp"
        android:layout_height="172dp"
        android:contentDescription="@null"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
        app:layout_constraintEnd_toEndOf="@+id/constraintLayout"
        app:layout_constraintStart_toStartOf="@+id/constraintLayout"
        app:layout_constraintTop_toTopOf="@+id/constraintLayout" />

    <TextView
        android:id="@+id/login_signup"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_24dp"
        android:layout_marginBottom="16dp"
        android:gravity="center"
        android:text="Dummy text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/iv_getstarted_login" />


    <TextView
        android:id="@+id/notamem"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/_24dp"
        android:layout_marginBottom="16dp"
        android:gravity="center"
        android:text="Dummy text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_signup" />

</androidx.constraintlayout.widget.ConstraintLayout>

Я разместил свои ресурсы, такие как измерения, строки и рисование. Поэтому, пожалуйста, поменяйте свои ресурсы вместе с моими.

Answer 2

Вот мой пример кода для вашей проблемы. Отрегулируйте заданное значение stati c, например, значение drawable в этом коде, используя свои собственные ресурсы drawable. Надеюсь, я немного помогу тебе

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EBEBEB">


<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <View
        android:id="@+id/view"
        android:layout_width="300dp"
        android:layout_height="350dp"
        android:layout_centerInParent="true"
        android:background="@drawable/rectangle_round_view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" >
    </View>

    <ImageView
        android:id="@+id/img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_above="@+id/view"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="-45dp"
        android:background="@mipmap/ic_launcher"
        app:layout_constraintBottom_toTopOf="@id/view" />

    <TextView
        android:id="@+id/txtUsername"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img"
        android:layout_alignStart="@+id/view"
        android:layout_alignLeft="@+id/view"
        android:layout_alignEnd="@+id/view"
        android:layout_alignRight="@+id/view"
        android:layout_marginStart="36dp"
        android:layout_marginEnd="36dp"
        android:layout_marginTop="70dp"
        android:text="Username/Email" />

    <EditText
        android:id="@+id/et_UserName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtUsername"
        android:layout_alignStart="@+id/view"
        android:layout_alignLeft="@+id/view"
        android:layout_alignEnd="@+id/view"
        android:layout_alignRight="@+id/view"
        android:layout_marginStart="36dp"
        android:layout_marginEnd="36dp"
        android:layout_marginTop="5dp"/>
    <TextView
        android:id="@+id/txtPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_UserName"
        android:layout_alignStart="@+id/view"
        android:layout_alignLeft="@+id/view"
        android:layout_alignEnd="@+id/view"
        android:layout_alignRight="@+id/view"
        android:layout_marginStart="36dp"
        android:layout_marginEnd="36dp"
        android:layout_marginTop="10dp"
        android:text="Password" />

    <EditText
        android:id="@+id/et_Password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtPassword"
        android:layout_alignStart="@+id/view"
        android:layout_alignLeft="@+id/view"
        android:layout_alignEnd="@+id/view"
        android:layout_alignRight="@+id/view"
        android:layout_marginStart="36dp"
        android:layout_marginEnd="36dp"
        android:layout_marginTop="5dp"/>


    <ImageButton
        android:id="@+id/imgleft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@id/view"
        android:layout_alignBottom="@id/view"
        android:layout_marginBottom="40dp"
        android:layout_marginLeft="36dp"
        android:background="@drawable/emoji"
        android:layout_alignLeft="@id/view" />
    <ImageButton
        android:id="@+id/imgright"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@id/view"
        android:layout_alignBottom="@id/view"
        android:layout_marginBottom="40dp"
        android:layout_marginRight="36dp"
        android:background="@drawable/emoji"
        android:layout_alignRight="@id/view" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle_round"
        android:layout_below="@+id/view"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="-25dp"
        android:text="Get Started"
        android:textAlignment="center"
        android:paddingLeft="50dp"
        android:paddingRight="50dp"
        android:textAllCaps="false"
        app:layout_constraintBottom_toTopOf="@id/view"/>

    <TextView
        android:id="@+id/txtNotAMemberYet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="87dp"
        android:text="Not a member yet"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view" 
        app:layout_constraintBottom_toTopOf="@id/txtSignUp"
        />
    <TextView
        android:id="@+id/txtSignUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtNotAMemberYet"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Sign Up"
        android:textColor="#00BCD4"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</RelativeLayout>