Custom CircleImageView border

Question

I'm trying to build a messaging app and I want to know if it's possible to recreate the sender image and name in XML in one shape/View

I want to make a CircleImageView with bent shape like in this picture

The image that i want to recreate

The reason I want it to be one shape is that i want to be able to change the color programatically.

PS:Right now I managed to get close to what I want by putting a TextView behind a CircleImageView.

take a look at https://stackoverflow.com/q/22105775/10859114 — Alirezaarabi, Apr 14 '20 at 01:10
i think background green is an image. Then you should code the xml in the following order. CircleImageView -> background green -> textview. — Nguyễn Trung Hiếu, Apr 14 '20 at 02:11

score 0 · Answer 1 · answered Apr 14 '20 at 02:41

You can easily create a TextView with a drawable depending on your needs e.g. TextView with drawableLeft, drawableRight, drawableTop, drawableBottom, you can also add a drawablePadding as well as play with gravity, layout_gravity, layout_height for positioning of text vs image.

and then you can use Glide to load the images, you can customize the border as you want:

Glide.with(myFragmentOrActivity)
         .load(imageUrl)
         .apply(RequestOptions.circleCropTransform())
         .into(new CustomTarget<Drawable>(100,100) {

        @Override
        public void onResourceReady(@NonNull Drawable resource, @Nullable Transition<? super Drawable> transition)
        {
            left.setCompoundDrawablesWithIntrinsicBounds(null, resource, null, null);
        }

        @Override
        public void onLoadCleared(@Nullable Drawable placeholder)
        {
            left.setCompoundDrawablesWithIntrinsicBounds(null, placeholder, null, null);
        }
    });

Custom CircleImageView border

1 Answers1