Making an image circular with white circular border

Asked 19/2, 2014 at 5:27 Answered 4/7, 2018 at 17:42

android layout imageview geometry drawing

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?

Plastid answered 19/2, 2014 at 5:27 Comment(1)

I already have code for making image circular and its working fine.Now i need to put a white circular border for that.Can i do that with same code or do something else ?This is my question. – Plastid 19/2, 2014 at 6:12

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;
}

Metic answered 20/2, 2014 at 12:46 Comment(0)

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"/>

Whippoorwill answered 4/7, 2018 at 17:42 Comment(0)

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..

Harlie answered 19/2, 2014 at 6:8 Comment(2)

Check updated answer.. and have a look at here – Epidiascope 19/2, 2014 at 7:39

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.

Portauprince answered 21/1, 2015 at 10:44 Comment(0)

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"

Yaw answered 19/2, 2014 at 5:30 Comment(9)

But "@drawable/border" means that i should provide an image inside drawables named border na ? – Plastid 19/2, 2014 at 5:34

No just create one new xml file in your drawable folder if drawable folder does not exist then you can also put inside your drawable-mdpi folder then just copy and paste the content above listed in border.xml, no need to put image inside, then set this line android:background="@drawable/border" to your image-view. – Yaw 19/2, 2014 at 5:36

@maria, are you getting what i am trying to say. – Yaw 19/2, 2014 at 5:40

Can you post your updated code for both border.xml and image-view. – Yaw 19/2, 2014 at 6:16

I am not able to post code here.Something is wrong :( – Plastid 19/2, 2014 at 7:5

Please find my code here for image view here codeshare.io/2Cg9J and the code for border.xml here codeshare.io/7wQZD – Plastid 19/2, 2014 at 9:27

But your border.xml does not contain the code which i gave you, please put that code and try. – Yaw 19/2, 2014 at 9:45

See my updated code paste this code inside your border.xml again, then clean your project and run it again. – Yaw 19/2, 2014 at 9:46

This is how i got the image after doing what u said postimg.org/image/svv95w47j – Plastid 19/2, 2014 at 10:4

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

Gregggreggory answered 19/2, 2014 at 5:32 Comment(1)

This is not exact round :( its a rounded rectangle i am getting – Plastid 19/2, 2014 at 7:30

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;
}

Hecht answered 19/2, 2014 at 6:12 Comment(0)

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.

Nichol answered 2/9, 2015 at 6:39 Comment(0)

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>

Hemimorphite answered 28/11, 2016 at 17:36 Comment(0)

-12

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>

Kliman answered 19/2, 2014 at 6:1 Comment(3)

We are talking android here sir, this is some html code that could be used in a webView but ... – Drescher 14/8, 2015 at 19:48

This is CSS, not Android – Zootomy 28/10, 2016 at 16:16

Not related to android, this is CSS – Large 31/1, 2019 at 9:18

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags