CODEWITHSUNDEEP
androidlayoutimageviewgeometrydrawing
user2875895
user2875895

Reputation:

Making an image circular with white circular border

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?

Upvotes: 12

Views: 38288

Answers (10)

Praveen Sharma
Praveen Sharma

Reputation: 4348

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

Upvotes: 1

Md Nakibul Hassan
Md Nakibul Hassan

Reputation: 2858

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

enter image description here

Upvotes: 7

Max Droid
Max Droid

Reputation: 963

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>

Upvotes: 0

Syed Raza Mehdi
Syed Raza Mehdi

Reputation: 4117

circular image view with rounded white border

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.

Upvotes: 0

Marialena
Marialena

Reputation: 817

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.

Upvotes: 4

Gopal Gopi
Gopal Gopi

Reputation: 11131

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

Upvotes: 23

user3258691
user3258691

Reputation: 11

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>

Upvotes: -12

InnocentKiller
InnocentKiller

Reputation: 5234

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"

Upvotes: 1

SweetWisher ツ
SweetWisher ツ

Reputation: 7306

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

Upvotes: 6

Palak
Palak

Reputation: 574

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

Upvotes: 0

Related Questions