I am working on cinema tickets application and now I need to create a curved view with blur shadow like this :
Is there a way of achieving this?
I have tried rotating image in x axis (-45%) but it is not what i need
as per #naggab's comment you should include image for this
but also I try to achieve this using below code
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/white" />
<size
android:width="450dp"
android:height="110dp" />
</shape>
</item>
<item android:top="50dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/colorPrimary" />
<size
android:width="450dp"
android:height="110dp" />
</shape>
</item>
<item android:top="50dp">
<rotate
android:fromDegrees="4"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</rotate>
</item>
<item android:top="50dp">
<rotate
android:fromDegrees="-4"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</rotate>
</item>
</layer-list>
Related
I'm trying to achieve the below image through Android xml
Right now I could just achieve this with help of some SOF q&a
Below are the code to achieve the above result
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:toDegrees="45"
android:pivotX="87%"
android:pivotY="140%">
<shape android:shape="rectangle">
<solid android:color="#color/lime_green_32CD32"/>
</shape>
</rotate>
</item>
Using below code, you can get something close to
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="35dp"
android:height="35dp"
android:top="7dp">
<rotate
android:fromDegrees="45"
android:pivotX="87%"
android:pivotY="140%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</rotate>
</item>
<item
android:width="150dp"
android:height="50dp"
android:left="44.5dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
<item
android:width="10dp"
android:height="10dp"
android:left="35dp"
android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
</item>
<item android:top="2dp" android:bottom="2dp" android:right="2dp" android:left="2dp">
<layer-list>
<item
android:width="33dp"
android:height="33dp"
android:left="2dp"
android:top="6dp">
<rotate
android:fromDegrees="45"
android:pivotX="87%"
android:pivotY="140%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#color/green" />
</shape>
</rotate>
</item>
<item
android:width="145dp"
android:height="46dp"
android:left="44.5dp">
<shape android:shape="rectangle">
<solid android:color="#color/green" />
</shape>
</item>
<item
android:width="10dp"
android:height="10dp"
android:left="35dp"
android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
</item>
</layer-list>
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>
How would I use a stroke on only the right side of my drawable WITHOUT using insets?
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="20dp"/>
<solid android:color="#color/colorWhite" />
<stroke
android:width="1dp"
android:color="#color/colorPink">
</stroke>
</shape>
</item>
</layer-list>
Edit: Cannot use negative insets because of overlap issue
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000" />
</shape>
</item>
<item android:right="2dp">
<shape>
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
or use padding:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ff0000" />
<padding android:right="1dp"/>
</shape>
</item>
<item>
<shape>
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
or:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#ffffff"/>
</shape>
</item>
<item android:gravity="right">
<shape>
<size android:width="1dp"/>
<solid android:color="#ff0000"/>
</shape>
</item>
</layer-list>
or:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="-2dp"
android:left="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/white" />
<stroke
android:width="1dp"
android:color="#ff0000" />
</shape>
</item>
</layer-list>
You can achieve that by drawing a pink layer and then, drawing a white layer 1dp distant from the right border:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pink layer -->
<item android:width="20dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
</shape>
</item>
<!-- white layer. It'll cover the pink layer except the last dp -->
<item android:right="1dp" android:width="19dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
</shape>
</item>
</layer-list>
Maybe, you can adjust
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 am trying to figure out how I would stack shapes so I can create the following ribbon(Pink/White/Pink/White/Pink part). I will then be using this as a background for my textview.
I figured it out using a layer-list
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="2dp" android:height="2dp"/>
</shape>
</item>
<item android:top="2dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF" />
<size android:width="1dp" android:height="1dp"/>
</shape>
</item>
<item android:top="3dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="20dp" android:height="20dp"/>
</shape>
</item>
<item android:top="23dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFFFF" />
<size android:width="1dp" android:height="1dp"/>
</shape>
</item>
<item android:top="24dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFe5887c" />
<size android:width="2dp" android:height="2dp"/>
</shape>
</item>
</layer-list>