Using an Android View to display a line

Here’s a cool trick I’ve used a couple times to display a horizontal line on the screen between widgets. It uses an Android View with a background color.

<?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">

    <TextView
        style="@style/WordsOfWisdomText"
	android:text="Turn off your lights to safe energy"/>
    <View
	android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="#FF909090" />
    <TextView
	style="@style/WordsOfWisdomText"
	android:text="World peace is a reality"/>
    <View
	android:layout_width="fill_parent"
        android:layout_height="2dip"
        android:background="#FF909090" />
    <TextView
	style="@style/WordsOfWisdomText"
	android:text="Eat your vegetables"/>

</LinearLayout>

Here’s what the layout looks like in the Android emulator. As you can see, each line is actually a View with its background color set. Taking this concept a bit farther, a gradient can be defined in res/drawable/line_gradient.xml (for example) to use as the View background. Don’t forget to also define a value for white and black in your res/values/colors.xml file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
<gradient
    android:startColor="@color/black"
    android:endColor="@color/black"
    android:centerColor="@color/white"
    android:useLevel="false"
    android:type="linear"
    android:angle="0"/>
</shape>

This gradient be used to define the background color for the View within a style. This makes it easier to utilized the line throughout the app.

<style name="Line">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">2px</item>
    <item name="android:layout_marginLeft">10dp</item>
    <item name="android:layout_marginRight">10dp</item>
    <item name="android:background">@drawable/line_gradient</item>
</style>

To position the new Line widget in a layout simply use it as the style tag within a View element.

    <View
        style="@style/Line"/>
    <TextView
        style="@style/WordsOfWisdomText"
        android:text="Reduce Reuse Recycle"/>

Here’s a final screenshot with all the lines displayed, and yea, fixed my grammar problem.