Smartphones

Using views to draw lines in Android

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*

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

0 comments

Editor's Picks