How to place ImageView half overlapped on top boundary of ConstraintLayout in a Fragment?

Question

I am trying to make a Login screen where my LoginActivity contains a LoginFragment which is used to get user input for display picture, username, and password. Now, I want to display my circular ImageView centered and half-overlapping the top boundary of the ConstraintLayout which is the root Layout of my Fragment (as shown in the attached image). How can I achieve this? Everything is working fine except for the placement of the ImageView. I have also attached the code of my fragment layout xml.

I have already seen How to half overlap images in android constraint layout and how to half overlap imageview on another imageview in android, but none of these achieve the desired result.

Here is the LoginFragment XML

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/custom_card"
    android:elevation="6dp"
    android:padding="24dp"
    android:layout_margin="24dp">

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintGuide_percent="0.5"/>

<ImageView
        android:id="@+id/imageview_profile" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/circle"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintTop_toTopOf="@id/guideline"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

<androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/edittext_username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/tinBlue"
        app:backgroundTint="@color/colorPrimaryDark"
        android:hint="@string/hint_username"
        android:textColorHint="@color/colorPrimaryDark"
        android:textCursorDrawable="@null"
        app:layout_constraintTop_toBottomOf="@+id/imageview_profile"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:maxLength="20"/>

<androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/edittext_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/tinBlue"
        app:backgroundTint="@color/colorPrimaryDark"
        android:hint="@string/hint_password"
        android:textColorHint="@color/colorPrimaryDark"
        android:textCursorDrawable="@null"
        app:layout_constraintTop_toBottomOf="@id/edittext_username"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:inputType="textPassword"
        android:maxLength="20"/>

<TextView
        android:id="@+id/textview_forgot_password"
        android:text="@string/text_forgot_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:layout_marginVertical="24dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/edittext_password"/>
<Button
        android:id="@+id/button_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:layout_marginVertical="24dp"
        android:background="@color/tinBlue"
        android:textColor="@color/white"
        android:text="@string/login_button_label"
        app:layout_constraintTop_toBottomOf="@id/textview_forgot_password"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Here is the LoginActivity XML

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                               xmlns:app="http://schemas.android.com/apk/res-auto"
                                               android:layout_height="match_parent"
                                               android:layout_width="match_parent"
                                               android:background="@color/darkGray">
<TextView
        android:id="@+id/textview_tin_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_tin_account"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:layout_gravity="center_horizontal"
        android:layout_marginVertical="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/login_ui_container"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        app:layout_constraintTop_toBottomOf="@id/textview_tin_account"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text_new_user"
        android:textSize="12sp"
        android:textColor="@color/white"
        android:layout_gravity="center_horizontal"
        android:layout_marginVertical="4dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

Here is the required result ]1

Answer 1

You can constrain the ImageView to the middle of the top edge of your Fragment layout as shown in the questions you referenced (you don't need the Guideline):

<ImageView
    android:id="@+id/imageview_profile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circle"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Then, allow children to draw outside their bounds by setting android:clipChildren="false" and android:clipToPadding=false in each of the parent layouts i.e. all the parent ConstraintLayouts layouts.