Android Drawable Shape with 3 layer border - android

Hi I am trying to add a border to a view which has yellow border but it also has a black border on both sides of primary border.
Any ideas

Try this drawable layout for border on top and bottom
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#ffff00" />
<solid android:color="#000000" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000000" />
</shape>
</item>
</layer-list>
Try this for left and right border
<?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="#ffff00"/>
</shape>
</item>
<item android:left="4dp">
<shape android:shape="rectangle">
<solid android:color="#000000"/>
</shape>
</item>
<item android:right="4dp">
<shape android:shape="rectangle">
<solid android:color="#000000"/>
</shape>
</item>
</layer-list>

Related

How to clip items in a layer list drawable with respect to corner radius defined from another item

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>

Drawable using Stroke only on the rightside of the solid

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

Give custom border to TextView

How can I give the custom border to TextView where:
1) left and right border is 2 dp and with the different color with little opacity
2) top and bottom border is 1 dp
3) The text of TextView should be visible. right now What I have created is not showing the text of textview
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FF000000" />
<solid android:color="#FFDDDDDD" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="2dp"
android:right="15dp"
android:top="1dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#FFDDDDDD" />
<solid android:color="#00000000" />
</shape>
</item>
use alpha color according to your recruitment
<?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="#080808" />
</shape>
</item>
<item
android:bottom="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#76d63f" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#d63f60" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp"
android:left="2dp"
android:right="2dp"
>
<shape android:shape="rectangle">
<solid android:color="#3fa9d6" />
</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">
<solid android:color="#76d273" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#76d63f" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#d63f60" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
add this code in your drawable(test_drawable) file and set to textview
android:background="#drawable/test_drawable"
Check my code I have integrated the same.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
//for top and bottom borders
<item
android:left="-2dp"
android:right="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#fff70b" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
//for left and right border
<item
android:bottom="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#e90c0c" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
</layer-list>
Please note that opacity should be defined when creating your color only. While writing your color in colors.xml, you can change opacity like shown in below screenshot. Either change the 255 to your chosen opacity or use the bottom bar.
Also, you need to define the solid tag for each border and apply transparent color in order to make your TextView visible.
After applying the code in drawable, you will be able to see some preview like this :
Good Luck..!!

Android Shape - Square with Circle and Different Top Color

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>

How paint line on the bottom of drawable?

I create drawable with 2 lines White and Red. But it paint on the center of drawable. I want paint it on the bottom.
My drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="line">
<stroke
android:width="1.25dp"
android:color="#ff0000"/>
</shape>
</item>
<item>
<shape android:shape="line">
<stroke
android:width="1.25dp"
android:color="#ffffff"/>
</shape>
</item>
</layer-list>
I don't know what you exactly want but i think this should solve you problem
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="2dp"
android:left="-10dp"
android:right="-10dp"
android:top="-10dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent"></solid>
<stroke
android:width="2dp"
android:color="#fff" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="-10dp"
android:right="-10dp"
android:top="-10dp">
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent"></solid>
<stroke
android:width="2dp"
android:color="#f00" />
</shape>
</item>
</layer-list>

Categories

Resources