Drawing a custom shape to load Image into

Question

I would like to draw this following custom shape in blue in order to load an image into (not a static resource drawable) :

The blank content is my content and it used to be a scrollview. I tried to use a drawable, I setted that in my LinearLayout as a background but I think I won't load my image (I currently use Picasso)

Answer 1

You can create custom imageview.

I have create below code with reference of this Tutorial

package com.example.demo;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

/**
 * Created by ketan on 1/18/2016.
 */
public class CustomImage extends ImageView {

    public CustomImage(Context ctx, AttributeSet attrs) {
        super(ctx, attrs);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap croppedBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(croppedBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bitmap, int radius) {
        Bitmap finalBitmap;
        if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
            finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                    false);
        else
            finalBitmap = bitmap;
        Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                finalBitmap.getHeight());

        /*change these value or make it dynamic*/
        Point point0_draw = new Point(0, 0);
        Point point1_draw = new Point(0, 175);
        Point point2_draw = new Point(101, 198);
        Point point3_draw = new Point(198, 175);
        Point point4_draw = new Point(198, 0);

        Path path = new Path();
        path.moveTo(point0_draw.x, point0_draw.y);
        path.lineTo(point1_draw.x, point1_draw.y);
        path.lineTo(point2_draw.x, point2_draw.y);
        path.lineTo(point3_draw.x, point3_draw.y);
        path.lineTo(point4_draw.x, point4_draw.y);
        path.lineTo(point0_draw.x, point0_draw.y);
        path.close();
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);

        return output;
    }
}

Answer 2

Do you think this will work out,

Idea is to hide certain amount and shape of the imageView to get what you want. for this you will require two drawable resources in res/drawable directory triangle_shape_left.xml and triangle_shape_right.xml

triangle_shape_left.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="-70"
            android:pivotX="90%"
            android:pivotY="75%"
            android:toDegrees="40">
            <shape android:shape="rectangle">
                <stroke
                    android:width="10dp"
                    android:color="@android:color/transparent" />
                <solid android:color="@android:color/holo_blue_bright" />
            </shape>
        </rotate>
    </item>
</layer-list>

triangle_shape_right.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="70"
            android:pivotX="15%"
            android:pivotY="75%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <stroke
                    android:width="10dp"
                    android:color="@android:color/transparent" />
                <solid android:color="@android:color/holo_blue_bright" />
            </shape>
        </rotate>
    </item>
</layer-list>

code==>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/gohan" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/triangle_shape_left" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/triangle_shape_right" />
</FrameLayout>