ConstraintLayout shown is terrible on older Android

Question

On newer Androids, app shows layout that is exactly how it is previewed on Android Studio, however, on older Androids ( tested 4.4.2 to 5 ), there seems to be a huge difference, especially on the size of cards and margins of each card ( and recyclerView ), making it ugly.

I tried using cardUseCompatPadding and cardPreventCornerOverlay but both doesn't work. Other than that, I've also tried layouts for different screen sizes (sw[ ]dp and h[ ]dp).

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:background="@color/colorOrange"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="10dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Spinner
            android:id="@+id/facultySpinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp" />

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/info_cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        app:layout_constraintEnd_toEndOf="@+id/cardView"
        app:layout_constraintStart_toStartOf="@+id/cardView"
        app:layout_constraintTop_toBottomOf="@+id/cardView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@android:color/transparent">

            <androidx.cardview.widget.CardView
                android:id="@+id/info_firstCard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="-20dp"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                app:cardCornerRadius="10dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/course"
                    android:textAlignment="center"
                    android:textColor="@android:color/widget_edittext_dark" />

            </androidx.cardview.widget.CardView>

            <androidx.cardview.widget.CardView
                android:id="@+id/info_secondCard"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                app:cardBackgroundColor="@android:color/holo_blue_light"
                app:cardCornerRadius="10dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="@string/group"
                    android:textAlignment="center"
                    android:textColor="@android:color/widget_edittext_dark" />

            </androidx.cardview.widget.CardView>
        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/transparent"
        app:layout_constraintBottom_toTopOf="@+id/button_cardView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/info_cardView">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:listitem="@layout/course_layout" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.cardview.widget.CardView
        android:id="@+id/button_cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="64dp"
        android:layout_marginEnd="64dp"
        android:layout_marginBottom="8dp"
        app:cardBackgroundColor="@android:color/holo_blue_bright"
        app:cardCornerRadius="20dp"
        app:cardElevation="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:cardPreventCornerOverlap="false">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/button_export"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:text="@string/export"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

The view I wanted ( New Android ) https://i.stack.imgur.com/Xvpte.jpg

The view on old Android https://i.stack.imgur.com/PaREr.jpg

score 0 · Answer 1 · answered Jul 19 '19 at 18:20

I would add guideline with app:layout_constraintGuide_percent to tell your views when to stop.

For example - consider this layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
  android:background="@color/colorOrange"
  tools:context=".MainActivity">


<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.25" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button6"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button6"
    app:layout_constraintTop_toTopOf="@+id/button6" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button7"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button7"
    app:layout_constraintTop_toTopOf="@+id/button7" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="8dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/guideline4"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button6" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintBottom_toBottomOf="@+id/button4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toTopOf="@+id/button4" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button4"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button7" />

<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="Button"
    app:layout_constraintBottom_toTopOf="@+id/button6"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

It will look like this:

Notice that because I was using guideline with app:layout_constraintGuide_percent="0.25" I can now Chain everything to this guideline and no matter how many views I will have they will only take 1/4 of the top screen size and this will make your layout responsive to all screen sizes.

Interesting share, that's new for me. Thanks for the info. I thought it'd solve the top part of the view, however.... https://imgur.com/a/nzwO6H0 Created the guide as you suggested except with percent of 0.1 — Ahrim Fakhriy, Jul 19 '19 at 21:06
That only means that you are giving your top views only 1/10 screen size so they look all smashed, you can add margins to make it look better or let your guideline be at 0.2 or something like this vertically. — Tamir Abutbul, Jul 19 '19 at 21:18

ConstraintLayout shown is terrible on older Android

1 Answers1