How do I draw a custom quadratic shape in Android Studio for use as an image placeholder?

Question

I'd like to make a shape similar to this one and use it as an image placeholder. I've learned how to make circles and rectangles using

canvas.drawRect(0,0,500,250,paint);

and from what I've browsed on here I gathered that I need to use paths as illustrated in this page. But I don't know where to begin when I look at the paths page previously linked. How do I create this custom shape, preferably to match the width of the screen? Thanks in advance!

This is my code so far to create a red rectangle that I'll eventually use to insert an image into:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Paint paint = new Paint();
    paint.setColor(Color.parseColor("#CD5C5C"));
    Bitmap bg = Bitmap.createBitmap(480,800, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bg);
    canvas.drawRect(0,0,500,250,paint);
    RelativeLayout rl = (RelativeLayout)
    findViewById(R.id.activity_main);
    rl.setBackgroundDrawable(new BitmapDrawable(bg));
}

Answer 1

I used the cheesesquare demo to test this out.

First I started with a custom view for the triangle.

Note that you have to add a color named background to your colors.xml -or- use the color you have configured for the list background instead.

public class TriangleView extends View {

    private Path mPath = new Path();

    private Paint mPaint = new Paint();


    public TriangleView(Context context) {
        super(context);
    }

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

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

    @TargetApi(21)
    public TriangleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        mPath.reset();
        mPath.moveTo(0,0);
        mPath.lineTo(0, getHeight());
        mPath.lineTo(getWidth(), getHeight());
        mPath.close();

        int backgroundColor = getResources().getColor(R.color.background);

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(backgroundColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(mPath, mPaint);
    }
}

Here's how I worked it into the layout. The triangle covers the bottom corner of the image. This is just the collapsing toolbar portion of the layout:

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="none">

                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop" />

                <com.example.fixme.TriangleView
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:layout_gravity="bottom"/>

            </FrameLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

As long as you don't need parallax scrolling on the image, this seems to work okay.