Android-макет не соответствует устройству [Android Studio]

Question

Привет, я новичок в использовании android studio и не понимаю, почему макет, который я вижу в предварительном просмотре IDE, не совпадает с тем, который я вижу на моем экране.Я использую Samsung J7 Prime.

Это то, что я вижу в предварительном просмотре

Однако это то, что я вижу на моем устройстве.

Пожалуйста, помогите, заранее спасибо.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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_marginStart="65dp"
        android:layout_marginEnd="32dp"
        android:text="@string/original_price"
        app:layout_constraintBaseline_toBaselineOf="@+id/etNum1"
        app:layout_constraintEnd_toStartOf="@+id/etNum1"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="6dp"
        android:layout_marginEnd="60dp"
        android:text="@string/rate"
        app:layout_constraintEnd_toStartOf="@+id/etNum2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etNum2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:layout_marginEnd="61dp"
        android:text="@string/discount"
        app:layout_constraintEnd_toStartOf="@+id/etNum3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etNum3" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="65dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="46dp"
        android:text="@string/sales_price"
        app:layout_constraintEnd_toStartOf="@+id/etNum4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/etNum4" />

    <EditText
        android:id="@+id/etNum1"
        android:layout_width="0dp"
        android:layout_height="39dp"
        android:layout_marginTop="101dp"
        android:layout_marginEnd="75dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/etNum2"
        android:layout_width="0dp"
        android:layout_height="37dp"
        android:layout_marginTop="79dp"
        android:layout_marginEnd="72dp"
        android:layout_marginBottom="80dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum2"
        app:layout_constraintBottom_toBottomOf="@+id/etNum3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="@+id/textView" />

    <EditText
        android:id="@+id/etNum3"
        android:layout_width="0dp"
        android:layout_height="34dp"
        android:layout_marginTop="143dp"
        android:layout_marginEnd="76dp"
        android:layout_marginBottom="143dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum3"
        app:layout_constraintBottom_toTopOf="@+id/calculate"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:editable="false"/>

    <EditText
        android:id="@+id/etNum4"
        android:layout_width="0dp"
        android:layout_height="39dp"
        android:layout_marginTop="47dp"
        android:layout_marginEnd="72dp"
        android:autofillHints=""
        android:ems="10"
        android:inputType="number"
        android:labelFor="@id/etNum4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4"
        app:layout_constraintTop_toBottomOf="@+id/etNum3"
        android:editable="false"/>

    <Button
        android:id="@+id/calculate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="14dp"
        android:layout_marginBottom="229dp"
        android:text="@string/compute"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4" />

    <Button
        android:id="@+id/clear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="29dp"
        android:text="@string/erase"
        app:layout_constraintStart_toStartOf="@+id/calculate"
        app:layout_constraintTop_toBottomOf="@+id/calculate" />

</android.support.constraint.ConstraintLayout>

Answer 1

Вы используете фиксированный размер во многих местах для своих просмотров (например, android:layout_marginTop="79dp" и android:layout_height="37dp").

• Поскольку разные телефоны получили разные размеры экрана, когдавы используете фиксированный размер для вашего вида, что делает ваш макет менее отзывчивым.

• Если вы хотите разместить какой-либо вид в любом месте экрана, я бы порекомендовал использовать guielines и ограничьте свои виды в качестве ориентира, а не присвойте своему виду фиксированное значение размера, чтобы соответствовать предварительному просмотру (не забывайте, что при фиксированных размерах то, что может соответствовать одному экрану, может не соответствовать другому экрану).

• Для желаемого макета вы можете просто использовать цепочки .

Вот пример макета, который вы хотите достичь с помощью cnostraintLayout ицепи:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/original_price"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toStartOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/rate"
    app:layout_constraintBottom_toTopOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/discount"
    app:layout_constraintBottom_toTopOf="@+id/textView4"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView2" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="@string/sales_price"
    app:layout_constraintBottom_toTopOf="@+id/calculate"
    app:layout_constraintEnd_toEndOf="@+id/textView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/textView"
    app:layout_constraintTop_toBottomOf="@+id/textView3" />

<EditText
    android:id="@+id/etNum1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum1"
    app:layout_constraintBottom_toBottomOf="@+id/textView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="@+id/textView" />

<EditText
    android:id="@+id/etNum2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum2"
    app:layout_constraintBottom_toBottomOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/etNum1"
    app:layout_constraintTop_toTopOf="@+id/textView2" />

<EditText
    android:id="@+id/etNum3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:editable="false"
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum3"
    app:layout_constraintBottom_toBottomOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/etNum1"
    app:layout_constraintTop_toTopOf="@+id/textView3" />

<EditText
    android:id="@+id/etNum4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:autofillHints=""
    android:editable="false"
    android:ems="10"
    android:inputType="number"
    android:labelFor="@id/etNum4"
    app:layout_constraintBottom_toBottomOf="@+id/textView4"
    app:layout_constraintEnd_toEndOf="@+id/etNum1"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/etNum1"
    app:layout_constraintTop_toTopOf="@+id/textView4" />

<Button
    android:id="@+id/calculate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:text="compute"
    app:layout_constraintBottom_toTopOf="@+id/clear"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView4" />

<Button
    android:id="@+id/clear"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="erase"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="@+id/calculate"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="@+id/calculate"
    app:layout_constraintTop_toBottomOf="@+id/calculate" />

</android.support.constraint.ConstraintLayout>

И это будет выглядеть так:

Answer 2

Удалите все ограничения сверху и переназначьте их в соответствии с тем, что должно быть поверх, например, textView должно быть поверх textView1 Goodluck

Answer 3

Попробуйте это:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    android:gravity="center">

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


    <EditText
        android:id="@+id/etNum1"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 1"
        android:inputType="number"
        android:labelFor="@id/etNum1" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center">

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


    <EditText
        android:id="@+id/etNum2"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 2"
        android:inputType="number"
        android:labelFor="@id/etNum1" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title 3" />


    <EditText
        android:id="@+id/etNum3"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 3"
        android:inputType="number"
        android:labelFor="@id/etNum1" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:gravity="center">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title 4" />


    <EditText
        android:id="@+id/etNum4"
        android:layout_width="wrap_content"
        android:layout_height="39dp"
        android:layout_marginStart="20dp"
        android:ems="10"
        android:hint="Title 4"
        android:inputType="number"
        android:labelFor="@id/etNum1" />

</LinearLayout>


<Button
    android:id="@+id/calculate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp"
    android:text="Button 1" />

<Button
    android:id="@+id/clear"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dp"
    android:text="Button 2" />
</LinearLayout>