Input Text, Image and button stuck at the top left corner

March 5, 2022

I’m just new to kotlin and now trying to design the profile page just like the image below in android studio.

When I am designing the profile page, I realize that the design in the application is display correctly. So, I run the project in a phone simulator and then everything stuck on the top left corner. After that, I trying to add a relative layout but the result still the same. May I know which part I do wrong or is there any solution?

Below is the coding

<?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=".MainActivity"
android:background="@color/white">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/white">


<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="141dp"
    tools:layout_editor_absoluteY="98dp"
    tools:srcCompat="@tools:sample/avatars"
    android:contentDescription="@string/app_name"/>

<EditText
    android:id="@+id/editTextTextPersonName2"
    android:layout_width="175dp"
    android:layout_height="48dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="@string/first_name"
    android:textStyle="bold"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="265dp" />

<EditText
    android:id="@+id/editTextTextPersonName3"
    android:layout_width="175dp"
    android:layout_height="48dp"
    android:ems="10"
    android:inputType="textPersonName"
    android:text="@string/last_name"
    android:textStyle="bold"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="220dp"
    tools:layout_editor_absoluteY="265dp" />

<EditText
    android:id="@+id/editTextTextEmailAddress"
    android:layout_width="379dp"
    android:layout_height="48dp"
    android:ems="10"
    android:inputType="textEmailAddress"
    android:text="@string/email"
    android:textStyle="bold"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="333dp" />

<EditText
    android:id="@+id/editTextTextPassword"
    android:layout_width="379dp"
    android:layout_height="48dp"
    android:ems="10"
    android:text="@string/password"
    android:textStyle="bold"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="407dp"
    android:inputType="textVisiblePassword"/>
    <!--android:inputType="textPassword"-->

<EditText
    android:id="@+id/editTextTextPassword2"
    android:layout_width="379dp"
    android:layout_height="48dp"
    android:ems="10"
    android:text="@string/confirm_password"
    android:textStyle="bold"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="479dp"
    android:inputType="textVisiblePassword"/>
    <!--android:inputType="textPassword"-->

<Button
    android:id="@+id/button"
    android:layout_width="378dp"
    android:layout_height="48dp"
    android:text="@string/save"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="16dp"
    tools:layout_editor_absoluteY="556dp" />

    </RelativeLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

>Solution :

<?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=".MainActivity"
    android:background="@color/white">


    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:contentDescription="@string/app_name"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:src="@mipmap/ic_launcher"/>

    <EditText
        android:id="@+id/editTextTextPersonName2"
        android:layout_width="175dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="72dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="@string/first_name"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <EditText
        android:id="@+id/editTextTextPersonName3"
        android:layout_width="175dp"
        android:layout_height="48dp"
        android:layout_marginTop="73dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="@string/last_name"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="379dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="textEmailAddress"
        android:hint="@string/email"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName2" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="379dp"
        android:layout_height="48dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="textVisiblePassword"
        android:hint="@string/password"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

    <EditText
        android:id="@+id/editTextTextPassword2"
        android:layout_width="379dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:inputType="textVisiblePassword"
        android:hint="@string/confirm_password"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/save"
        android:layout_marginEnd="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword2" />

</androidx.constraintlayout.widget.ConstraintLayout>