Disposición de Android corte diagonal

¿Cómo puedo cortar un diseño (LinearLayout o RelativeLayout) en diagonal con contenido dentro?

La maqueta se ve así:

Introduzca aquí la descripción de la imagen

Intenté usar las bibliotecas diagonales de la disposición como https://github.com/florent37/DiagonalLayout pero no puedo parecer conseguir este corte a la derecha de la imagen ya la izquierda del segundo diagrama con la biblioteca o con una visión de encargo.

Cualquier ayuda sería apreciada.

Puede dibujar el fondo de cada ViewGroup por usted mismo.

Hay algunos puntos clave en esta solución:

Necesita extender el grupo de ViewGroup deseado:

 public class DiagonalLayout extends LinearLayout

Anular la función:

protected void dispatchDraw(Canvas canvas)

Llene el método anterior. Aquí está el código de ejemplo:

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

El efecto del código anterior es:

Introduzca aquí la descripción de la imagen

Lo que hace el código anterior es:

Dibuje el polígono a la izquierda.
Guardar el estado de la Canvas , grabar Canvas en el polígono y rellenarlo con color
Restaurar la Canvas al tamaño original, dibujar segundo polígono

Para dibujar un mapa de bits, utilice el drawBitmap (Bitmap bitmap, Matrix matrix, Paint paint) lugar de rellenarlo con color rojo.

Parece que la orientación de corte y el ángulo se especifica con atributos xml:

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

Necesitas trabajar en diagonal: diagonal_gravity para crear el corte, acabo de ver algún ejemplo pero creo que con él puedes decidir dónde cortar.

Por ejemplo: su bloque izquierdo debe tener diagonal:diagonal_gravity="right|top" esto debe cortar desde la derecha-top con el ángulo especificado en diagonal:diagonal_angle .

Necesitas componer ambos bloques, así que necesitas jugar con LinearLayout y dos DiagonalLayout

Déjeme saber si algo como esto podría trabajar:

 <!-- 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>