Cutting the corners off a layout

Question

I have a layout in android that needs to be a certain shape, i.e. this:

where the corners are cut off. Is there a way of doing this programatically without setting the background of the layout to the image? I'm looking to keep the app size as small as possible so minimising the number of drawables in the app is a must.

Rhiamon

Answer 1

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.drawable.shapes.Shape;

public class WeirdShape extends Shape {
    private static final int    COLOUR       = Color.BLACK;
    private static final float  STROKE_WIDTH = 1.0f;
    private static final float  CORNER = 35.0f;

    private final Paint border = new Paint();
    private final Path  path;  

    public WeirdShape() {
       path   = new Path();

        border.setColor      (COLOUR);
        border.setStyle      (Paint.Style.FILL);
        border.setStrokeWidth(STROKE_WIDTH);
        border.setAntiAlias  (true);
        border.setDither     (true);
        border.setStrokeJoin (Paint.Join.ROUND);  
        border.setStrokeCap  (Paint.Cap.ROUND);  
    }

    @Override
    protected void onResize(float width, float height) {
        super.onResize(width, height);

        float dx = STROKE_WIDTH/2.0f;
        float dy = STROKE_WIDTH/2.0f;
        float x  = dx;
        float y  = dy;
        float w  = width  - dx;
        float h  = height - dy;

        //RectF arc = new RectF(x,h-2*CORNER,x+2*CORNER,h);

        path.reset();
        path.moveTo(x + CORNER,y);
        path.lineTo(w - CORNER,y);
        path.lineTo(w,y + CORNER);
        path.lineTo(w, h);
        path.lineTo(x + CORNER,h);
       // path.arcTo (arc,90.0f,90.0f);
        path.lineTo(dx,h - CORNER);
        path.lineTo(dx,y);//path.lineTo(dx,y + CORNER);
        path.close();
    }


    @Override
    public void draw(Canvas canvas, Paint paint) {
        // TODO Auto-generated method stub
        canvas.drawPath(path,border);
    }
}

and then use the custom Shape in a ShapeDrawable as the background Drawable:

view.setBackground(new ShapeDrawable(new WeirdShape()));

Which looks something like:

Aholah

canvas.(path,border); what is missing from here? – Rhiamon

it was .drawPath, I have edited your answer accordingly – Rhiamon

what would i change to make the shape like my image? and fill the shape? – Rhiamon

I have edited my answer. Please check. Make sure you do a fill_parent for both width and height of your view. – Aholah

Answer 2

You can use the ShapeAppearanceModel provided by the Material Components Library:

    <LinearLayout
        android:id="@+id/layout"
        ..>

with:

    val radius = resources.getDimension(R.dimen.cornerSize16)

    val linearLayout = findViewById<LinearLayout>(R.id.layout)
    val shapeAppearanceModel = ShapeAppearanceModel()
        .toBuilder()
        .setTopRightCorner(CornerFamily.CUT, radius)
        .setBottomLeftCorner(CornerFamily.CUT, radius)
        .build()

    val shapeDrawable = MaterialShapeDrawable(shapeAppearanceModel)
    ViewCompat.setBackground(linearLayout, shapeDrawable)

Drilling