Add a Border to an Android Layout

The interface to an Android Application must be easy to use, intuitive and pleasing to the eye. The Android SDK makes it easy to generate screens, but the developer should add a little extra to make the interface attractive. Fortunately Android also makes it easy to enhance an interface because layouts and views have attributes that affect the appearence when a screen is displayed. One of the most versatile is the background attribute, it can be set to colors, images, nine patch files and shapes. In this article a border is placed around an area of the screen to add interest to the interface.

The res/drawable folderDevelopers first come across the res/drawable folder when dealing with the Apps launcher icon, as well as other image files (PNG or JPG). The folder can also hold other graphical resources, including XML definitions of shapes, colours and animations. Any drawable can be referenced from any screen. In this simple example project a shape is used to add a rectangular border with rounded corners to a layout file.

Create a new project in Eclipse (if new to programming see Your First Android Java Program), give it a name, for example Layout Border. Use the Eclipse Package Explorer to highlight the res/drawable folder. Use the context menu or the File menu and select New then Android XML File. In the New Android XML File dialog the Resource Type is set to Drawable and Project is set to Layout Border (or the name you gave it). Enter a file name, for example customborder.xml, then select shape as the root element.

New Android XML File for a Shape

Click Finish, and in the file that is created the code is added to define a rectangle that has rounded corners, some padding and a solid color. The final code will be explained below but looks like this (see Copying Code from the Articles for copying tips) :

<?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"/>
  <solid android:color="#CCCCCC"/>
</shape>
  • On the root shape element the attribute android:shape is set to rectangle (shape files also support oval, line and ring). Rectangle is the default value so this attribute could be left out if a rectangle is being defined. See the Android documentation on shapes for detailed information on a shape file.
  • The element corners sets the rectangle corners to be rounded, it is possible to set a different radius on each corner (see the Android reference).
  • The padding attributes are used to move the contents of the View to which the shape is applied, to prevent the contents overlapping the border.
  • The border color here is set to a light gray (CCCCCC hexadecimal RGB value).

Shapes also support gradients but that is not being used here, again see the Android resources to see how a gradient is defined. To use the shape reference the drawable from a layout or view using the android:background attribute, in this case it would be used with android:background="@drawable/customborder".

Here it is applied to a layout, to which other views can be added as normal. In this example a single TextView has been added, the text is white (FFFFFF hexadecimal RGB). The TextView’s background is set to blue, plus some transparency to reduce the brightness (A00000FF hexadecimal alpha RGB value). Finally the layout is offset from the screen edge by placing it into another layout with a small amount of padding. Replace the existing layout code in the main.xml file in res/layout with this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:padding="5dp">
  <LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/customborder">
    <TextView android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:text="Text View"
      android:textSize="20dp"
      android:textColor="#FFFFFF"
      android:gravity="center_horizontal"
      android:background="#A00000FF" />
  </LinearLayout>
</LinearLayout>

Run the App and the result will be similar to this:

Android Layout with a Border with Rounded Edges

Play around with values and attributes to see what effect they have on the layout, use the Android documentation to understand what the attributes do. Try adding other layouts and controls to experiment with different looks. Getting an App to look good adds to its appeal.

Download the code for this article ready for importing into an Android project. The code can also be accessed via the Android Example Projects page. See the article Move Android Code Between PCs Running Eclipse on how to import example code into an Eclipse project. A version of this article appears in the Android Cookbook.

4 thoughts on “Add a Border to an Android Layout

  1. I found it very useful. thanks

    But I have a little question. Can I have a white background and give a color only to the border of the button?

    • Buttons need three drawables to be fully supported; for the normal, focus and pressed states. By default 9-patch files are used for button backgrounds. XML shape files can be used as well, to get what you require stack two shapes with different colors using a layer-list:

      <layer-list xmlns:android="schema-address">
      <item><shape>
      <corners android:radius="5dp"/>
      <padding android:left="5dp" android:right="5dp" android:top="5dp" android:bottom="5dp"/>
      <solid android:color="#FFCCCCCC"/>
      </shape></item>
      <item><shape>
      <padding android:left="4dp" android:right="4dp" android:top="4dp" android:bottom="4dp"/>
      <solid android:color="#FFFFFFFF"/>
      </shape></item>
      </layer-list>

      Save it in the drawables folder use it like other drawables. To support button states you’ll need three different versions referenced from a selector drawable.

  2. Pingback: Pop-up Window in Android | Tek Eye

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.