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:
This is how it shows up on a real device:
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'
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: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: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: