Custom view that splits layout diagonally with different child views

Question

How can i split LinearLayout or RelativeLayout diagonally into two varying sizes and each having different child view. Example ViewPager

Answer 1

The easiest approach is to just make a background image with that skewed cut. If you wish to have a dynamic layout and you want to really cut widgets, use Canvas.saveLayer/restore. Like this:

private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
private Xfermode pdMode = new PorterDuffXfermode(PorterDuff.Mode.CLEAR);
private Path path = new Path();

protected void dispatchDraw(Canvas canvas) {
    int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
    super.dispatchDraw(canvas);

    paint.setXfermode(pdMode);
    path.reset();
    path.moveTo(0, getHeight());
    path.lineTo(getWidth(), getHeight());
    path.lineTo(getWidth(), getHeight() - TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, getResources().getDisplayMetrics()));
    path.close();
    canvas.drawPath(path, paint);

    canvas.restoreToCount(saveCount);
    paint.setXfermode(null);
}

Gist: https://gist.github.com/ZieIony/8480b2d335c1aeb51167

Btw. This thing is very popular recently :)