Android App Layout collapses on physical device

Question

The layouts and elements in Android Studio look exactly how I want it to be but as soon as I install the APK on my device, the layout collapses. All views are collapsed one on top of another which is not what was shown in Android Studio's preview...

I'm using linear layouts and relative layout. I had used android studio 1-2yrs ago and there was no such thing as constrained layout, now every time I create a layout I get an constrained error.

XML Main activity (only one):

<?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="com.simultaneousequations.spacelaunchx.spacelaunchx.MainActivity">

    <LinearLayout
        android:id="@+id/linearLayoutTop"
        android:layout_width="0dp"
        android:layout_height="101dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="11dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/linearLayoutCenter"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <RelativeLayout
            android:id="@+id/relativeLayoutTop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorLightGrey">

            <LinearLayout
                android:id="@+id/linearLayoutTopImage"
                android:layout_width="110dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/iridumNEXT40_50"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_weight="1"
                    android:adjustViewBounds="false"
                    android:cropToPadding="false"
                    android:scaleType="fitStart"
                    app:srcCompat="@mipmap/iridiummission5" />
            </LinearLayout>

            <TextView
              android:id="@+id/iridium5Text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="12dp"
              android:layout_toEndOf="@+id/linearLayoutTopImage"
              android:layout_toRightOf="@+id/linearLayoutTopImage"
              android:fontFamily="sans-serif-condensed"
              android:text="Iridium NEXT 40 50"
              android:textAlignment="textStart"
              android:textAllCaps="false"
              android:textAppearance="@style/TextAppearance.AppCompat.Body1"
              android:textColor="@color/colorRedDragon"
              android:textSize="16sp"
              android:textStyle="bold|italic" />

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout

        android:id="@+id/linearLayoutCenter"
        android:layout_width="400dp"
        android:layout_height="101dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="101dp"
            android:background="@color/colorLightGrey"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="109dp">

            <LinearLayout
                android:id="@+id/linearLayoutCenterImage"
                android:layout_width="110dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/crs14"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_weight="1"
                    android:scaleType="fitStart"
                    app:srcCompat="@mipmap/crs14" />
            </LinearLayout>

            <TextView
              android:id="@+id/crs14Text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              ndroid:layout_marginTop="16dp"
              android:layout_toEndOf="@+id/linearLayoutCenterImage"
              android:layout_toRightOf="@+id/linearLayoutCenterImage"
              android:fontFamily="sans-serif-condensed"
              android:text="SpaceX NASA - CRS-14"
              android:textAlignment="center"
              android:textAllCaps="false"
              android:textAppearance="@style/TextAppearance.AppCompat.Body1"
              android:textColor="@color/colorRedDragon"
              android:textSize="18sp"
              android:textStyle="bold|italic" />

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout

        android:id="@+id/linearLayoutCenterBottom"
        android:layout_width="400dp"
        android:layout_height="101dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="101dp"
            android:background="@color/colorLightGrey"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="109dp">

            <LinearLayout
                android:id="@+id/linearLayoutCenterBottomImage"
                android:layout_width="110dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/bhu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_weight="1"
                    android:scaleType="fitCenter"
                    app:srcCompat="@mipmap/spacexlogo"
                    tools:layout_editor_absoluteX="0dp"
                    tools:layout_editor_absoluteY="101dp" />
            </LinearLayout>

            <TextView
               android:id="@+id/bhuText"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentTop="true"
               android:layout_marginTop="12dp"
               android:layout_toEndOf="@+id/linearLayoutCenterBottomImage"
               android:layout_toRightOf="@+id/linearLayoutCenterBottomImage" 
               android:fontFamily="sans-serif-condensed"
               android:text="Bangabandhu-1"
               android:textAlignment="center"
               android:textAllCaps="false"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="@color/colorRedDragon"
                android:textSize="18sp"
                android:textStyle="bold|italic" />

        </RelativeLayout>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

What am I doing wrong?

Answer 1

Seems like you're not familiar with ConstraintLayout .

That's OK. Don't use ConstraintLayout when you don't want to use it. Using this is not necessary.

