Making an image circular with white circular border

Question

How to make an image circular and give it white circular border? Is it necessary to use two image views – one for the image and other for the white border? Is there any other way to do this?

Answer 1

Try this...

public static Bitmap getCircularBitmapWithWhiteBorder(Bitmap bitmap,
        int borderWidth) {
    if (bitmap == null || bitmap.isRecycled()) {
        return null;
    }

    final int width = bitmap.getWidth() + borderWidth;
    final int height = bitmap.getHeight() + borderWidth;

    Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(shader);

    Canvas canvas = new Canvas(canvasBitmap);
    float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
    canvas.drawCircle(width / 2, height / 2, radius, paint);
    paint.setShader(null);
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(Color.BLUE);
    paint.setStrokeWidth(borderWidth);
    canvas.drawCircle(width / 2, height / 2, radius - borderWidth / 2, paint);
    return canvasBitmap;
}

Answer 2

First add below line to build.gradle file

implementation 'de.hdodenhof:circleimageview:2.2.0'

then add following XML code to xml file:

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

Answer 3

First get Circulat image with your code. Then apply this xml :

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#333440" android:endColor="#333440"
        android:angle="270"/>
</shape>

Then add a relative layout and add an imageview to it.Arrange it to the center of relative layout.And set this circle shape as Imageview's background.Then place your circular imageview above previously added imageview.Arrange it also to center.By changing your circular imageview margin you will get the desired border effect. Hope this will help you..

Answer 4

This may not be the best way and you may not be able to change a lot of properties, but it is surely the easiest way. I just used this library and I made a circular imageview that has also a border.

---

So, this is my solution:

First, I put this in my build.grandle:

`compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'`

Second, I put this in my .xml layout file:

 <com.github.siyamed.shapeimageview.CircularImageView
                    android:layout_width="150dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_height="150dp"
                    android:id="@+id/photo"
                    app:siBorderWidth="5dp"
                    app:siBorderColor="#ffffff"
                    android:layout_alignParentTop="true"
                    android:layout_centerHorizontal="true" />

In my .java file, this is the way I can take or set the image to the CircularImageView:

final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo);

photo.setBackgroundResource(R.drawable.female);

---

That's all I've done to do the an image circular with white border.

Answer 5

No it is not necessary that you have to use two image views one for the image and other for the white border. You can create one new XML file like below

border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="5dp" android:color="#000000" />
<padding android:left="5dp" android:top="5dp" android:right="5dp"
    android:bottom="5dp" />
</shape>

and then set it to your image-view. Like add below line to your image-view.

android:background="@drawable/border"

Answer 6

Here is a nice tutorial for it.

in this tutorial they use a Method:-

/* * Making image in circular shape */

public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
  // TODO Auto-generated method stub
  int targetWidth = 50;
  int targetHeight = 50;
  Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
                            targetHeight,Bitmap.Config.ARGB_8888);

                Canvas canvas = new Canvas(targetBitmap);
  Path path = new Path();
  path.addCircle(((float) targetWidth - 1) / 2,
  ((float) targetHeight - 1) / 2,
  (Math.min(((float) targetWidth), 
                ((float) targetHeight)) / 2),
          Path.Direction.CCW);

                canvas.clipPath(path);
  Bitmap sourceBitmap = scaleBitmapImage;
  canvas.drawBitmap(sourceBitmap, 
                                new Rect(0, 0, sourceBitmap.getWidth(),
    sourceBitmap.getHeight()), 
                                new Rect(0, 0, targetWidth,
    targetHeight), null);
  return targetBitmap;
 }

For providing border around your imageView :

Add this xml inside your drawable folder :

=>rounded.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="@android:color/white" />

    <stroke
        android:width="3dip"
        android:color="#FF0000" />

    <corners android:radius="10dp" />

    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

</shape>

Hope , this will helps

Answer 7

Try This
    public static Bitmap createRoundImage(Bitmap loadedImage) {
    System.out.println("loadbitmap" + loadedImage);
    loadedImage = Bitmap.createScaledBitmap(loadedImage, 100, 100, true);
    Bitmap circleBitmap = Bitmap.createBitmap(loadedImage.getWidth(),
            loadedImage.getHeight(), Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(loadedImage,
            Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(shader);

    Canvas c = new Canvas(circleBitmap);
    c.drawCircle(loadedImage.getWidth() / 2, loadedImage.getHeight() / 2,
            loadedImage.getWidth() / 2, paint);
    return circleBitmap;
}

Answer 8

By using this link i have successfully made it, using a FrameLayout and two RoundedImageView. The logic behind what i did is one is a wrapper view and one is the view with the profile image. Here is my code

XML code:

    <FrameLayout
    android:id="@+id/llImageProfile"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="40dp"
    android:foregroundGravity="center">


    <com.pepperpk.frt.mallpk.custom.RoundedImageView
        android:id="@+id/circleViewOverlay"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center" />

    <com.pepperpk.frt.mallpk.custom.RoundedImageView
        android:id="@+id/circleView"
        android:layout_width="95dp"
        android:layout_height="95dp"
        android:layout_gravity="center" />
</FrameLayout>

JAVA code :

profileWrapper.setImageResource(R.drawable.white_background);
profile.setImageResource(R.drawable.profile);

hope it helps, if you have any confusion please comment below.

Answer 9

I tried keeping ImageView inside CardView and adjusted radius of the CardView accordingly.

NetworkImageView is the one from Volley Library. Same Should work with ImageView as well.

<android.support.v7.widget.CardView
            android:layout_width="105dp"
            android:layout_height="105dp"
            android:layout_margin="5dp"
            android:elevation="0dp"
            android:id="@+id/card_image_view"
            app:cardCornerRadius="53dp"
            android:innerRadius="0dp"
            android:background="@color/reco_widget_search_background"
            android:shape="ring"
            android:thicknessRatio="1">

            <NetworkImageView
                android:id="@+id/circle_networkImageViewProduct"
                android:layout_width="105dp"
                android:layout_height="105dp"
                android:backgroundTint="@color/white"
                android:tint="@color/white"
                android:scaleType="fitXY"
                android:layout_gravity="center"
                android:visibility="gone"
                />
        </android.support.v7.widget.CardView>

Answer 10

Try this:

<html>
<head>
<style type="text/css">
img {
border: 30px solid #FFFFFF;
border-radius: 130px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
body {
background: #000;
}
</style>
<meta charset="utf-8">
<title>try</title>
</head>
<body>
<img src="http://icons.iconarchive.com/icons/danleech/simple/1024/google-icon.png" width="48" height="48" alt=""/>
</body>
</html>