UI error between what I design in drawables and what is displaying in imageview

Issue

I searched in internet to find a way to implement graphical designs then I find a way to implement them with drawables;

I start to coding the template but it doesn't display correctlly :(

My designed drawable

Main layout

what is the problem ? How can I fix it ?

I designed it but it dosen't work. I don't know what is the problem with that. Should I use image of that template in the background of imageview for all templates like this ?

Notice : I set that drawable for background of layouts like linear,relative and constraint but doesn't shown correctly too.

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape android:shape="rectangle">
        <corners android:radius="10dp" />
        <solid android:color="#9c9c9c" />
    </shape>
</item>

<item
    android:bottom="920dp"
    android:left="-100dp"
    android:right="50dp"
    android:top="-700dp">
    <rotate
        android:fromDegrees="50"
        android:pivotX="-50%"
        android:pivotY="100%">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="30dp" />
            <stroke
                android:width="2dp"
                android:color="#dfcefc" />
        </shape>
    </rotate>
</item>

<item
    android:bottom="50dp"
    android:left="-30dp"
    android:right="315dp"
    android:top="-100dp">
    <rotate
        android:fromDegrees="-40"
        android:pivotX="10%"
        android:pivotY="50%">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="20dp" />
            <stroke
                android:width="2dp"
                android:color="#dfcefc" />
        </shape>
    </rotate>
</item>

<item
    android:bottom="200dp"
    android:left="100dp"
    android:right="-400dp"
    android:top="-40dp">
    <rotate
        android:fromDegrees="-40"
        android:pivotX="60%"
        android:pivotY="40%">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="30dp" />
            <stroke
                android:width="2dp"
                android:color="#dfcefc" />
        </shape>
    </rotate>
</item>

<item
    android:bottom="420dp"
    android:left="120dp"
    android:right="150dp"
    android:top="100dp">
    <rotate
        android:fromDegrees="-40"
        android:pivotX="365%"
        android:pivotY="125%">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <gradient
                android:angle="270"
                android:endColor="#7436f6"
                android:startColor="#aa57e5"
                android:type="linear" />
        </shape>
    </rotate>
</item>

<item
    android:bottom="-200dp"
    android:left="-100dp"
    android:right="240dp"
    android:top="500dp">
    <rotate
        android:fromDegrees="-40"
        android:pivotX="60%"
        android:pivotY="5%">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="30dp" />
            <stroke
                android:width="2dp"
                android:color="#dfcefc" />
        </shape>
    </rotate>
</item>

<item
    android:bottom="100dp"
    android:left="-100dp"
    android:right="100dp"
    android:top="200dp">
    <rotate
        android:fromDegrees="-40"
        android:pivotX="130%"
        android:pivotY="145%">
        <shape android:shape="rectangle">
            <solid android:color="#fff" />
            <corners android:radius="30dp" />
            <gradient
                android:angle="270"
                android:endColor="#7436f6"
                android:startColor="#aa57e5"
                android:type="linear" />
        </shape>
    </rotate>
</item>

I need it. Please help me :)

Solution

use <size android:width="50dp" android:height="50dp" /> to set height width here is your square

<item
    android:bottom="420dp"
    android:left="120dp"
    android:right="150dp"
    android:top="100dp">
    <rotate
        android:fromDegrees="-40"
        android:pivotX="365%"
        android:pivotY="125%">
        <shape android:shape="rectangle">
            <size android:width="50dp"
                android:height="50dp"
                />
            <corners android:radius="10dp" />
            <gradient
                android:angle="270"
                android:endColor="#7436f6"
                android:startColor="#aa57e5"
                android:type="linear" />
        </shape>
    </rotate>
</item>

Answered By - Tejas Trivedi