0

Can you help me design Android layout as the mockup: enter image description here

Description:

  • Orange layout with rounded radius.
  • Green layout is cut off at bottom and overflow at top
  • Yellow layout in front of Green and cut off at rounded corner of Orange.

Please help me, I was crazy with this problem.

Thank you so much!

My Code here:

Clipped view

public class ClippedView extends FrameLayout {
public ClippedView(Context context) {
    super(context);
}

public ClippedView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public ClippedView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
protected void onDraw(Canvas canvas) {
    Path clipPath = new Path();
    clipPath.addRoundRect(new RectF(canvas.getClipBounds()), 120, 120, Path.Direction.CW);
    canvas.clipPath(clipPath);
    super.onDraw(canvas);
}

}

It's cut OK but Orange layout cut all side. I want cut children only at bottom

  • 1
    You might get a better response if you share what you've already tried. – emragins Feb 16 '16 at 02:02
  • hi Emragins, I have already edit my topic, please review for me! Thanks – Nguyen Lam Phuoc Feb 16 '16 at 02:09
  • I'm not familiar with android, but I'm guessing that using a rectangular clipping as you're trying is going to be impossible. Is there an arc clipping shape? You might have to break it into pieces: bottom/top, where the bottom clips everything, but the top arc clips only orange. – emragins Feb 16 '16 at 02:33

0 Answers0