Question Detail

how to get round picture in using xml code android.

6 years ago Views 1732 Visit Post Reply


Thread Reply

Hemant Sharma

- 6 years ago

If you want some simple Circle (Round) ImageView You can try this

You can make a simple circle with the white border and transparent content with the shape.

// res/drawable/circle_bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

Then make a layerlist drawable and put it as background to your imageview.

// res/drawable/round_bg.xml

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

    <item android:drawable="@drawable/ic_profilePic"/>
    <item android:drawable="@drawable/circle_bg"/>

</layer-list>

Bili Greed

- 6 years ago

As this is just a custom ImageView and not a custom Drawable or a combination of both, it can be used with all kinds of drawables, i.e. a PicassoDrawable from Picasso or other non-standard drawables (needs some testing though).

Gradle

dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.2.0'
}

Usage

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

Limitations

  • The ScaleType is always CENTER_CROP and you'll get an exception if you try to change it. This is (currently) by design as it's perfectly fine for profile images.
  • Enabling adjustViewBounds is not supported as this requires an unsupported ScaleType
  • If you use an image loading library like Picasso or Glide, you need to disable their fade animations to avoid messed up images. For Picasso use the noFade() option, for Glide use dontAnimate(). If you want to keep the fadeIn animation, you have to fetch the image into a Target and apply a custom animation yourself when receiving the Bitmap.
  • Using a TransitionDrawable with CircleImageView doesn't work properly and leads to messed up images.

Anonymous

- 6 years ago

private Bitmap getCircleBitmap(Bitmap bitmap) {
    final Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    final Canvas canvas = new Canvas(output);

    final int color = Color.RED;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawOval(rectF, paint);

    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    bitmap.recycle();

    return output;
}

and Put code in onCreate Method:

 

Bitmap bm = BitmapFactory.decodeFile(imgurl);
ImageView profileimg = (ImageView) findViewById(R.id.profilepic_circular_id);
profileimg.setImageBitmap(getCircleBitmap(bm));

Anonymous

- 6 years ago

compile 'com.github.bumptech.glide:glide:3.8.0'

 

ImageView profilebtn = (ImageView) findViewById(R.id.profilepic_circular_id);
Glide.with(this).load("http://qna.vbagetech.com/assets/images/light-background.jpg").asBitmap().centerCrop().into(new BitmapImageViewTarget(profilebtn) {
     @Override
     protected void setResource(Bitmap resource) {
         RoundedBitmapDrawable circularBitmapDrawable =
                 RoundedBitmapDrawableFactory.create(getResources(), resource);
         circularBitmapDrawable.setCircular(true);
         profilebtn.setImageDrawable(circularBitmapDrawable);
     }
 });