android - 実際のデバイスで実行すると、レイアウト エディターとは異なる UI が表示されます

Question

ユーザーからの応答を促すためにポップアップする警告カードビューを作成しました。制約レイアウトを使用していますが、ビューはレイアウト エディターで正しく表示されます。エディターで複数の画面サイズをテストしたところ、制約が適切に機能しました。しかし、実際のデバイスで実行すると、ビューは制約に従いません。

レイアウト エディターでの表示は次のとおりです。

これは、実際のデバイスでどのように表示されるかです。

カード ビューの XML スクリプトは次のとおりです。

<android.support.v7.widget.CardView
    android:id="@+id/phoneCardView"
    android:layout_width="wrap_content"
    android:layout_height="300dp"
    android:layout_marginBottom="27dp"
    android:layout_marginEnd="32dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="24dp"
    android:alpha="1"
    android:clipChildren="true"
    android:visibility="visible"
    app:cardBackgroundColor="#333333"
    app:cardCornerRadius="15dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clipChildren="true">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="24dp"
            android:layout_marginStart="24dp"
            android:layout_marginTop="16dp"
            android:text="Your charger is just 3 clicks away!"
            android:textAlignment="center"
            android:textColor="#67bca2"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/errorMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:textColor="@android:color/holo_red_dark"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView5" />

        <EditText
            android:id="@+id/phoneNumber"
            android:layout_width="wrap_content"
            android:layout_height="44dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/textfieldbackground"
            android:ems="10"
            android:hint="PHONE NUMBER"
            android:inputType="phone"
            android:textAlignment="center"
            android:textColorHint="#4d000000"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/errorMessage" />

        <EditText
            android:id="@+id/promoCode"
            android:layout_width="wrap_content"
            android:layout_height="44dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/textfieldbackground"
            android:ems="10"
            android:hint="PROMO CODE"
            android:inputType="number"
            android:textAlignment="center"
            android:textColorHint="#4d000000"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/phoneNumber" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="44dp"
            android:background="#4dffffff"
            android:onClick="registerClick"
            android:text="Register"
            android:textAlignment="center"
            android:textAllCaps="false"
            android:textColor="#67bca2"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/button3" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="44dp"
            android:background="#4dffffff"
            android:onClick="cancelClick"
            android:text="Cancel"
            android:textAlignment="center"
            android:textAllCaps="false"
            android:textColor="#67bca2"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/button4"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent" />

        <android.support.v7.widget.CardView
            android:layout_width="1dp"
            android:layout_height="0dp"
            android:background="#333333"
            app:layout_constraintBottom_toBottomOf="@+id/button4"
            app:layout_constraintEnd_toStartOf="@+id/button4"
            app:layout_constraintTop_toTopOf="@+id/button4" />
    </android.support.constraint.ConstraintLayout>

</android.support.v7.widget.CardView>

次の関連する依存関係を使用しています。

'com.android.support:cardview-v7:25.4.0'
'com.android.support.constraint:constraint-layout:1.0.2'