Пользовательский интерфейс в режиме конструктора не отображается одинаково в эмуляторе

Question

У меня есть дизайн, созданный с помощью ConstraintLayout. На панели дизайна это нормально, но когда я запускаю его на эмуляторе, это не то же самое. Ниже изображение того, как это выглядит в представлении дизайна

А вот как это выглядит на эмуляторе.

Фрагмент манифеста

 <activity

    android:theme="@style/Theme.MaterialComponents.Light.DarkActionBar"
 android:name=".WelcomeActivity" />

У меня установлены эти implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:design:28.0.0'

• compileSdkVersion 28
• minSdkVersion 16
• targetSdkVersion 28

Я расширил AppCompatActivity для класса WecomeActivity. Я также пытался сделать недействительным кеш и перезапустить, но он не работает. Я понятия не имею, что вызывает это. Спасибо за помощь.

Вот код для этого.

activity_welcome.yml

<?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=".WelcomeActivity">

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="96dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:text="@string/safe"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="45dp"
    android:layout_height="20dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="20dp"
    android:text="@string/cheap"
    app:layout_constraintBottom_toTopOf="@+id/textView3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="411dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:contentDescription="@string/todo"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.515"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    tools:srcCompat="@drawable/guliver_go_logo" />

<TextView
    android:id="@+id/textView"
    android:layout_width="70dp"
    android:layout_height="20dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="8dp"
    android:text="@string/convinient"
    app:layout_constraintBottom_toTopOf="@+id/textView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView" />

<Button
    android:id="@+id/welcome_login_button"
    style="@style/Widget.MaterialComponents.Button.TextButton"
    android:layout_width="141dp"
    android:layout_height="63dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="88dp"
    android:layout_weight="1"
    android:background="@drawable/button_login_rounded"
    android:text="@string/start_phone_auth"
    android:textColor="@color/colorPrimaryDark"
    android:textSize="20sp"
    app:backgroundTint="@color/login_button_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.275"
    app:layout_constraintStart_toStartOf="parent" />

 <Button
    android:id="@+id/welcome_call_button"

 style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
    android:layout_width="141dp"
    android:layout_height="63dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="9dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginBottom="88dp"
    android:layout_weight="1"
    android:background="@drawable/button_call_rounded"
    android:drawablePadding="5dp"
    android:paddingLeft="40dp"
    android:paddingRight="40dp"
    app:backgroundTint="@color/call_button_color"
    app:icon="@drawable/ic_call"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.83"
    app:layout_constraintStart_toStartOf="parent" />

 </android.support.constraint.ConstraintLayout>

Answer 1

Вот макет, так как вы можете пропустить какое-то ограничение изображения или назначить неправильное ограничение изображения.

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


    <ImageView
            android:layout_width="0dp"
            android:layout_height="400dp" tools:srcCompat="@tools:sample/avatars[1]"
            android:id="@+id/imageView" app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text One"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView" android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text Two"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toBottomOf="@+id/textView" android:layout_marginTop="8dp"/>
    <TextView
            android:text="TextView"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView3" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <Button
            android:text="Phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintBaseline_toBaselineOf="@+id/button2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"/>
    <Button
            android:text="Call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
            app:layout_constraintStart_toEndOf="@+id/button" android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>


</android.support.constraint.ConstraintLayout>

или с помощью панели инструментов Установить тему как Theme.MaterialComponents.Light.NoActionBar не так, как это Theme.MaterialComponents.Light.DarkActionBar . Затем примените

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

    <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/toolbar" app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/>

    <ImageView
            android:layout_width="0dp"
            android:layout_height="400dp" tools:srcCompat="@tools:sample/avatars[1]"
            android:id="@+id/imageView" app:layout_constraintTop_toBottomOf="@id/toolbar"
            android:layout_marginTop="32dp" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text One"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView" android:layout_marginTop="24dp"
            app:layout_constraintTop_toBottomOf="@+id/imageView" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <TextView
            android:text="Text Two"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toBottomOf="@+id/textView" android:layout_marginTop="8dp"/>
    <TextView
            android:text="TextView"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/textView3" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textView2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp"/>
    <Button
            android:text="Phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            app:layout_constraintBaseline_toBaselineOf="@+id/button2" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="32dp" app:layout_constraintEnd_toStartOf="@+id/button2"
            app:layout_constraintHorizontal_bias="0.5"/>
    <Button
            android:text="Call"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="32dp"
            app:layout_constraintStart_toEndOf="@+id/button" android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/textView3" app:layout_constraintHorizontal_bias="0.5"/>


</android.support.constraint.ConstraintLayout>

Для телефонов с небольшим экраном добавьте ScrollView After ConstraintLayout (только если у вашей разработки экран телефона <5.0). </strong>