How I Can Create Rounded Layout With Two Vertical Line?

Question

I want to put two vertical lines in a rounded layout (linear or relative) Like this picture: EDIT: My try:

Solution 1:

Clipping is an expensive operation, and is only truly supported on Lollipop and higher.

If you're okay with Lollipop+ only, and really want to use a RelativeLayout, you can call myView.setClipToOutline(true). If your myView has a rounded background, this will tell the system to clip all children to that rounded shape.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    myView.setClipToOutline(true);
}

If you need rounded corner clipping on pre-Lollipop versions, then the best thing to do is use an overlay to mask parts of the view you don't want to see. That is, create a drawable with opaque corners and a transparent center, and apply that on top of the views you want to clip. This won't actually clip your views, but it will provide the illusion of doing so.

More on this strategy here: https://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/

Solution 2:

If you need a transparent area outside of the rounded-corners background, masking the excess parts of the vertical lines is not an option. In this case, you can use a custom View which will work for API levels 17+:

publicclassRoundedCornersLinearLayoutextendsLinearLayout{

        private Paint backgroundPaint;
        private Paint linePaint;

        privatefloat cornerRadius;
        privatefloat line_width;
        privatefloat line_margin;
        privateRectFrect=newRectF(0, 0, 0,0);

        privatePathrectPath=newPath();
        privatePathlinePath=newPath();

        publicRoundedCornersLinearLayout(Context context) {
            super(context);
            init();
        }

        publicRoundedCornersLinearLayout(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            init();
        }

        publicRoundedCornersLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init();
        }

        privatevoidinit() {
            setWillNotDraw(false);

            // add this so Canvas.clipPath() will give the desired result also for devices running Api level 17,// see https://stackoverflow.com/a/30354461/5015207if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
                setLayerType(LAYER_TYPE_SOFTWARE, null);
            }
            backgroundPaint = newPaint(Paint.ANTI_ALIAS_FLAG);
            backgroundPaint.setColor(Color.GREEN);
            backgroundPaint.setStyle(Paint.Style.FILL);
            linePaint = newPaint(Paint.ANTI_ALIAS_FLAG);
            linePaint.setColor(Color.BLUE);
            linePaint.setStyle(Paint.Style.FILL);

            // with  <dimen name="corner_radius">60dp</dimen> in res/values/dimens.xml
            cornerRadius = getResources().getDimensionPixelSize(R.dimen.corner_radius);
            //  <dimen name="line_width">5dp</dimen>
            line_width =  getResources().getDimensionPixelSize(R.dimen.line_width);
            //  <dimen name="margin_10dp">10dp</dimen>
            line_margin = getResources().getDimensionPixelSize(R.dimen.margin_10dp);
        }

    @OverrideprotectedvoidonLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        floatmeasuredWidth= right - left;
        floatmeasuredHeight= bottom - top;
        rect.set(0, 0, measuredWidth, measuredHeight);

        rectPath.reset();
        linePath.reset();

        rectPath.addRoundRect(rect, cornerRadius, cornerRadius, Path.Direction.CW);
        linePath.addRect(measuredWidth - (line_margin + line_width), 0, measuredWidth - line_margin, measuredHeight, Path.Direction.CW);
    }

    @OverrideprotectedvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, backgroundPaint);    
        canvas.clipPath(rectPath);
        canvas.drawPath(linePath, linePaint);
    }
}