How to create parallelogram shape background?
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:
<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
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: