Search code examples
androidxmlandroid-constraintlayoutandroid-layout-editor

Running on real device shows different UI then in layout editor

I have built an alert cardview that pops up to prompt a response from the user. I am using constraint layout, and the view looks correct in the layout editor. I have even tested in on multiple screen sizes in the editor and the constraints work properly. But when I go running it on a real device the view doesn't follow the constraints.

Here is how it looks in the layout editor:

Layout Editor Image

This is how it shows up on a real device:

Real Device Image

Here is the XML script for the card view:

<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>

I am using the following relevant dependencies:

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

  • Both of your problems (the buttons at the bottom not being clipped by the card and the divider between buttons appearing too large) are caused by platform-version-specific behavior that is built into CardView. From the documentation:

    Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners. Instead, it adds padding to avoid such intersection

    I've run your code on an API 16 emulator, and I see the same problems you're having.

    You can try adding this attribute to your top-level <CardView> tag:

    app:cardPreventCornerOverlap="false"

    though this is not necessarily a magic fix-all.

    As for fixing the divider between buttons, is there a reason you're using a <CardView> tag for the divider? I just changed it to a <View> tag and it seems to work well:

    <View
    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"/>