The layout is overlapping after running app in ConstraintLayout

I created a profile layout and in XML file it looks like this :

but, when I run my project, it looks like this :

This is my XML code if it helps :

<?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"      tools:context=".Profile.ProfileFragment"      android:background="@drawable/main_activity">        <de.hdodenhof.circleimageview.CircleImageView          android:id="@+id/profile_photo"          android:layout_width="80dp"          android:layout_height="80dp"          android:layout_centerVertical="true"          app:civ_border_color="@color/black"          app:civ_border_width="2dp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.486"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.164" />        <androidx.appcompat.widget.AppCompatButton          android:id="@+id/buttonFollow"          android:layout_width="83dp"          android:layout_height="31dp"          android:layout_alignParentStart="true"          android:layout_alignParentTop="true"          android:layout_alignParentEnd="true"          android:layout_alignParentBottom="true"          android:background="@drawable/buton_follow"          android:fontFamily="@font/segoe_ui"          android:text="Follow"          android:textColor="@color/white"          android:textSize="15dp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.481"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toBottomOf="@+id/profile_photo"          app:layout_constraintVertical_bias="0.04" />        <TextView          android:id="@+id/display_name"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginTop="20dp"          android:fontFamily="@font/segoe_ui_bold"          android:text="Calin Alexandra"          android:textColor="@color/black"          android:textSize="25sp"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toBottomOf="@+id/buttonFollow" />        <TextView          android:id="@+id/description"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:fontFamily="@font/segoe_ui"          android:text="Cook lover"          android:textColor="@color/black"          android:textSize="16sp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.471"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toBottomOf="@+id/display_name"          app:layout_constraintVertical_bias="0.023" />        <TextView          android:id="@+id/website"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginTop="8dp"          android:fontFamily="@font/segoe_ui"          android:text="www.cook.ro"          android:textColor="@color/link_blue"            android:textSize="16sp"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.47"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toBottomOf="@+id/description" />        <TextView          android:id="@+id/tvPosts"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:fontFamily="@font/segoe_ui"          android:text="250"          android:textColor="@color/black"          android:textSize="18sp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.29"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.472" />        <TextView          android:id="@+id/textPosts"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginStart="112dp"          android:layout_marginTop="4dp"          android:fontFamily="@font/segoe_ui"          android:text="Posts"          android:textColor="@color/black"          android:textSize="12sp"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toBottomOf="@+id/tvPosts" />        <TextView          android:id="@+id/tvFollowers"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:fontFamily="@font/segoe_ui"          android:text="300"          android:textColor="@color/black"          android:textSize="18sp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.471" />        <TextView          android:id="@+id/textFollowers"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginTop="4dp"          android:fontFamily="@font/segoe_ui"          android:text="Followers"          android:textColor="@color/black"          android:textSize="12sp"          app:layout_constraintEnd_toStartOf="@+id/textFollowing"          app:layout_constraintHorizontal_bias="0.606"          app:layout_constraintStart_toEndOf="@+id/textPosts"          app:layout_constraintTop_toBottomOf="@+id/tvFollowers" />        <TextView          android:id="@+id/tvFollowing"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginEnd="112dp"          android:fontFamily="@font/segoe_ui"          android:text="400"          android:textColor="@color/black"          android:textSize="18sp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.471" />        <TextView          android:id="@+id/textFollowing"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginTop="4dp"          android:layout_marginEnd="100dp"          android:fontFamily="@font/segoe_ui"          android:text="Following"          android:textColor="@color/black"          android:textSize="12sp"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintTop_toBottomOf="@+id/tvFollowing" />        <TextView          android:id="@+id/textEditProfile"          android:layout_width="198dp"          android:layout_height="22dp"          android:background="@drawable/text_user_pass"          android:text="Edit your profile"          android:textAlignment="center"          android:textColor="@color/black"          android:textSize="14sp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toBottomOf="@+id/textFollowers"          app:layout_constraintVertical_bias="0.054"          android:fontFamily="@font/segoe_ui"/>        <androidx.appcompat.widget.AppCompatButton          android:id="@+id/buton_mesaj"          android:layout_width="31dp"          android:layout_height="30dp"          android:background="@drawable/ic_message"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.855"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.02" />        <androidx.appcompat.widget.AppCompatButton          android:id="@+id/buton_setari"          android:layout_width="31dp"          android:layout_height="30dp"          android:background="@drawable/ic_settings"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toEndOf="parent"          app:layout_constraintHorizontal_bias="0.111"          app:layout_constraintStart_toEndOf="@+id/buton_mesaj"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.02" />        <TextView          android:id="@+id/username"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="alecalin36"          android:textColor="@color/black"          android:textSize="15sp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintEnd_toStartOf="@+id/buton_mesaj"          app:layout_constraintHorizontal_bias="0.062"          app:layout_constraintStart_toStartOf="parent"          app:layout_constraintTop_toTopOf="parent"          app:layout_constraintVertical_bias="0.019" />        <GridView          android:id="@+id/gridView"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:gravity="center"          android:horizontalSpacing="1dp"          android:numColumns="3"          android:stretchMode="columnWidth"          android:verticalSpacing="1dp"          app:layout_constraintBottom_toBottomOf="parent"          app:layout_constraintTop_toBottomOf="@+id/textFollowers">        </GridView>    </androidx.constraintlayout.widget.ConstraintLayout>    

I want to mention that all the items(TextView, Button) have been added only with drag and drop and after that, I connected them to edges and items around to stay in the same place but unfortunately this is not happening.

Also, I did the same thing with my Login layout and I don't have any problem.

Does this problem have to do with the fact that the username, description, etc from the second photo are taken from firebase?? How to solve this problem?

https://stackoverflow.com/questions/66700744/the-layout-is-overlapping-after-running-app-in-constraintlayout March 19, 2021 at 07:54AM