Saturday, November 14, 2015

android - Circular ImageView with border and shadow

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context=".MainActivity"
    >
    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        />
    <Button
        android:id="@+id/btn_circular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Circular It"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        />
</RelativeLayout>
MainActivity.java

package com.cfsuman.me.androidcode;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.RelativeLayout;


public class MainActivity extends AppCompatActivity {
    private Context mContext;
    private Resources mResources;
    private RelativeLayout mRelativeLayout;
    private Button mBTNCircular;
    private ImageView mImageView;

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

        // Get the application context
        mContext = getApplicationContext();

        // Get the Resources
        mResources = getResources();

        // Get the widgets reference from XML layout
        mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);
        mImageView = (ImageView) findViewById(R.id.iv);
        mBTNCircular = (Button) findViewById(R.id.btn_circular);

        // Get the bitmap from drawable resources
        final Bitmap srcBitmap = BitmapFactory.decodeResource(mResources, R.drawable.avatar_girl);

        // Display the bitmap in ImageView
        mImageView.setImageBitmap(srcBitmap);

        // Set a click listener for circular Button widget
        mBTNCircular.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Initialize a new Paint instance
                Paint paint = new Paint();

                // Get source bitmap width and height
                int srcBitmapWidth = srcBitmap.getWidth();
                int srcBitmapHeight = srcBitmap.getHeight();

                /*
                    IMPORTANT NOTE : You should experiment with border and shadow width
                    to get better circular ImageView as you expected.
                    I am confused about those size.
                */
                // Define border and shadow width
                int borderWidth = 25;
                int shadowWidth = 10;

                // destination bitmap width
                int dstBitmapWidth = Math.min(srcBitmapWidth,srcBitmapHeight)+borderWidth*2;
                //float radius = Math.min(srcBitmapWidth,srcBitmapHeight)/2;

                // Initializing a new bitmap to draw source bitmap, border and shadow
                Bitmap dstBitmap = Bitmap.createBitmap(dstBitmapWidth,dstBitmapWidth, Bitmap.Config.ARGB_8888);

                // Initialize a new canvas
                Canvas canvas = new Canvas(dstBitmap);

                // Draw a solid color to canvas
                canvas.drawColor(Color.WHITE);

                // Draw the source bitmap to destination bitmap by keeping border and shadow spaces
                canvas.drawBitmap(srcBitmap, (dstBitmapWidth - srcBitmapWidth) / 2, (dstBitmapWidth - srcBitmapHeight) / 2, null);

                // Use Paint to draw border
                paint.setStyle(Paint.Style.STROKE);
                paint.setStrokeWidth(borderWidth * 2);
                paint.setColor(Color.WHITE);

                // Draw the border in destination bitmap
                canvas.drawCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, canvas.getWidth() / 2, paint);

                // Use Paint to draw shadow
                paint.setColor(Color.LTGRAY);
                paint.setStrokeWidth(shadowWidth);

                // Draw the shadow on circular bitmap
                canvas.drawCircle(canvas.getWidth()/2,canvas.getHeight()/2,canvas.getWidth()/2,paint);

                /*
                    RoundedBitmapDrawable
                        A Drawable that wraps a bitmap and can be drawn with rounded corners. You
                        can create a RoundedBitmapDrawable from a file path, an input stream, or
                        from a Bitmap object.
                */
                // Initialize a new RoundedBitmapDrawable object to make ImageView circular
                RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(mResources, dstBitmap);

                /*
                    setCircular(boolean circular)
                        Sets the image shape to circular.
                */
                // Make the ImageView image to a circular image
                roundedBitmapDrawable.setCircular(true);

                /*
                    setAntiAlias(boolean aa)
                        Enables or disables anti-aliasing for this drawable.
                */
                roundedBitmapDrawable.setAntiAlias(true);

                // Set the ImageView image as drawable object
                mImageView.setImageDrawable(roundedBitmapDrawable);
            }
        });
    }
}
More android examples