How can I create a border around an Android LinearLayout?

Question

I have one big layout, and one smaller layout inside of it.

How do I create a line border around the small layout?

Have You tried http://stackoverflow.com/questions/3496269/how-to-put-a-border-around-an-android-textview ? — sandrstar, Feb 27 '13 at 11:53

Anup Cowkur · Accepted Answer · 2017-10-05T08:55:57.067

310

Sure. You can add a border to any layout you want. Basically, you need to create a custom drawable and add it as a background to your layout. example:

Create a file called customborder.xml in your drawable folder:

<?xml version="1.0" encoding="UTF-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
   <corners android:radius="20dp"/> 
   <padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
   <stroke android:width="1dp" android:color="#CCCCCC"/>
 </shape>

Now apply it as a background to your smaller layout:

<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/customborder">

That should do the trick.

Also see:

edited Oct 05 '17 at 08:55

answered Feb 27 '13 at 11:54

Anup Cowkur

20,443
6
51
84

32

will fill color in rectangle. u need to use instead to draw border only. – NightFury Nov 10 '13 at 12:27
2

The trick here is actually the , took me a while to find why my shape did not work. With padding it works fine. – John Mar 27 '14 at 18:50
3

Both `` and `` fill the entire rectangle? Is this a bug in my code? – mr5 May 05 '14 at 06:40
13

Add , its works fine. – Pierry Sep 25 '14 at 14:40
how to hide border on any one side alone ? – Kamalakannan J Mar 31 '16 at 14:18
1

Pierry 's comment makes this answer correct. Otherwise you can only get a full filled background. – kagkar Nov 17 '16 at 21:51
@kagkar you are correct. I've edited it to reflect this. Thanks for the fix Pierry. – Anup Cowkur Nov 18 '16 at 07:10

score 27 · Answer 2 · answered Feb 27 '13 at 11:56

Creat XML called border.xml in drawable folder as below :

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item> 
    <shape android:shape="rectangle">
      <solid android:color="#FF0000" /> 
    </shape>
  </item>   
    <item android:left="5dp" android:right="5dp"  android:top="5dp" >  
     <shape android:shape="rectangle"> 
      <solid android:color="#000000" />
    </shape>
   </item>    
 </layer-list>

then add this to linear layout as backgound as this:

     android:background="@drawable/border"

score 11 · Answer 3 · answered Feb 27 '13 at 12:00

Try this:

For example, let's define res/drawable/my_custom_background.xml as:

(create this layout in your drawable folder) layout_border.xml

  <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:height="2dp"
                android:color="#FF0000" />
            <solid android:color="#000000" />
            <padding android:left="1dp" android:top="1dp" android:right="1dp"
                android:bottom="1dp" />

            <corners android:radius="1dp" android:bottomRightRadius="5dp"
                android:bottomLeftRadius="0dp" android:topLeftRadius="5dp"
                android:topRightRadius="0dp" />
        </shape>
    </item>

</layer-list>

main.xml

<LinearLayout 
    android:layout_gravity="center"
    android:layout_width="200dp" 
    android:layout_height="200dp"   
    android:background="@drawable/layout_border" />
</LinearLayout>

score 11 · Answer 4 · answered Feb 28 '13 at 06:38

11

Create a one xml file in drawable folder

<stroke
    android:width="2dp"
    android:color="#B40404" />

<padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />

<corners android:radius="4dp" />

Now call this xml to your small layout background

android:background="@drawable/yourxml"

answered Feb 28 '13 at 06:38

Vani

131
1
4

Element stroke is not allowed here. – dot_zero Feb 12 '16 at 21:47

s-hunter · Answer 5 · 2016-03-24T15:18:48.977

This solution will only add the border, the body of the LinearLayout will be transparent.

First, Create this border drawable in the drawable folder, border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android= "http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="2dp" android:color="#ec0606"/>
    <corners android:radius="10dp"/>
</shape>

Then, in your LinearLayout View, add the border.xml as the background like this

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/border">

Vikram singh · Answer 6 · 2017-10-30T05:47:09.227

4

you can do it Pragmatically also

  GradientDrawable gradientDrawable=new GradientDrawable();
   gradientDrawable.setStroke(4,getResources().getColor(R.color.line_Input));

Then set the background of layout as :

LinearLayout layout = (LinearLayout ) findViewById(R.id.ayout); layout .setBackground(gradientDrawable);

edited Oct 30 '17 at 05:47

answered Sep 28 '16 at 11:28

Vikram singh

343
1
3
15

score 4 · Answer 7 · answered Jan 14 '18 at 14:33

I'll add Android docs link to other answers.

https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

It describes all attributes of the Shape Drawable and stroke among them to set the border.

Example:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="1dp" android:color="#F00"/>
  <solid android:color="#0000"/>
</shape>

Red border with transparent background.

The solid part allows setting tint to border only. +1 – aksh1618 Jan 28 '19 at 01:54 — aksh1618, Jan 28 '19 at 01:54

score 1 · Answer 8 · answered May 16 '19 at 22:28

Don't want to create a drawable resource?

  <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/black"
    android:minHeight="128dp">

    <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_margin="1dp"
      android:background="@android:color/white">

      <TextView ... />
    </FrameLayout>
  </FrameLayout>

score 0 · Answer 9 · answered Aug 11 '20 at 05:30

Try This in your res/drawable

    <?xml version="1.0" encoding="UTF-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
  <shape
    android:shape="rectangle">
    <padding android:left="15dp"
        android:right="15dp"
        android:top="15dp"
        android:bottom="15dp"/>
    <stroke android:width="10dp"
        android:color="@color/colorPrimary"/>
  </shape>
</item><item android:left="-5dp"
        android:right="-5dp"
        android:top="-5dp"
        android:bottom="-5dp">
  <shape android:shape="rectangle">
    <solid android:color="@color/background" />
  </shape></item></layer-list>

score 0 · Answer 10 · answered Sep 19 '22 at 18:51

Nobody seems to be using the method we came up with so I thought I would share, as it involves much simpler code. Simply nest one layout inside another with padding, and the outer one can be colored, making a frame.

        <androidx.appcompat.widget.LinearLayoutCompat
        android:id="@+id/llSignatureBorder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@android:color/black"
        android:orientation="vertical"
        android:padding="4dp">

        <com.yourmom.mobiledriverapp.Controls.SignatureArea
            android:id="@+id/signatureArea"
            android:layout_width="@dimen/signaturearea_width"
            android:layout_height="@dimen/signaturearea_height"
            android:layout_gravity="center_horizontal"
            android:layout_margin="10dp" />

    </androidx.appcompat.widget.LinearLayoutCompat>

How can I create a border around an Android LinearLayout?

10 Answers10

Linked