How to create parallelogram shape background?

Question

I am trying to make parallelogram background for my textview but it is not displaying properly...it display following output

enter image description here

<layer-list  >
    <item>
        <rotate
            android:fromDegrees="10"
            android:toDegrees="10"
            android:pivotX="-40%"
            android:pivotY="87%" >
            <shape
                android:shape="rectangle" >
                <stroke android:color="#000000" android:width="10dp"/>

            </shape>

        </rotate>

    </item>
</layer-list>

i need output like this........

enter image description here

This post helped me a lot in creating a trapezium view https://arkapp.medium.com/trapezium-view-for-android-584799c7e849 With the help of this I was able to create a custom view with one edge as a slope. — abdul rehman, Nov 29 '20 at 09:52

score 20 · Accepted Answer · answered Mar 25 '15 at 15:27

As alternative to @mmlooloo's answer, whom a credit goes to, I suggest a xml-drawable solution (since you haven't emphasized exactly what kind of solution you're looking for). In the example below I used a general View, however you can use any other.

Here is the View

<View
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:layout_centerInParent="true"
    android:background="@drawable/shape" />

and shape.xml itself

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<!-- Colored rectangle-->
<item>
    <shape android:shape="rectangle">
        <size 
            android:width="100dp"
            android:height="40dp" />
        <solid android:color="#13a89e" />
    </shape>
</item>

<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout's background -->
<item
    android:right="100dp"
    android:left="-100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

<!-- This rectangle for the right side -->
<!-- Their color should be the same as layout's background -->
<item
    android:right="-100dp"
    android:left="100dp"
    android:top="-100dp"
    android:bottom="-100dp">
    <rotate
        android:fromDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

</layer-list>

Here is how it looks like:

enter image description here

perfect shape. do you have any idea if background as image out side the view ?? — Rathiga Jesika, Jan 11 '17 at 12:23
@Rathiga Jesika Haven't tried, but AFAIK, it isn't gonna work with an xml-defined shapedrawable. You might try to do it [programmatically](https://developer.android.com/reference/android/graphics/drawable/ShapeDrawable.html) for better flexibility / customization. — Onik, Jan 11 '17 at 12:28
@John61590, the solution works only for fixed size views. Pay attention that the shape has same size as the width/height of the view. For a more flexible solution you should go with a programmatic one, e.g. as is the one referred in a comment above... If you have some confusion on how the solution is constructed you might find a small explanation regarding the approach [here](https://stackoverflow.com/a/26320942/3290339) — Onik, Apr 10 '18 at 19:35

score 10 · Answer 2 · answered Mar 20 '15 at 08:34

you can achieve it by creating custom Textview like this:

public class ParallogramTextView extends TextView {


        Paint mBoarderPaint;
        Paint mInnerPaint;

        public ParallogramTextView(Context context) {
            super(context);
            init();
        }

        public ParallogramTextView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            init();
        }

        public ParallogramTextView(Context context, AttributeSet attrs) {
            super(context, attrs);
            init();
        }


        private void init() {
            mBoarderPaint = new Paint();
            mBoarderPaint.setAntiAlias(true);
            mBoarderPaint.setColor(Color.BLACK);
            mBoarderPaint.setStyle(Paint.Style.STROKE);
            mBoarderPaint.setStrokeWidth(6);   

            mInnerPaint = new Paint();
            mInnerPaint.setAntiAlias(true);
            mInnerPaint.setColor(Color.parseColor("#13a89e"));
            mInnerPaint.setStyle(Paint.Style.FILL);
            mInnerPaint.setStrokeJoin(Paint.Join.ROUND);
        }


        @Override
        public void draw(Canvas canvas) {
            super.draw(canvas);
            Path path = new Path();
            path.moveTo(getWidth(),0);
            path.lineTo(getWidth()/2, 0);
            path.lineTo(0, getHeight());
            path.lineTo(getWidth()/2,getHeight());
            path.lineTo(getWidth(), 0);
            canvas.drawPath(path, mInnerPaint);
            canvas.drawPath(path, mBoarderPaint);
        }

}

and in the layout file use it like below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">



    <com.example.ParallogramTextView
        android:id = "@+id/result"
        android:layout_width="500dp"
        android:layout_height="500dp"
        android:layout_centerInParent="true"
        android:gravity="center" 
        android:layout_margin="32dp" />


</RelativeLayout>

the result is:

enter image description here

Kinda late to the party, but with this approach, how do I get the "text" to the foreground? — Some guy, Jun 08 '17 at 22:43
In the overwritten onDraw you can move set super.draw(canvas); to the last line. Then everything else that the textview usually does will appear on top of the paralellogram. It can look good if background is set to invisible. Of couse it would be better to have the parallelogram drawn in the color of the background attribute.. — FrankKrumnow, Sep 08 '20 at 13:30
This post helped me a lot in creating a trapezium view https://arkapp.medium.com/trapezium-view-for-android-584799c7e849 With the help of this I was able to create a custom view with one edge as a slope. — abdul rehman, Nov 29 '20 at 09:52

score 6 · Answer 3 · answered Jun 29 '16 at 11:44

6

<item
    android:bottom="-25dp"
    android:top="-25dp"
    android:left="25dp"
    android:right="25dp">
    <rotate android:fromDegrees="20">
        <shape android:shape="rectangle">
            <size
                android:width="50dp"
                android:height="100dp"/>
            <solid android:color="#13a8de"/>
        </shape>

    </rotate>
</item>

This one works on alle backgrounds not just white like in the example above

answered Jun 29 '16 at 11:44

JPLauber

1,361
1
14
22

1

Awesome, how can you dynamically change the color of this? – Nelson Hoang Aug 16 '19 at 03:57
@NelsonHoang you can do it like this: ShapeDrawable shapeDrawable = (ShapeDrawable) shape; shapeDrawable.getPaint().setColor(ContextCompat.getColor(context,R.color.myColort)); – JPLauber Aug 21 '19 at 09:42
1

It worked extremely smoothly n fine for me. Thanks for saving my valuable time mate! – shivambhanvadia Mar 19 '20 at 11:04
How is this a parallelogram ? this is just a rectangle rotated – MDT Mar 01 '21 at 08:41
@Manti_Core No, check it out, it's a parallelogram – JPLauber Mar 01 '21 at 10:05
@sativa i added this to new layer list and this does not look like parallelogram at all, just a vertically tilted rectangle, the preview for android studio shows me that way only – MDT Mar 01 '21 at 15:06

score -7 · Answer 4 · answered Mar 17 '15 at 09:04

-7

Are you referring to the navigation menu? If so, you can use this code to make a parallelogram:

ul#nav li a {
display: inline-block;
text-decoration:none;
padding:4px 10px;
border-radius:3px;
transform: skew(-10deg);
-o-transform: skew(-10deg);
-moz-transform: skew(-10deg);
-webkit-transform: skew(-10deg);
color:#000000;
}
ul#nav li a span {
display: inline-block;
transform: skew(10deg);
-o-transform: skew(10deg);
-moz-transform: skew(10deg);
-webkit-transform: skew(10deg);
}

You can also check the HTML and CSS version in codepen.

Hope this helps.

answered Mar 17 '15 at 09:04

Tim.Vodien

31
4

2

how to apply css in android – fazilpuriasa Mar 17 '15 at 09:24
3

This answer would benefit from a little more explanation and code formatting I think. – Sobrique Mar 17 '15 at 10:46

How to create parallelogram shape background?

4 Answers4

Linked