CODEWITHSUNDEEP
androidshapesandroid-drawabledrawrectangle
Arlind Hajredinaj
Arlind Hajredinaj

Reputation: 8519

How to create rectangle with one shorter side?

I'm trying to draw a rectangle with one shorter side like in the image below:

enter image description here

This is what I have for the moment, but my code doesn't work all I'm drawing is a black rectangle.

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

Upvotes: 1

Views: 815

Answers (2)

rishikarri
rishikarri

Reputation: 4540

For readers trying to create a similar shape on web (not android), you can use clip-path

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 200px; height: 50px; background-color: blue; clip-path: polygon(0 0, 80% 0px, 100% 100%, 0 100%);"></div>
</body>
</html>

Document

Upvotes: 1

tachyonflux
tachyonflux

Reputation: 20211

You could rotate a rectangle. Just adjust the negative padding to your desired size.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-500dp">
        <rotate
            android:fromDegrees="-55"
            android:pivotX="100%"
            android:pivotY="100%">
            <shape android:shape="rectangle">
                <solid android:color="#000" />
            </shape>
        </rotate>
    </item>
</layer-list>

Upvotes: 2

Related Questions