I need to create image for my camera app. I create a circle inside another circle
it look fine when I see it on android studio but when run it on real device it was not same as it is. Here is image of both first one from real device and second from android studio.
Here is my code that I'm using to create it.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger circle in white-->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<padding android:top="5dp" android:bottom="5dp" android:right="5dp" android:left="5dp"/>
<stroke
android:width="1dp"
android:color="#ffffff"/>
</shape>
</item>
<!-- Smaller white circle in front -->
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#ffffff"/>
</shape>
</item>
</layer-list>
What's the problem why it show different.
Everything seems good, just add size property. Hope after that it will work for you.
<size android:height="40dp" android:width="40dp"/>
Example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<stroke
android:width="1dp"
android:color="#ffffff" />
</shape>
</item>
<item>
<shape android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
I used 40dp as size of width and height. You can change it as per your requirement.
I think it's because your device's OS doesn't support attributes like "android:top" "android:bottom".
Related
I want to make a design like that
the delivery msg is a texview with custom background and it works fine but in the bottom of it there is a constraint-layout and when I used the custom background I made for it it didn't look fine there is a shadow in the corner, this custom background was applied fine before to a button but when I use it to constraint-layout it didn't works as expect
here is the custom drawable xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/turquoise" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" >
</padding>
<solid android:color="#color/white"
android:elevation="0dp"
/>
<size android:height="60dp" />
</shape>
</item>
how can I apply that to constraint-layout
there is two solutions:
Solution 1:
apply corners and padding to the rectangle with color turquoise
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/turquoise" />
<padding android:top="28dp" />
<corners
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="14dp"
android:topRightRadius="14dp" />
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
<solid
android:color="#color/white"
android:elevation="0dp" />
<size android:height="60dp" />
</shape>
</item>
</layer-list>
please note that android:top value u have to set depending on your needs.
Solution 2:
create two separated layouts with the same designs just differ in layout.
set one with turquoise to constraintLayout and crate ImageView to have the one with white and set marginTop depending on your needs
any questions are welcomed
I made a shape for a custom button and it fills the whole background of the button instead of showing the shape.
This is the xml code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="ring"
android:useLevel="false"
android:thicknessRatio="0">
<solid android:color="#color/white" />
<size
android:width="1dp"
android:height="1dp" />
</shape>
</item>
<item android:left="0.75dp" android:top="1dp" android:bottom="0.5dp" android:right="1.5dp">
<rotate android:fromDegrees="" android:pivotX="0%" android:pivotY="0%" android:toDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<size android:height="1dp" android:width="1dp"/>
</shape>
</rotate>
</item>
</layer-list>
I found the solution. For some reason when I use the code I posted in an Imageview it shows correctly, but if I try to use it for a background (doesn't matter if it is for an Imageview/button/etc it shows as a square.
The problem seemed to be that the Preview doesn't represent at all the shape as a background, so I had to check the layout all the time and do the changes depending on it, and not the preview.
This is the final code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/white" />
<size
android:width="5dp"
android:height="5dp" />
</shape>
</item>
<item android:left="8dp" android:top="30dp" android:bottom="8dp" android:right="30dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
<size android:height="1dp" android:width="1dp"/>
</shape>
</item>
</layer-list>
I want to set up circle size, but I don't want resize other elements in layer list.
I have this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/drawer_color" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:endColor="#1b2727"
android:centerColor="#1a2a29"
android:startColor="#154440"
android:type="linear"
android:angle="90"/>
<size
android:height="600dp"
android:width="600dp" />
<stroke
android:width="3dip"
android:color="#color/drawer_ring_color" />
</shape>
</item>
</layer-list>
What I found:
And what I want to see:
How to do that?
Thanks!
Unfortunately this do not works this way, your drawable will take the size of view where you use that drawable.
Try to set padding in your code.
<item>
<shape android:shape="rectangle">
<solid android:color="#color/drawer_color" />
<padding
android:left="10dp"
android:top="100dp"
android:right="10dp"
android:bottom="100dp" />
</shape>
</item>
I am developing an Android App in which I need to use a Rectangular shape which should have a drop_shadow. I have designed a rectangular shape but somehow i am not able to add a drop shadow to it on (right and left sides).
P.S.: this rectangular shape is added as a background attribute.
If this type of Question is already been answered then please provide the links here.
THANK YOU IN ADVANCE!!!!
Code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#000000" />
<corners
android:radius="10dp" >
</corners>
</shape>
Try this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="1dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="1dp" />
</shape>
</item>
</layer-list>
I want a non-veg icon to drawn using drawable xml resource in android. I'm using Android Studio 1.1.0
The preview is being shown perfectly in my android studio. but it's not beind displayed correctly in my devices. Please help me.
Here is what I want
Here is what I'm getting
Android 5.0.0
Android 4.4.4
Android 4.3
Here is by xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:thickness="2dp">
<size
android:width="24dp"
android:height="24dp" />
<stroke
android:width="2dip"
android:color="#android:color/holo_red_dark" />
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
</item>
<item>
<shape android:shape="ring" android:thicknessRatio="-1">
<padding
android:bottom="15dp"
android:left="15dp"
android:right="15dp"
android:top="15dp" />
<size
android:width="4dp"
android:height="4dp" />
<solid android:color="#android:color/holo_red_dark" />
</shape>
</item>
</layer-list>
Use an oval for your second item, not a ring. Don't bother specifying size or padding on the second item, it's going to be scaled to the size of the first item anyway, use offsets on the item tag instead. Don't specify thickness on the rectangle, it does nothing as it is a ring-only attribute.
The modified xml below gives roughly the shape you're looking for. Adjust the dimensions to fine tune the appearance.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<size
android:height="24dp"
android:width="24dp" />
<stroke
android:width="2dp"
android:color="#android:color/holo_red_dark" />
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="oval" >
<solid android:color="#android:color/holo_red_dark" />
</shape>
</item>
</layer-list>