-1

I know there are many third party libraries to create a CircularImageView available but I got to know all of them are not very efficient (some do not support animations/transitions, some have performance issues).

  1. I need to create a screen similiar to the Whatsapp Contacts screen (A list with circular ImageView and some text).
  2. Need to load data in the list online.
  3. I don't want to crop image or create a bitmap copy (like this- How to Make an ImageView in Circular Shape?)
  4. Need to have touch feedback (ripple effect) on clicking the circular image

Can I achieve this without any third party library? If not please let me know the best way to do this.

Wijay Sharma
  • 439
  • 7
  • 17
  • 1
    try this one: https://stackoverflow.com/questions/25278821/how-to-round-an-image-with-glide-library – FarshidABZ Dec 26 '17 at 11:16
  • 1
    have look [this](https://stackoverflow.com/a/22105820/5110595) – Hemant Parmar Dec 26 '17 at 11:18
  • 1
    Without any third party you have to manage memory cause of converting images to bitmap and this isn't fair to spend time to handle many issues on converting images to circle image – FarshidABZ Dec 26 '17 at 11:18
  • Thanks @FarshidABZ I understand this. Could you suggest me a library that you have used and satisfies my requirements without any performance issues? – Wijay Sharma Dec 26 '17 at 11:24
  • 1
    Try loading images from url using Picasso and made them circluar with circle transform like this https://gist.github.com/julianshen/5829333 It also helps you loading same image next time more fast as it manage image cache. – Deewankshi Sharma Dec 26 '17 at 11:25
  • 3
    If you are using glide to load the images then with glide you can create circuler image – Vidhi Dave Dec 26 '17 at 11:25
  • Thanks @Hemant. But can I load an image dynamically into a layer list? – Wijay Sharma Dec 26 '17 at 11:26
  • @WijaySharma yes, have look [this](https://stackoverflow.com/questions/38159263/load-image-into-layer-list-programatically) – Hemant Parmar Dec 26 '17 at 11:29
  • i code this : LayerDrawable shape = (LayerDrawable) getResources().getDrawable(R.drawable.abc_btn_rating_star_off_mtrl_alpha); Drawable drawable = ContextCompat.getDrawable(getActivity(),R.drawable.abc_btn_rating_star_on_mtrl_alpha); shape.setDrawable(0,drawable); – Hemant Parmar Dec 26 '17 at 11:33

2 Answers2

9

You can use the next library. Add Gradle dependency:

compile 'de.hdodenhof:circleimageview:2.2.0'

Then simply add XML view:

<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"/>
Denysole
  • 3,903
  • 1
  • 20
  • 28
1

Use glide for both purpose load image and circular image.

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

Glide.with(context).load(your url).asBitmap().centerCrop().dontAnimate().placeholder(R.drawable.placeholder_card_view).error(R.drawable.placeholder_card_view).into(new BitmapImageViewTarget(imageView) {
                @Override
                protected void setResource(Bitmap resource) {
                    RoundedBitmapDrawable circularBitmapDrawable =
                            RoundedBitmapDrawableFactory.create(context.getResources(), resource);
                    circularBitmapDrawable.setCircular(true);
                    imageView.setImageDrawable(circularBitmapDrawable);
                }
            });
Vidhi Dave
  • 5,614
  • 2
  • 33
  • 55