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>
Related
I am trying to make a shape that looks roughly like
I understand that I need a layer-list with 3 items stacked on top of each other with two of them being offset from their top-left and bottom-right. Here is my code for this
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="8dp" android:bottom="8dp">
<shape android:shape="oval">
<solid android:color="#color/color_white" />
</shape>
</item>
<item android:top="8dp" android:left="8dp">
<shape android:shape="oval">
<solid android:color="#color/color_gray" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/color_circle" />
</shape>
</item>
</layer-list>
But I am not getting the correct output. More specifically, the white and black shapes are smaller in size than the middle one as you can see here
I don't know why this is happening. Can anyone please help me out? Thanks
Try specifying the width and height for each shape:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="8dp" android:bottom="8dp">
<shape android:shape="oval">
<solid android:color="#android:color/white" />
<size android:width="50dp" android:height="50dp" />
</shape>
</item>
<item android:top="8dp" android:left="8dp">
<shape android:shape="oval">
<solid android:color="#android:color/black" />
<size android:width="50dp" android:height="50dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/darker_gray" />
<size android:width="50dp" android:height="50dp" />
</shape>
</item>
</layer-list>
This gives me the following image:
I currently have the following drawable which creates a rectangle with rounded edges, a semi-transparent black background and transparent edges (in case I want to show them later):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#android:color/transparent" />
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#50FFFFFF"/>
<stroke
android:width="5dip"
android:color="#android:color/transparent" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>
My question is how could I modify this so that the edges of the rectangle's background fade, to give a softer appearance?
I did something like this for work once.
Just make a layer-list with multiple rectangle each with increasing opacity and padding
code below:
<?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="#03101010" />
<corners android:radius="24dp" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle">
<solid android:color="#06101010" />
<corners android:radius="20dp" />
</shape>
</item>
<item
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<solid android:color="#09101010" />
<corners android:radius="16dp" />
</shape>
</item>
<item
android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp">
<shape android:shape="rectangle">
<solid android:color="#12101010" />
<corners android:radius="12dp" />
</shape>
</item>
</layer-list>
The number of layers may vary depending on the color of your primary rectangle and the background.
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 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".
I want to create a clock type thing. This code does what I want, but I feel like I am doing it wrong:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<size android:width="100dp"
android:height="100dp"/>
<item>
<shape android:shape="oval">
<size
android:width="100dp"
android:height="100dp"/>
<stroke
android:width="1.5dp"
android:color="#FFF" />
</shape>
</item>
<item android:top="25dp" android:left="25dp" android:right="25dp" android:bottom="25dp">
<shape android:shape="oval">
<stroke
android:width="1.5dp"
android:color="#FFF" />
</shape>
</item>
<item android:top="0dp" android:right="49.25dp" android:left="49.25dp" android:bottom="75dp">
<shape android:shape="rectangle">
<solid
android:color="#0FFF00" />
</shape>
</item>
</layer-list>
The green tick mark I feel like I should be able to define using a <size> tag and be able to position more elegantly than defining the empty space using margins around the item.