Android
ImageView
Border
UI Design
Android Development

Border for an Image view in Android?

Master System Design with Codemia

Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises.

Introduction

Android does not provide a dedicated border attribute on ImageView, so the usual solution is to wrap the image in a drawable or container that draws the stroke. The best approach depends on whether you want a simple rectangular border, rounded corners, or a more reusable material-style component.

Use a Shape Drawable for a Simple Border

The most common answer is a drawable resource with a transparent fill and a stroke. Apply that drawable as the background of the ImageView.

Create res/drawable/image_border.xml:

xml
1<shape xmlns:android="http://schemas.android.com/apk/res/android"
2    android:shape="rectangle">
3    <solid android:color="@android:color/transparent" />
4    <stroke
5        android:width="2dp"
6        android:color="#FF5722" />
7    <corners android:radius="8dp" />
8</shape>

Then use it in layout:

xml
1<ImageView
2    android:id="@+id/profileImage"
3    android:layout_width="96dp"
4    android:layout_height="96dp"
5    android:padding="4dp"
6    android:src="@drawable/avatar"
7    android:background="@drawable/image_border"
8    android:scaleType="centerCrop" />

Padding matters here. Without padding, the drawable border can overlap the content visually.

Wrap the Image in a Container When Layout Control Matters

If you need clearer separation between border and image content, wrap the ImageView in a layout that provides the stroke-like effect using padding and background.

xml
1<FrameLayout
2    android:layout_width="100dp"
3    android:layout_height="100dp"
4    android:padding="2dp"
5    android:background="@drawable/image_border">
6
7    <ImageView
8        android:id="@+id/profileImage"
9        android:layout_width="match_parent"
10        android:layout_height="match_parent"
11        android:src="@drawable/avatar"
12        android:scaleType="centerCrop" />
13</FrameLayout>

This is often easier to reason about when the image is loaded dynamically or when clipping and rounded corners are involved.

Use MaterialCardView for Rounded Material UI

If your project already uses Material Components, MaterialCardView is an easy way to get rounded corners and a stroke without manually maintaining shape drawables.

xml
1<com.google.android.material.card.MaterialCardView
2    android:layout_width="100dp"
3    android:layout_height="100dp"
4    app:cardCornerRadius="12dp"
5    app:strokeColor="#3F51B5"
6    app:strokeWidth="2dp">
7
8    <ImageView
9        android:layout_width="match_parent"
10        android:layout_height="match_parent"
11        android:src="@drawable/avatar"
12        android:scaleType="centerCrop" />
13</com.google.android.material.card.MaterialCardView>

This is a strong option when the app already follows Material design language and you want the border behavior to be reusable.

Keep the Image and Border Shapes Consistent

If the border is rounded but the image is not clipped to the same radius, the result looks wrong. A stroke alone does not clip the content. For rounded avatars or cards, clip the image consistently with the border container or use a library/component that supports shape appearance and clipping together.

That design detail matters more than developers often expect. Many "border bugs" are actually shape mismatch bugs.

Make Border Styles Reusable

If multiple screens need the same look, do not copy the same drawable values into several XML files. Keep one drawable resource or one style-driven component and change color or stroke width through theme resources.

For example, define a reusable color:

xml
<color name="image_border_color">#3F51B5</color>

Then reference that color from the drawable. This keeps border changes centralized and avoids small visual drift between screens. It also makes dark-theme or brand-refresh updates much easier.

If you are already using Material Components, another maintainable option is ShapeableImageView, which combines image presentation and shape handling more directly than a plain ImageView. That can reduce custom clipping code when borders and rounded corners are both part of the design system.

Common Pitfalls

  • Looking for a direct android:border attribute that does not exist on ImageView.
  • Applying a border drawable without padding, so the stroke overlaps the image.
  • Using rounded border corners while leaving the image content square.
  • Recreating the same border XML many times instead of centralizing styles.
  • Using a heavy custom view when a drawable or MaterialCardView would be simpler.

Summary

  • 'ImageView does not have a built-in border attribute.'
  • A shape drawable with stroke is the simplest border solution.
  • Wrapping the image in a container gives cleaner spacing and clipping control.
  • 'MaterialCardView is a good option for rounded, reusable material-style borders.'
  • Keep image clipping and border shape aligned so the result looks intentional.

Course illustration
Course illustration

All Rights Reserved.