What you have to do is just change the root layout to either LinearLayout , RelativeLayout or any other Layout you want to use as per your requirements.

I'm giving you the code that you should use in this case. In that code, I'm using RelativeLayout as the root layout, because you are using layout_alignParentBottom like attributes.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout
    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="com.companys.appx.appx.MainActivity">

    <LinearLayout
        android:id="@+id/linearLayoutTop"
        android:layout_width="0dp"
        android:layout_height="101dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="11dp"
        android:orientation="vertical">

        <RelativeLayout
            android:id="@+id/relativeLayoutTop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorLightGrey">

            <LinearLayout
                android:id="@+id/linearLayoutTopImage"
                android:layout_width="110dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/iridumNEXT40_50"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_weight="1"
                    android:adjustViewBounds="false"
                    android:cropToPadding="false"
                    android:scaleType="fitStart"
                    app:srcCompat="@mipmap/iridiummission5" />
            </LinearLayout>

            <TextView
              android:id="@+id/iridium5Text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="12dp"
              android:layout_toEndOf="@+id/linearLayoutTopImage"
              android:layout_toRightOf="@+id/linearLayoutTopImage"
              android:fontFamily="sans-serif-condensed"
              android:text="Iridium NEXT 40 50"
              android:textAlignment="textStart"
              android:textAllCaps="false"
              android:textAppearance="@style/TextAppearance.AppCompat.Body1"
              android:textColor="@color/colorRedDragon"
              android:textSize="16sp"
              android:textStyle="bold|italic" />

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayoutCenter"
        android:layout_width="400dp"
        android:layout_height="101dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="101dp"
            android:background="@color/colorLightGrey"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="109dp">

            <LinearLayout
                android:id="@+id/linearLayoutCenterImage"
                android:layout_width="110dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/crs14"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_weight="1"
                    android:scaleType="fitStart"
                    app:srcCompat="@mipmap/crs14" />
            </LinearLayout>

            <TextView
              android:id="@+id/crs14Text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentTop="true"
              android:layout_marginTop="16dp"
              android:layout_toEndOf="@+id/linearLayoutCenterImage"
              android:layout_toRightOf="@+id/linearLayoutCenterImage"
              android:fontFamily="sans-serif-condensed"
              android:text="SpaceX NASA - CRS-14"
              android:textAlignment="center"
              android:textAllCaps="false"
              android:textAppearance="@style/TextAppearance.AppCompat.Body1"
              android:textColor="@color/colorRedDragon"
              android:textSize="18sp"
              android:textStyle="bold|italic" />

        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayoutCenterBottom"
        android:layout_width="400dp"
        android:layout_height="101dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="101dp"
            android:background="@color/colorLightGrey"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="109dp">

            <LinearLayout
                android:id="@+id/linearLayoutCenterBottomImage"
                android:layout_width="110dp"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/bhu"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_alignParentTop="true"
                    android:layout_weight="1"
                    android:scaleType="fitCenter"
                    app:srcCompat="@mipmap/spacexlogo"
                    tools:layout_editor_absoluteX="0dp"
                    tools:layout_editor_absoluteY="101dp" />
            </LinearLayout>

            <TextView
               android:id="@+id/bhuText"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_alignParentTop="true"
               android:layout_marginTop="12dp"
               android:layout_toEndOf="@+id/linearLayoutCenterBottomImage"
               android:layout_toRightOf="@+id/linearLayoutCenterBottomImage" 
               android:fontFamily="sans-serif-condensed"
               android:text="Bangabandhu-1"
               android:textAlignment="center"
               android:textAllCaps="false"
               android:textAppearance="@style/TextAppearance.AppCompat.Body1"
               android:textColor="@color/colorRedDragon"
               android:textSize="18sp"
               android:textStyle="bold|italic" />

        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

If there is any mistake(typo) in the code change it.

The only point is to use RelativeLayout as the root Layout instead of ConstraintLayout

In the above code, I've removed all the ConstraintLayout Attributes from the first LinearLayout because the root Layout is no more a ConstraintLayout .

This Trick will remove the problem. The problem was occurring because ContraintLayout has its own rules that you were not following. But now as you've changed the root Layout the problem will no longer exist.