How to put border of the image?

Question

I am using glide library to load the image.

I am not able to get the border of the image. How will I set the image border.

 Glide.with(getApplicationContext()).load(image_path).asBitmap().centerCrop().into(new BitmapImageViewTarget(profile_pic) {
            @Override
            protected void setResource(Bitmap resource) {
                RoundedBitmapDrawable circularBitmapDrawable =
                        RoundedBitmapDrawableFactory.create(MainActivity.this.getResources(), resource);
                circularBitmapDrawable.setCircular(true);

                profile_pic.setImageDrawable(circularBitmapDrawable);
            }
        });


 <ImageView
        android:id="@+id/profile_pic"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/quila"
        app:layout_behavior="profile.AvatarImageBehavior"
        app:finalHeight="32dp"
        app:finalYPosition="2dp"
        app:startHeight="2dp"
        app:startToolbarPosition="2dp"
        app:startXPosition="2dp"/>

I have searched through net and found this article but i don't want to add another library. Can anyone help me with this?

Ak9637 · Answer 1 · 2016-12-03T08:05:50.310

1

not a optimal solution ,instead a workaround solution simply put your image view inside a layout and set background of that layout,and set margin of the imageview to the border size you want . you simply need to design the background accordingly

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:left="1dp" android:top="1dp" android:right="1dp"
    android:bottom="1dp" />
</shape>

set this drawable as your background of the imageview

edited Dec 03 '16 at 08:05

answered Dec 03 '16 at 07:56

Ak9637

990
6
12

thanks for help.. but I don't think this is right way – Ankur Khandelwal Dec 03 '16 at 07:57
i agree,but the other route will be to define your own custom imageview with the border property,which will indirectly use the concept i mentioned,try posting an image of the exact presentation u r looking for,that might help – Ak9637 Dec 03 '16 at 08:01
you can also get positions of your imageview and then draw a canvas of border around it – Ak9637 Dec 03 '16 at 08:04
try the solution mentioned above, but i gotta ask how r u making the imageview round ? – Ak9637 Dec 03 '16 at 09:33
RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(MainActivity.this.getResources(), resource); circularBitmapDrawable.setCircular(true); – Ankur Khandelwal Dec 03 '16 at 10:02

zMabrook · Answer 2 · 2016-12-03T08:15:20.317

You can use hdodenhof/CircleImageView for this (Perfect for avatars and profile pics).

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

OR:

You can add border to any view natievly by creating a drawable border

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/colorPrimary"/> <corners android:radius="80dp" /> <stroke android:width="5px" android:color="#ffffff" /> </shape>

And use it on any view a Button for example:

<Button
        android:id="@+id/loginTwitterButton"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:text="Twitter"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:layout_gravity="center_horizontal"
        android:background="@drawable/border"
        android:layout_marginTop="10dp"
        />

abhishesh · Answer 3 · 2016-12-03T08:49:24.563

You can use GlideTransformation to transform Bitmaps.

public class BorderTransformation extends BitmapTransformation {

    public BorderTransformation(Context context) {
        super(context);
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap bmp, int outWidth, int outHeight) {
    Bitmap sbmp;
    int radius = bmp.getWidth();
    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
        float factor = smallest / radius;
        sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
    } else {
        sbmp = bmp;
    }

    Bitmap output = Bitmap.createBitmap(radius, radius,
            Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Paint stroke = new Paint();

    final Rect rect = new Rect(0, 0, radius, radius);

    paint.setAntiAlias(true);
    stroke.setAntiAlias(true);

    paint.setFilterBitmap(true);
    stroke.setFilterBitmap(true);

    paint.setDither(true);
    stroke.setDither(true);

    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.RED);
    stroke.setColor(Color.YELLOW); //border color
    stroke.setStyle(Paint.Style.STROKE);
    stroke.setStrokeWidth(14f); //border width
    canvas.drawCircle(radius / 2 + 0.7f,
            radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    canvas.drawCircle(radius / 2 + 0.7f,
            radius / 2 + 0.7f, radius / 2 - stroke.getStrokeWidth()/2 +0.1f, stroke);

    return output;
    }

    @Override
    public String getId() {
        return this.getClass().getName();
    }
}

And add transform to glide where you are loading your image, like

        Glide.with(getActivity())
                .load(test.getImg())
                .transform(new BorderTransformation(getContext()))
                .into(vh.mImgBanner);

How to put border of the image?

3 Answers3