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>
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
As shown in the image below i cannot clip the corners of a layer corresponding to another layer. Is there any way that it can be done that I am missing here? I want to clip anything that's going out of the corner radius.
Here is the XML
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/darkColor">
<shape android:shape="rectangle">
<solid android:color="#color/color_e95252" />
<corners android:radius="16dp"/>
</shape>
</item>
<item android:id="#+id/lightColor1"
android:bottom="40dp"
android:right="300dp">
<shape android:shape="rectangle">
<solid android:color="#color/color_ea5f5f" />
<corners android:radius="16dp"/>
</shape>
</item>
**The item below is kinda unnecessary**
<item android:id="#+id/lightColor2"
android:right="90dp"
android:top="-40dp"
android:bottom="-10dp"
android:left="10dp"
android:width="300dp"
>
**This is where the problem occurs**
<rotate android:fromDegrees="8">
<shape android:shape="rectangle">
<solid android:color="#color/color_ea5f5f" />
<corners
android:bottomRightRadius="300dp"
android:topLeftRadius="#dimen/dim_16"
android:bottomLeftRadius="50dp"/>
</shape>
</rotate>
</item>
Here you go, don't need that extra xml.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/darkColor">
<shape android:shape="rectangle">
<solid android:color="#color/appThemeColor" />
<corners android:radius="16dp"/>
</shape>
</item>
<item android:id="#+id/lightColor1"
android:bottom="30dp"
android:right="300dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:id="#+id/lightColor2"
android:top="-50dp"
android:width="300dp"
>
<rotate android:fromDegrees="8">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
<corners
android:bottomRightRadius="250dp"
android:topLeftRadius="60dp"
android:bottomLeftRadius="50dp"/>
</shape>
</rotate>
</item>
</layer-list>
I am trying to create a shape drawable like below.
where only the top left section is in different color ( here white ). Thought placing a rectangle with smaller size would let me achieve this but I was wrong. Am I even going in the right direction?
Here's my drawable.xml 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:width="15dp" android:height="15dp"/>
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
<?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:width="60dp" android:height="60dp"/>
<solid android:color="#android:color/white" />
</shape>
</item>
<item android:left="40dp">
<shape android:shape="rectangle">
<size android:width="30dp" android:height="30dp"/>
<solid android:color="#ff0000" />
</shape>
</item>
<item android:top="30dp" android:bottom="0dip">
<shape android:shape="rectangle">
<size android:width="10dp" android:height="10dp"/>
<solid android:color="#ff0000" />
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#android:color/black" android:width="1dp"/>
<size android:width="60dp" android:height="60dp"/>
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
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>