How to achieve overlap in constraint layout?

Question

I am trying to achieve this layout :

This is the code i tried :

 <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yellow_bg"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView3" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/crown"
                tools:layout_editor_absoluteY="5dp"
                tools:layout_editor_absoluteX="10dp" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/position_no_bg"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView3"
                app:layout_constraintTop_toTopOf="@+id/imageView3"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView3"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView4" />

        </android.support.constraint.ConstraintLayout>  

But I am getting this output :

And the problem is that as I decrease the screen size, I get issue of the crown moving from its position. My main issue is that the crown is not able to set in place.

These are the images :

EDIT :

Adding 2 constraints for crown :

 <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yellow_bg"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="parent"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView3" />
            <ImageView
                android:layout_width="45dp"
                android:layout_height="32dp"
                android:src="@drawable/crown"
                app:layout_constraintBottom_toBottomOf="@+id/imageView3"
                android:layout_marginBottom="42dp"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView3" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/position_no_bg"
                app:layout_constraintTop_toTopOf="@+id/imageView3"
                android:layout_marginTop="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView3"
                android:layout_marginBottom="8dp"
                android:id="@+id/imageView4"
                app:layout_constraintVertical_bias="1.0"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView3" />

        </android.support.constraint.ConstraintLayout>

EDIT 2 :

Tried this code again, and got good response but the design is moving in 7.0" plus devices:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="0.4"
        >

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteY="0dp"
            tools:layout_editor_absoluteX="0dp">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yellow_without_crown"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                app:layout_constraintLeft_toLeftOf="parent"
                android:id="@+id/imageView4" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/crown"
                app:layout_constraintBottom_toBottomOf="@+id/imageView4"
                android:layout_marginBottom="8dp"
                app:layout_constraintTop_toTopOf="@+id/imageView4"
                android:layout_marginTop="0dp"
                android:layout_marginLeft="0dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView4"
                android:layout_marginRight="8dp"
                app:layout_constraintRight_toRightOf="@+id/imageView4"
                app:layout_constraintHorizontal_bias="0.04"
                app:layout_constraintVertical_bias="0.0" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/position_no_bg"
                app:layout_constraintBottom_toBottomOf="@+id/imageView4"
                android:layout_marginBottom="0dp"
                app:layout_constraintTop_toTopOf="@+id/imageView4"
                android:layout_marginTop="16dp"
                android:layout_marginLeft="16dp"
                app:layout_constraintLeft_toLeftOf="@+id/imageView4"
                android:id="@+id/imageView5" />

        </android.support.constraint.ConstraintLayout>







    </LinearLayout>

Answer 1

Try this may solve your problem

EDIT

<?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:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="81dp">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:src="@drawable/yellow"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@+id/imageView4" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="76dp"
        android:src="@drawable/crown"
        app:layout_constraintBottom_toBottomOf="@+id/imageView4"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:src="@drawable/circle"
        app:layout_constraintBottom_toBottomOf="@+id/imageView3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView3" />

</android.support.constraint.ConstraintLayout>

Now, this is working on different screen sizes make a try

Here is screenshot

Answer 2

You are applying absolute positions for your crown, this is why the crown stays where it is when you change the screen size.

The crown image is not attached to the other graphics.

i.e. set the crowns bottom constraint to the bottom border of your yellow_bgimage and increase the bottom margin

Edit: This is how it could fit in your question - you have to remove the white space around your background image!!

• set background constraint to bottom and left of parent.
• set the circle to the bottom and left of the background -
  • after that i set the crown on top of the background.
  • it floats now above because your image has a huhe white border. you need to adjust that.

you need to adjust it finally with margins.

<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">

    <ImageView
        android:id="@+id/bg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:src="@drawable/yellow_bg"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageView
        android:id="@+id/crown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/crown"
        app:layout_constraintBottom_toTopOf="@+id/bg"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="@+id/bg" />

    <ImageView
        android:id="@+id/circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:layout_marginLeft="12dp"
        android:src="@drawable/position_no_bg"
        app:layout_constraintBottom_toBottomOf="@+id/bg"
        app:layout_constraintLeft_toLeftOf="@id/bg"/>

</android.support.constraint.ConstraintLayout>