Android image round and rectangular screenshots

In the project, some pictures are often cut as the head portrait, which needs to be round or rectangular.
1. Previous rendering

2. The background is passed from the selected picture to the displayed one

Main idea
1. Draw four rectangles around the rectangle, which are transparent black. Pay attention not to overlap the four rectangles drawn, or there will be black overlapping frames that cannot be viewed. After drawing the frame, draw a rectangle with a white frame in the middle.
2. Circle draw an arc with a radius of half the height around it, which is transparent black. After drawing the border, draw a circle with a white widening in the middle
3. Get bitmap, use Bitmap.drawBitmap(); method, get rectangular or circular bitmap

3. Rectangle main code

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = this.getWidth();
        int height = this.getHeight();

        mWidth = width - mHorizontalPadding * 2;
        mVerticalPadding = (height - mWidth) / 2;
        mPaint.setColor(0xaa000000);
        //Draw left
        canvas.drawRect(0, 0, mHorizontalPadding, height, mPaint);
        //Draw up
        canvas.drawRect(mHorizontalPadding, 0, width - mHorizontalPadding, mVerticalPadding, mPaint);
        //Draw bottom
        canvas.drawRect(mHorizontalPadding, height - mVerticalPadding, width - mHorizontalPadding, height, mPaint);
        //Draw right
        canvas.drawRect(width - mHorizontalPadding, 0, width, height, mPaint);
        //Draw a rectangular border
        mPaint.setColor(mBorderColor);
        mPaint.setStrokeWidth(mBorderWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawRect(mHorizontalPadding, mVerticalPadding, width - mHorizontalPadding, height - mVerticalPadding, mPaint);
    }

4. Circle main code

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = this.getWidth();
        int height = this.getHeight();

        int innerCircle = dip2px(mContext, 150); 
        int ringWidth = height;

        //Draw circles
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(2);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(width / 2, height / 2, innerCircle, mPaint);

        //Draw the background around the circle
        mPaint.setColor(0xaa000000);
        mPaint.setStrokeWidth(ringWidth);
        canvas.drawCircle(width / 2, height / 2, innerCircle + 1 + ringWidth
                / 2, mPaint);

    }

5. Layout main code

<com.tongju.common.widget.view.ClipImageView
        android:id="@+id/src_pic"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <com.tongju.common.widget.view.ClipRectangleView
        android:id="@+id/clipview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

6. Activity main code

@Route(path = RouterPath.ROUTER_COMMON_IMAGE_CLIP)
public class ClipImageActivity extends BaseActivity implements View.OnClickListener {

    private ClipImageView mClipImageView;

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

    @Override
    protected BasePresenter createPresenter() {
        return null;
    }

    @Override
    protected void findViews() {
        this.mClipImageView = findViewById(R.id.src_pic);
        findViewById(R.id.iv_back).setOnClickListener(this);
        findViewById(R.id.tv_use).setOnClickListener(this);
    }

    @Override
    protected void init() {
    //Take a picture or choose a photo album. Send the uri
        Uri uri = getIntent().getParcelableExtra("image");
        Glide.with(this).load(uri).apply(new RequestOptions()
                .skipMemoryCache(true)
                .diskCacheStrategy(DiskCacheStrategy.NONE))
                .transition(withCrossFade()).into(mClipImageView);
    }

    @Override
    public void onClick(View v) {
        int id = v.getId();
        if (id == R.id.iv_back) {
            finish();
        } else if (id == R.id.tv_use) {
            Bitmap bitmap = mClipImageView.rectangleClip();
            //In this case, the bitmap obtained through EventBus delivery is limited by the size of the bundle
            EventBus.getDefault().post(new MGetBitmap(bitmap));
            finish();
        }
    }

}

github code
https://github.com/llayjun/android_common_use/tree/master/%E7%9F%A9%E5%BD%A2%E5%9C%86%E5%BD%A2%E8%A3%81%E5%89%AA%E5%A4%B4%E5%83%8F%E5%8A%9F%E8%83%BD

Tags: Android github

Posted on Thu, 02 Apr 2020 15:25:08 -0700 by sudhakararaog