Home > Development > The Android Vertical Line Problem

The Android Vertical Line Problem

Getting a thin vertical line to use as a divider or other indicator is surprisingly difficult. Various solutions to this problem have been offered at Stackoverflow, e.g. “Android vertical line XML“. Recently I needed a vertical line to use as a divider between items in an open source tooltip component. The default divider was provided as a narrow Textview with a gray background and no text, which was contained within a RelativeLayout. That’s a rather heavyweight implementation, and the divider did not extend the full height of the tooltip, either.

I tried several of the approaches outlined in the Stackoverflow post referenced above and elsewhere. These included a rotated shape drawable and a view with a layout width of 2 pixels, but these did not work. Usually I got a result like below, where the gray divider view caused the tooltip to expand in size and the divider crowded the remaining items out of the tooltip. (An item is made up of text and an icon, like the “Next” and down arrow, although each is optional. See below.)

tooltip_wrong I then adapted a technique we’d used before to get a divider appearing in TextViews used as table cells. We subclassed the TextView and overrode the onDraw method. We drew a narrow vertical line at the left edge to make a nice divider between adjacent table cells. Here’s the (somewhat condensed) code:

private Paint paint = new Paint();
private void init(Context context) {
	paint.setColor(context.getResources().getColor(
			R.color.cell_divider_line));
	paint.setStrokeWidth(0f);
	paint.setStyle(Paint.Style.FILL);
}
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	canvas.drawLine(0, 0, 0, getHeight(), paint);
}

This tooltip component supports both horizontal and vertical orientations so dividers are needed for both cases. The original views for each orientation had a RelativeLayout as the outer view that contains a single tooltip item (an icon and text), so I subclassed RelativeLayout, as below (condensed). This RelativeLayoutWithDivider class provides for a right divider, a bottom divider or no divider.

public enum DividerOrientation  {RIGHT, BOTTOM, NONE}
private Paint paint ;
private Context context;
private DividerOrientation orientation = DividerOrientation.NONE;

private void init() {
	paint = new Paint();
	paint.setColor(context.getResources().getColor(
		R.color.cell_divider_line));
	paint.setStrokeWidth(3f);
	paint.setStyle(Paint.Style.FILL);
}

@Override
protected void onDraw(Canvas canvas) {
	super.onDraw(canvas);
	switch (orientation) {
           case RIGHT:
         	init();
            	canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), paint);
                break;
         case BOTTOM:
        	init();
           	canvas.drawLine(0, getHeight(), getWidth(), getHeight(), paint);
         	break;
           default:
         //no divider line
              break;
	}
}

public void setDividerOrientation(DividerOrientation orientation) {
	this.orientation = orientation;
}

vertical tooltip
Logic in the method the populates the items in the tooltip determines which enum to pass on a call to setDividerOrientation such that single items don’t show a divider nor does the last item. (That method is found in the QuickAction class of the open-source project.)

tooltip4cropped
This will make more sense when I show the layout XML for a horizontal tooltip item. Here the parent view is our subclassed RelativeLayout. Nothing had to change in this XML save the class name in the outermost tag.


About these ads
Categories: Development Tags: , ,
  1. May 15, 2013 at 12:25 pm

    Why not use View with specific background and width of several px or dp?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: