Android
LinearLayout
Border
UI Design
Android Development

Android how to draw a border to a LinearLayout

Master System Design with Codemia

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

Introduction

The normal way to draw a border around a LinearLayout in Android is not to subclass the layout and paint manually. In most cases, you attach a shape drawable as the background and define the stroke there.

That approach is simple, reusable, and keeps the visual styling in resources instead of Java or Kotlin code. It is also the easiest way to combine border color, width, fill, and corner radius in one place.

Use a Shape Drawable as the Background

Create a drawable resource such as res/drawable/bordered_box.xml:

xml
1<?xml version="1.0" encoding="utf-8"?>
2<shape xmlns:android="http://schemas.android.com/apk/res/android"
3    android:shape="rectangle">
4
5    <solid android:color="@android:color/white" />
6
7    <stroke
8        android:width="2dp"
9        android:color="@android:color/holo_blue_dark" />
10
11    <corners android:radius="8dp" />
12
13    <padding
14        android:left="8dp"
15        android:top="8dp"
16        android:right="8dp"
17        android:bottom="8dp" />
18</shape>

Then apply it to the LinearLayout:

xml
1<LinearLayout
2    android:layout_width="match_parent"
3    android:layout_height="wrap_content"
4    android:orientation="vertical"
5    android:background="@drawable/bordered_box">
6
7    <TextView
8        android:layout_width="wrap_content"
9        android:layout_height="wrap_content"
10        android:text="Bordered content" />
11
12</LinearLayout>

This is the standard solution because it is declarative and easy to tweak later.

Why Background Drawables Are Better Than Manual Drawing

Beginners sometimes try to:

  • add extra nested views just to fake a border
  • override drawing methods for a simple rectangle
  • use margins as if they were borders

Those approaches usually add complexity without any real benefit. A shape drawable is made for exactly this kind of job.

It also keeps the border reusable. The same @drawable/bordered_box can be applied to multiple layouts or even other view types.

Customize the Border

The drawable can control more than just the line:

  • 'stroke defines width and color'
  • 'solid defines the fill color'
  • 'corners rounds the edges'
  • 'padding gives content breathing room inside the border'

If you want only a transparent interior with a border:

xml
<solid android:color="@android:color/transparent" />

If you want a thinner stroke:

xml
<stroke
    android:width="1dp"
    android:color="#808080" />

This flexibility is why shape drawables are the usual answer for bordered containers in Android layouts.

State-Based Borders

If the border should change when pressed, selected, or focused, use a selector that points to different drawables. For example, a pressed border and a normal border can be switched automatically based on view state.

That is much cleaner than changing colors by hand in click listeners when the requirement is purely visual.

Material Components Note

If your screen uses Material components heavily, a MaterialCardView may be an even better fit than a raw LinearLayout, because it already supports stroke color and stroke width in a higher-level component.

But if the requirement is specifically "add a border to this LinearLayout," the shape drawable background remains the standard direct answer.

Keep Border and Content Spacing Separate

Another practical detail is to avoid confusing the drawable's internal padding with the view's external layout_margin. Padding controls the spacing inside the bordered box, while margin controls the spacing around it. Using both intentionally makes the final result look much cleaner.

Common Pitfalls

  • Using margins to simulate a border. Margins create outside spacing, not a visible outline.
  • Forgetting a solid color or transparent fill and then being surprised by the default background behavior.
  • Hard-coding pixel widths instead of using dp.
  • Creating extra nested layouts just to fake a border effect.
  • Manually drawing borders in code when a simple XML drawable would be easier to maintain.

Summary

  • The usual way to add a border to a LinearLayout is a shape drawable background with a stroke.
  • Put the styling in res/drawable and reference it from the layout XML.
  • Use dp for stroke width and radius so the result scales correctly across devices.
  • Add selectors if the border should change by state.
  • Consider MaterialCardView if the UI already follows Material patterns and needs richer card-like styling.

Course illustration
Course illustration

All Rights Reserved.