How To Draw A Window With A View

William J. Francis shares a quick and easy way to add a horizontal rule to your Android layouts.

The best coding tips are often the ones that should have been obvious -- these tips are the digital equivalent of making sure the batteries aren't turned around or that the cord really is plugged into the wall. The kind of code that once you see it you have to fight the urge to slap yourself on the forehead and shout: "I knew that!"

My "Captain Obvious" moment came about a year after I'd been coding commercial applications for Android. I struggled on a number of occasions to come up with a satisfactory solution to achieve the simple task of adding lines to my layouts. I'd tried including bitmap resources and stretching them, using the built-in canvas drawing language, and even rendering text views as HTML so I could use the underline markup tag.

Then I saw a layout in a forum where someone had an empty view tag with a background color set, and the light bulb went off. The project that follows demonstrates a super quick and easy way to add a horizontal rule to your layouts. The technique is so simple in fact that it's probably overkill to post the project files; regardless, the source code is available for download, so feel free to follow along with the tutorial or import the project directly into your Eclipse workspace.

1. Create a new Android project in Eclipse. Target Android 1.6 or greater, and be sure to rename the startup activity to Main.java.

2. Now we need to open up our /res/layout/main.xml file and define some lines. I've gone a little crazy here creating a sort of retro rainbow.

main.xml          <?xml version="1.0"            encoding="utf-8"?>
          <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android          
                      android:layout_width="fill_parent"          
                      android:layout_height="fill_parent"          
                      android:orientation="vertical"          
                      android:padding="20dp"          
                      android:gravity="center">
          <TextView
          android:layout_width="fill_parent"          
                      android:layout_height="wrap_content"          
          android:text="The Line Demo"                                android:gravity="center"                    android:paddingBottom="20dp"          />          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                                  android:background="#ff0000"            />
          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                      android:background="#ffa500"            />
          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                      android:background="#ffff00"            />
          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                      android:background="#00ff00"            />
          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                      android:background="#0000ff"            />
          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                      android:background="#2E0854"            />
          <View
          android:layout_width="fill_parent"          
                      android:layout_height="10dp"          
                      android:background="#9400d3"            />
          </LinearLayout>

3. In our /src/Main.java file, we only need to assign our XML layout to the view.

Main.java          package          com.authorwjf.the_line;

          import          android.app.Activity;          import          android.os.Bundle;

          public          class          Main          extends          Activity {          /** Called when the activity is first created. */
          @Override
          public          void          onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.main);
          }
          }

There you have it. A plethora of horizontal lines without any real coding (Figure A). Figure A

*clears throat*

*face palm*