How to add a shadow and a border on circular imageView android?

Question

I created a CircularImageView with this question: Create circular image view in android

Download project on GitHub

1) This is the CircularImageView class :

public class CircularImageView extends ImageView {     public CircularImageView(Context context) {         super(context);     }      public CircularImageView(Context context, AttributeSet attrs) {         super(context, attrs);     }      public CircularImageView(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);                Bitmap roundBitmap =  getCroppedBitmap(bitmap, getWidth());         canvas.drawBitmap(roundBitmap, 0, 0, null);     }      public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {         Bitmap sbmp;         if(bmp.getWidth() != radius || bmp.getHeight() != radius)             sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);         else             sbmp = bmp;          Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(), Bitmap.Config.ARGB_8888);         final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());          Paint paint = new Paint();         paint.setAntiAlias(true);         paint.setFilterBitmap(true);         paint.setDither(true);               paint.setColor(Color.parseColor("#BAB399"));          Canvas c = new Canvas(output);                 c.drawARGB(0, 0, 0, 0);         c.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f, sbmp.getWidth() / 2+0.1f, paint);         paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));         c.drawBitmap(sbmp, rect, rect, paint);          return output;     } } 

2) I use in my layout like this :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="#cccccc"     android:gravity="center"     android:orientation="vertical"     android:padding="10dp" >      <com.mikhaellopez.circularimageview.CircularImageView         android:id="@+id/imageViewCircular"         android:layout_width="@dimen/image_view_size"         android:layout_height="@dimen/image_view_size"         android:layout_gravity="center"         android:background="@drawable/border"         android:src="@drawable/image" />  </LinearLayout> 

3) Current result in picture :

How do I change this code to have a shadow and a circular border around my imageView?

Objectif result :

---

Edit 10/15/2015 :

You can used or download my GitHub library CircularImageView with all the fixes by using gradle dependency :

compile 'com.mikhaellopez:circularimageview:2.0.1' 

Answer 1

I modified the CircularImageView found here to achieve what you want.

To create a shadow around the border, I simply used these two lines:

this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder); paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK); 

You need setLayerType due to hardware acceleration on HoneyComb and up. It didn't work without it when I tried it.

Here is the full code:

import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Shader; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.widget.ImageView;  public class CircularImageView extends ImageView {     private int borderWidth = 4;     private int viewWidth;     private int viewHeight;     private Bitmap image;     private Paint paint;     private Paint paintBorder;     private BitmapShader shader;      public CircularImageView(Context context)     {         super(context);         setup();     }      public CircularImageView(Context context, AttributeSet attrs)     {         super(context, attrs);         setup();     }      public CircularImageView(Context context, AttributeSet attrs, int defStyle)     {         super(context, attrs, defStyle);         setup();     }      private void setup()     {         // init paint         paint = new Paint();         paint.setAntiAlias(true);          paintBorder = new Paint();         setBorderColor(Color.WHITE);         paintBorder.setAntiAlias(true);         this.setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);         paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);     }      public void setBorderWidth(int borderWidth)     {         this.borderWidth = borderWidth;         this.invalidate();     }      public void setBorderColor(int borderColor)     {         if (paintBorder != null)             paintBorder.setColor(borderColor);          this.invalidate();     }      private void loadBitmap()     {         BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable();          if (bitmapDrawable != null)             image = bitmapDrawable.getBitmap();     }      @SuppressLint("DrawAllocation")     @Override     public void onDraw(Canvas canvas)     {         // load the bitmap         loadBitmap();          // init shader         if (image != null)         {             shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);             paint.setShader(shader);             int circleCenter = viewWidth / 2;              // circleCenter is the x or y of the view's center             // radius is the radius in pixels of the cirle to be drawn             // paint contains the shader that will texture the shape             canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth - 4.0f, paintBorder);             canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter - 4.0f, paint);         }     }      @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)     {         int width = measureWidth(widthMeasureSpec);         int height = measureHeight(heightMeasureSpec, widthMeasureSpec);          viewWidth = width - (borderWidth * 2);         viewHeight = height - (borderWidth * 2);          setMeasuredDimension(width, height);     }      private int measureWidth(int measureSpec)     {         int result = 0;         int specMode = MeasureSpec.getMode(measureSpec);         int specSize = MeasureSpec.getSize(measureSpec);          if (specMode == MeasureSpec.EXACTLY)         {             // We were told how big to be             result = specSize;         }         else         {             // Measure the text             result = viewWidth;         }          return result;     }      private int measureHeight(int measureSpecHeight, int measureSpecWidth)     {         int result = 0;         int specMode = MeasureSpec.getMode(measureSpecHeight);         int specSize = MeasureSpec.getSize(measureSpecHeight);          if (specMode == MeasureSpec.EXACTLY)         {             // We were told how big to be             result = specSize;         }         else         {             // Measure the text (beware: ascent is a negative number)             result = viewHeight;         }          return (result + 2);     } } 

I hope it helps!

.

EDIT

I forked your CircularImageView and added support for selector overlays. I also improved drawing performance significantly...

https://github.com/Pkmmte/CircularImageView