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:
Related
I'm trying to implement this view
As you can see it had a circle cutting to the left and right of the rectangle
I tried to use 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">
<corners
android:topLeftRadius="8dp"
android:topRightRadius="8dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp" />
<size
android:width="300dp"
android:height="200dp" />
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:left="-10dp"
android:right="290dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#00000000" />
</shape>
</item>
<item
android:left="290dp"
android:right="-10dp"
android:top="40dp"
android:bottom="40dp">
<shape android:shape="oval">
<solid android:color="#00000000" />
</shape>
</item>
<item
android:left="10dp"
android:right="10dp"
android:top="50dp">
<shape android:shape="line">
<stroke
android:width="1dp"
android:color="#EEEEEE"/>
</shape>
</item>
</layer-list>
but the result was not showing the cutting circle to the left and right
Is there any way to implement these cutting without loosing the shadow effect of the cart
I'm trying to replicate the following shape in Android studio:
I can't figure out how to do it in android drawable xml.
At the moment I used a layer-list where:
As the first item I placed a transparent (or white) rectangle, to which I gave a padding on the left side and vertically.
As the second item I placed a rectangle containing the gradient and the corners on the left.
Now, I don't know how I can make the two "reverse angles" on the right, I've tried everything but online there aren't many examples to refer.
Here's my current 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/transparent" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="0dp"
android:top="8dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#color/green"
android:startColor="#color/blue"
android:type="linear" />
<corners
android:bottomLeftRadius="22dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="22dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
How can I change the code to obtain this shape?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="600dp"
android:height="400dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#android:color/holo_green_light"
android:startColor="#android:color/holo_blue_light"
android:type="linear" />
</shape>
</item>
<item android:width="600dp"
android:height="100dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:bottomRightRadius="100dp" />
</shape>
</item>
<item android:width="600dp"
android:height="100dp"
android:top="300dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
<corners android:topRightRadius="100dp" />
</shape>
</item>
<item android:width="200dp"
android:height="200dp"
android:top="100dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:width="600dp"
android:height="200dp"
android:top="100dp">
<shape android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="#android:color/holo_green_light"
android:startColor="#android:color/holo_blue_light"
android:type="linear" />
<corners android:radius="100dp" />
</shape>
</item>
</layer-list>
Here is a preview image
try this
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 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.
Background
I'm trying to make a (fake) shadow below a view, so that the layers would be vertical in this manner:
a line of color "#43000000" with a height of "1dp"
below the line, a gradient that starts from the top with color "#1A000000" and ends with color "#00000000", and is of a height of "8dp".
The problem
For some reason, I can't draw the line correctly.
No matter what I do, the line for some reason takes the whole space, while the gradient seems fine.
What I tried
I tried using "line" as the shape and also "rectangle". I also tried using "stroke" instead of "solid", tried adding padding and margins...
Here's the XML of the drawable file:
<?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="1dp" />
<solid android:color="#43000000" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#1A000000" />
<size android:height="8dp" />
</shape>
</item>
</layer-list>
Again, this is not the only thing I've tried. It's just my first attempt.
The question
How can I fix this XML ? what is causing it to happen?
Here's what I've found to be working:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="8dp">
<shape android:shape="rectangle" >
<size android:height="1dp" />
<solid android:color="#43000000" />
</shape>
</item>
<item android:top="1dp">
<shape
android:dither="true"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00000000"
android:startColor="#10000000" />
<size android:height="8dp" />
</shape>
</item>
</layer-list>
Tried with this,may it fulfill your need with gradient
<?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="#e040fb"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#E1BEE7"/>
<corners android:radius="2dp" />
<gradient
android:angle="270"
android:endColor="#e1bee7"
android:startColor="#e040fb" />
</shape>
</item>
</layer-list>
You can change the heights in this and get what you want
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="10dp"
android:gravity="bottom">
<shape
android:shape="oval">
<solid android:color="#color/shadow_color" />
</shape>
</item>
<item android:right="20dp" android:left="20dp" android:bottom="12dp"
android:top="10dp">
<shape
android:shape="rectangle">
<solid android:color="#color/border_color"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:right="30dp" android:left="30dp" android:bottom="23dp"
android:top="20dp">
<shape
android:shape="rectangle">
<solid android:color="#color/base_color"/>
<corners android:radius="15dp"/>
</shape>
</item>
</layer-list>