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

score 4 · Accepted Answer · edited Aug 05 '19 at 05:41

4

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.

edited Aug 05 '19 at 05:41

Abdul Mateen

1,418
1
14
32

answered Aug 03 '19 at 10:41

Pawel Laskowski

6,078
1
21
35

Thank you. I've tried your solution, but it clips the top half of the ImageView i.e. only the lower half semi-circle is visible. Even setting clipChildren to false in the fragment root container also results in the same semi-circle. Am I missing something here? – Abdul Mateen Aug 03 '19 at 20:16
Is your fragment a direct child of the `LoginActivity's` root `ConstraintLayout`? Could you perhaps add your activity's layout to your post? `android:clipChildren="false"` should be added to whichever `ViewGroup` is hosting the fragment. – Pawel Laskowski Aug 03 '19 at 20:38
It is contained in a ConstraintLayout which itself is in a ConstraintLayout. I've updated the question. Have a look. And yes, I have also added `android:clipChildren=false` in login_ui_container ConstraintLayout, but it also does the same semi-circle thing. – Abdul Mateen Aug 03 '19 at 20:47
So you should add `android:clipChildren="false"` to `id/login_ui_container` `ConstraintLayout` – Pawel Laskowski Aug 03 '19 at 20:53
How are you adding your fragment to the activity? Your activity layout does not include the fragment. – Pawel Laskowski Aug 03 '19 at 21:09
I am dynamically adding my fragment to my activity in login_ui_container. – Abdul Mateen Aug 04 '19 at 12:33

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

1 Answers1