CODEWITHSUNDEEP
androidxmlshapes
Febin K R
Febin K R

Reputation: 986

Android - How to draw a transparent rectangle bordered shape with only its corners visible?

I want to draw a shape like this in android.

enter image description here

I used the following code

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/shape_my">
<stroke
    android:width="2dp"
    android:dashWidth="20dp"
    android:dashGap="20dp"
    android:color="#c1c1c1" />
<padding
    android:bottom="20dp"
    android:left="20dp"
    android:right="20dp"
    android:top="20dp" />
<corners android:radius="0dp" />
<solid android:color="#00000000" />
</shape>

But no perfection I got. Help me, friends.

Upvotes: 1

Views: 4205

Answers (5)

kenn3th
kenn3th

Reputation: 1275

Below is the drawable that doesn't depends on the width and height of the rectangle, you can use this drawable for portrait and landscape :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="8dp"
        android:height="48dp"
        android:gravity="top|left">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="48dp"
        android:height="8dp"
        android:gravity="top|left">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="8dp"
        android:height="48dp"
        android:gravity="top|right">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="48dp"
        android:height="8dp"
        android:gravity="top|right">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="8dp"
        android:height="48dp"
        android:gravity="bottom|left">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="48dp"
        android:height="8dp"
        android:gravity="bottom|left">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="8dp"
        android:height="48dp"
        android:gravity="bottom|right">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
    <item
        android:width="48dp"
        android:height="8dp"
        android:gravity="bottom|right">
        <shape android:shape="rectangle">
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

Upvotes: 1

Shally pathak
Shally pathak

Reputation: 79

Try this ,it worked perfect for me

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item
      android:width="300dp"
      android:height="300dp">
    <shape android:shape="rectangle">
        <stroke
            android:width="15px"
            android:color="#00000000" />

        <solid android:color="#00000000" />

    </shape>
</item>
<item
    android:width="7dp"
    android:bottom="0dp"
    android:top="260dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:width="7dp"
    android:bottom="260dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:width="8dp"
    android:bottom="0dp"
    android:gravity="right"
    android:top="260dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:width="8dp"
    android:bottom="260dp"
    android:gravity="right"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:height="8dp"
    android:gravity="top"
    android:left="0dp"
    android:right="260dp"
    android:top="-1dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:height="8dp"
    android:gravity="top"
    android:left="260dp"
    android:right="0dp"
    android:top="-1dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:height="8dp"
    android:gravity="bottom"
    android:left="0dp"
    android:right="260dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>
<item
    android:height="8dp"
    android:gravity="bottom"
    android:left="260dp"
    android:right="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#000" />
    </shape>
</item>

Upvotes: 5

Divyang Panchal
Divyang Panchal

Reputation: 1909

Here is what you want with little exception that skipped border have white color. I achieve it using layer list. you should try it if you need center transparent

enter image description here

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="300dp"
        android:height="300dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="15px"
                android:color="#000000" />
            <solid android:color="#00000000" />
        </shape>
    </item>
    <item
        android:width="8dp"
        android:bottom="35dp"
        android:top="35dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item
        android:width="8dp"
        android:bottom="35dp"
        android:gravity="right"
        android:top="35dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item
        android:height="8dp"
        android:gravity="top"
        android:left="35dp"
        android:right="35dp"
        android:top="-1dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item
        android:height="8dp"
        android:gravity="bottom"
        android:left="35dp"
        android:right="35dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

Upvotes: -1

Harshit Trivedi
Harshit Trivedi

Reputation: 782

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:bottom="1dp"
    android:left="-2dp"
    android:right="-2dp"
    android:top="-2dp">
    <shape android:shape="rectangle" >
        <stroke
            android:width="1dp"
            android:color="#FF000000" />

        <solid android:color="#00FFFFFF" />

        <padding android:left="10dp"
            android:right="10dp"
            android:top="10dp"
            android:bottom="10dp" />
    </shape>
</item>

Upvotes: 0

Sathish kumar
Sathish kumar

Reputation: 37

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/transparent" />
    <stroke
        android:width="1.5dp"
        android:color="@color/white" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
</shape>

Upvotes: 0

Related Questions