Forming a semi circle from an ImageView

Question

I currently have two ImageViews, aligned like this:

https://i.stack.imgur.com/YrHcz.jpg

I want them to look like this:

https://i.stack.imgur.com/8Smif.jpg

(red is transparent)

I am assuming that you need to draw a semi circle for each picture to look like I want it to.

I am currently stuck that I am drawing a circle for each picture, since I dont rly know how to draw a semi circle :x

What it looks like:

https://i.stack.imgur.com/m4qUt.jpg

Code for my current progress:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;

public class CustomImageView extends android.support.v7.widget.AppCompatImageView {

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

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

    public CustomImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @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 roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;

        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor),
                    (int)(bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }

        Bitmap output = Bitmap.createBitmap(radius, radius,
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }

}

Activity code:

ImageView picture1= (ImageView) findViewById(R.id.picture1);
        Bitmap bitmap1= BitmapFactory.decodeResource(this.getResources(),
                R.drawable.picture1);
        ImageView picture2= (ImageView) findViewById(R.id.picture2);
        Bitmap bitmap2= BitmapFactory.decodeResource(this.getResources(),
                R.drawable.picture2);

        picture1.setImageBitmap(CustomImageView.getCroppedBitmap(bitmap1, 360));
        picture2.setImageBitmap(CustomImageView.getCroppedBitmap(bitmap2, 360));

Refer to [this answer](https://stackoverflow.com/a/32433933/7461132). — Abhi, Aug 23 '17 at 04:39

score 0 · Answer 1 · answered Aug 22 '17 at 18:45

Simply add two Drawables to your ImageView

<ImageView
    android:id="@+id/topImageView"
    android:layout_width="20dp"
    android:layout_height="10dp"
    android:background="@drawable/topImage" />
<ImageView
    android:id="@+id/bottomImageView"
    android:layout_width="20dp"
    android:layout_height="10dp"
    android:background="@drawable/bottomImage" />

topImage.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:topRightRadius="10dp"
        android:topLeftRadius="10dp" />
</shape>

bottomImage.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp" />
</shape>

as far as I know you can't rly modify an ImageView this way :x — , Aug 22 '17 at 19:57

Forming a semi circle from an ImageView

1 Answers1