Two-color horizontal line in Android

Question

the graphic designer of the Android app that I'm currently building has come up with a two-color line as a separator between items in a layout box:

two-color separator line http://img7.imageshack.us/img7/3351/twocolorline.png

If you look closely at the image, you see a darkish gray line, with immediately below it a very light gray (almost white) line. The lines should resize to the width of the container.

What is the best way to implement this in the UI?

Answer 1

The best approach here is to convert the image you have shown as a 9-patch, add it to the res/drawable folder as a resource and display it within your layout using an ImageView, setting android:width="fill_parent".

9-patch images let you specify an area of the image to stretch when the image is resized (in this case the entire image - though you may want to consider 'fading out' the line at its edges to conform to some of the native Android styles).

Within your layout file the ImageView definition would look something like this:

<ImageView
  android:src="@drawable/my_separater_nine_patch"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:scaleType="fitXY"
/>

Answer 2

If you don't want to use a 9-patch, you could try a LayerList.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape >
            <solid android:color="#ffffff" />
        </shape>
    </item>
    <item android:bottom="1px">
        <shape >
            <solid android:color="#252525" />
        </shape>
    </item>

</layer-list>

Answer 3

<ImageView android:layout_width="match_parent" android:id="@+id/line1"
            android:layout_height="1dp" android:background="#FFFFFF"
            android:layout_weight="1" android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp" android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"/>

insert inside LinearLayout view