Making an image circular with white circular border

后端 未结 10 2465
甜味超标
甜味超标 2021-02-19 19:32

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 wa

相关标签:
10条回答
  • 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.

    0 讨论(0)
  • 2021-02-19 20:09

    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

    0 讨论(0)
  • 2021-02-19 20:12

    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.

    0 讨论(0)
  • 2021-02-19 20:14

    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;
    }
    
    0 讨论(0)
  • 2021-02-19 20:15

    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>
    
    0 讨论(0)
  • 2021-02-19 20:16

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

    0 讨论(0)
提交回复
热议问题