Screen size for Android

Question

How to cut layout (LinearLayout or RelativeLayout) diagonally with content inside?

The layout is as follows:

I tried using diagonal link libraries such as https://github.com/florent37/DiagonalLayout , but I don't seem to get this shorthand to the right of the image and to the left of the second link with the library or user view.

Any help would be appreciated.

Answer 1

You can draw the background of each ViewGroup yourself.

There are several key points to this decision:

• You need to expand the desired ViewGroup:

  public class DiagonalLayout extends LinearLayout
  

• Cancel function:

  protected void dispatchDraw(Canvas canvas)

• . :

  @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);
  }
  

:

:

• .
• Canvas , Canvas
• Canvas ,

, drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint) .

Answer 2

, xml:

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

: diagonal_gravity, , - , , , .

: diagonal:diagonal_gravity="right|top", , diagonal:diagonal_angle.

, LinearLayout DiagonalLayout

, - :

<!-- above this there 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>