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

Question

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 :(

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 :)

This isn't a good method to implement this type of UI because in this case, the displayed UI looks different in different screen sizes. — Mahdi M, Mar 11 '20 at 15:23

score 1 · Accepted Answer · answered Aug 18 '18 at 19:35

1

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 Aug 18 '18 at 19:35

Tejas Trivedi

122
5

adding height and width to squre smashs the whole template. Does it necessary to add height and width o that ? – Mahdi M Aug 18 '18 at 19:43
ok i'll test it now. I have a question too. Does it shown same in different size of screen ? – Mahdi M Aug 18 '18 at 19:53
i don't think it work for all device, in variation of devices size it give different outputs,so you have define size with dimen files – Tejas Trivedi Aug 18 '18 at 19:55
can you explain it more ,please ? – Mahdi M Aug 18 '18 at 20:06
for set size of square we have do something like '' [check more about dimension](https://developer.android.com/guide/topics/resources/more-resources#Dimension) we have to defile dimen.xml file for different size [create dimension files](https://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android) – Tejas Trivedi Aug 18 '18 at 20:18
excuse me please, I have a question, Is it a good way to implement ui like this with drawables or It's better to use .png file of that ? or maybe Is there another better way to implement UI's like this (according to being responsive in different sizes) ? – Mahdi M Aug 19 '18 at 07:55
ui with drawables is good way if you have time to develop either you can use directly jpg images as background instead of .png , jpg files are light weight so it is batter way to use jpg. – Tejas Trivedi Aug 19 '18 at 08:16
using drawables either jpg files have problems with making it responsive for example in this ui how should I set button , edittex and textviews to being responsive and don't smash in different sizes ? – Mahdi M Aug 19 '18 at 08:51
yes i know about that using jpg images directly in background being smashed for critical designs then that case we have to go with layout designs in xml. – Tejas Trivedi Aug 19 '18 at 09:14
either If we use xml we have the same problems unless we create different layout for different sizes. I only got this solution for this problem. what's your opinion ? – Mahdi M Aug 19 '18 at 09:31
yes you can also create different drawable folders for different size as like `drawable-xhdpi` folder for medium screen `drawable-xxhdpi` and `drawable-xxxhdpi` – Tejas Trivedi Aug 19 '18 at 09:45
This isn't a good method to implement this type of UI because in this case, the displayed UI looks different in different screen sizes. – Mahdi M Mar 11 '20 at 15:22
Do you know any better way to implement this type of UI? – Mahdi M Mar 11 '20 at 15:25
I know it's been a long time coming to this question! – Mahdi M Mar 11 '20 at 15:27
but I dont find any better way to implemet this complex UI! – Mahdi M Mar 11 '20 at 15:27

score 0 · Answer 2 · answered Aug 18 '18 at 19:34

0

Change

app:src="@drawable/test3"

to

app:srcCompat="@drawable/test3"

in your ImageView of MainLayout (i.e. page_text.xml)

Hopefully it will work.. Try it..

answered Aug 18 '18 at 19:34

Ümañg ßürmån

9,005
4
23
41

basically you need all your layers to be constantly fixed instead of moving around depending on the size right..? – Ümañg ßürmån Aug 18 '18 at 19:48
Okay, remove the % from pivotX and pivotY from all the items and give a constant DP.. So that it doesn't depend on anything but the dp which you will define.. try it and see if it works how you need.. – Ümañg ßürmån Aug 18 '18 at 19:53
This isn't a good method to implement this type of UI because in this case, the displayed UI looks different in different screen sizes. – Mahdi M Mar 11 '20 at 15:21

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

2 Answers2