Android layout diagonal cut

Question

How can I cut a layout (LinearLayout or RelativeLayout) diagonally with content inside?

The mockup looks like that:

I tried using diagonal layout libraries like https://github.com/florent37/DiagonalLayout but I cant seem to get this cut on the right of the image and on the left of the second layout with the library or with a custom View.

Any help would be appreciated.

Answer 1

You can draw the background of every ViewGroup by yourself.

There are some key points in this solution:

1. You need to extend the desired ViewGroup:

   public class DiagonalLayout extends LinearLayout
   

2. Override the function:

   protected void dispatchDraw(Canvas canvas)

3. Fill the method above. Here is the sample code:

   @Override
   protected void dispatchDraw(Canvas canvas) {
       int height = canvas.getHeight();
       int width = canvas.getWidth();
       Path path = new Path();
       path.moveTo(0, 0);
       path.lineTo(width / 3 + width / 10, 0);
       path.lineTo(width / 3 - width / 10, height);
       path.lineTo(0, height);
       path.close();
       canvas.save();
       canvas.clipPath(path, Region.Op.INTERSECT);
       canvas.drawColor(ContextCompat.getColor(getContext(), android.R.color.holo_red_dark));
       canvas.restore();
       path = new Path();
       path.moveTo(width / 3 + width / 10 + width / 10, 0);
       path.lineTo(width, 0);
       path.lineTo(width, height);
       path.lineTo(width / 3, height);
       path.close();
       canvas.save();
       canvas.clipPath(path, Region.Op.INTERSECT);
       Paint paint = new Paint();
       paint.setStrokeWidth(8);
       paint.setStyle(Paint.Style.STROKE);
       paint.setColor(ContextCompat.getColor(getContext(), android.R.color.black));
       canvas.drawPath(path, paint);
       canvas.restore();
       super.dispatchDraw(canvas);
   }
   

The effect of the code above is:

What the code above does is:

1. Draw the polygon on the left.
2. Save Canvas state, clip Canvas to the polygon and fill it with color
3. Restore Canvas to original size, draw second polygon

To draw a bitmap, use drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint) method instead of filling it with red color.

Answer 2

It seems that the cut orientation and angle is specified with xml attributes:

diagonal:diagonal_angle=""
diagonal:diagonal_gravity=""

You need to work on diagonal:diagonal_gravity in order to create the cut, I've just seen some example but I think that with it you can decide where to cut.

For example: your left block should have diagonal:diagonal_gravity="right|top" this should cut from right-top with the angle specified in diagonal:diagonal_angle.

You need to compose both block, so you need to play with LinearLayout and two DiagonalLayout

Let me know if something like this could work:

<!-- above this there's an outer Layout block  -->
<!-- This LinearLayout block is to create a container for the images -->
<LinearLayout           
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="orizontal">

    <!-- Left image block -->
    <com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="what-you-need"
        android:layout_height="what-you-need"
        app:diagonal_angle="choose"
        app:diagonal_gravity="right|top">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="image" />
    </com.github.florent37.diagonallayout.DiagonalLayout>

    <!-- Right image block -->
    <com.github.florent37.diagonallayout.DiagonalLayout
        android:layout_width="what-you-need"
        android:layout_height="what-you-need"
        app:diagonal_angle="choose"
        app:diagonal_gravity="left|bottom">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="image" />
    </com.github.florent37.diagonallayout.DiagonalLayout>

</LinearLayout>