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

Answer 1

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:

Answer 2

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.

Answer 3

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:

Answer 4

<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