Add a Border to an Android Layout

http://tekeye.biz/2012/add-a-border-to-an-android-layout

可参考：http://stackoverflow.com/questions/1598119/is-there-an-easy-way-to-add-a-border-to-the-top-and-bottom-of-an-android-view

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.

Developers 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.

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) :

[code lang=”xml”]<?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>[/code]

• On the root shape element the attribute android:shape is set to rectangle (shape files also supportoval, 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 theandroid: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 singleTextView 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:

[code lang=”xml”]<?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>[/code]

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

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.