Alex DG
Alex DG

Reputation: 1869

Shape with only one transparent border

I'm trying to figure out how I could create a shape with only its right border transparent:

+ + + + + + + +
+
+
+
+ + + + + + + +

I would like to know how can I do that. At the moment I have just my basic shape which represents a rectangle but from this point I'm not sure if it's possible to do what I want:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#07000000" /> <!-- Transparent background -->


    <corners
        android:topLeftRadius="10dp"
        android:bottomLeftRadius="10dp" />
    <stroke
        android:width="2dp"
        android:color="@android:color/white" />
</shape>

Upvotes: 4

Views: 2408

Answers (2)

Lamorak
Lamorak

Reputation: 11127

The main idea is just to hide the line you dont want to show. Since you have no option to specify it within the shape itself, you have to use layer-list and define negative padding to shift the rectangle so the right side is out of bounds. It is also better to have all corners rounded for not all of them are visible anyway. Try this code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="-10dp">
        <shape android:shape="rectangle">
            <solid android:color="#07000000" />

            <corners android:radius="10dp" />

            <stroke
                android:width="2dp"
                android:color="@android:color/white"/>
        </shape>
    </item>
</layer-list>

Upvotes: 5

user2315314
user2315314

Reputation: 1

Try bellow xml-

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#FF0000" />
    </shape>
</item>
<item android:left="5dp">
    <shape android:shape="rectangle">
        <solid android:color="#000000" />
    </shape>
</item>
</layer-list>

Upvotes: 0

Related Questions