Question

I want my ListView to look like a notepad, ie with a horizontal lines background pattern. Following the Notepad sample, I can extend TextView and override its onDraw() like this:

r = new Rect();
for (int i = 0; i < getLineCount(); i++) {
  int baseline = getLineBounds(i, r);
  canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
}
super.onDraw(canvas);

but when there are just a few elements in the list, there won’t be enough lines to fill the page (actual result on the left, desired on the right):

~~~

So I tried an alternative approach: overriding ListView.onDraw(). Unfortunately, there’s no immediate way to compute the top scroll (getScrollY() always returns 0), and above all, I must disable all caching and drawing optimizations, and this will definitely kill performance, other than not being scalable for large lists.

Finally, my row widgets are not plain text views. They are complex layouts, even if the main content is -sure- a TextView. This means that inside the layout I can’t call getLineBounds() (a layout is not a text view), and in the text view I can’t because the TextView is smaller than the surrounding layout, so there will be gaps on the four sides.

How can I architect a solution to display my custom widgets and fill the entire window with horizontal lines? A naive approach would be to add dummy empty elements to the list as long as it fits all the available space, however this is a hack and there must be a better way of doing things. Using a background image is not an option, since the distance between lines must be customizable at runtime.

Answer 1

The code below is based on the simple example from your question, a custom TextView that draws a line at the bottom(and with no dividers in the list). In this case I would make a custom ListView and override the dispatchDraw method like below:

class CustomListView extends ListView {

    private Paint mPaint = new Paint();
    private Paint mPaintBackground = new Paint();

    public CustomListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint.setColor(Color.RED);
        mPaintBackground.setColor(Color.CYAN);
    }       

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        // ListView's height
        final int currentHeight = getMeasuredHeight();
        // this will let you know the status for the ListView, fitting/not
        // fitting content
        final int scrolledHeight = computeVerticalScrollRange();
        if (scrolledHeight >= currentHeight || scrolledHeight == 0) {
            // there is no need to draw something(for simplicity I assumed that
            // if the adapter has no items i wouldn't draw something on the
            // screen. If you still do want the lines then pick a decent value
            // to simulate a row's height and draw them until you hit the
            // ListView's getMeasuredHeight)
            return;
        } else {
            // get the last drawn child
            final View lastChild = getChildAt(getChildCount() - 1);
            // values used to know where to start drawing lines
            final int lastChildBottom = lastChild.getBottom();
            // last child's height(use this to determine an appropriate value
            // for the row height)
            final int lastChildHeight = lastChild.getMeasuredHeight();
            // determine the number of lines required to fill the ListView
            final int nrOfLines = (currentHeight - lastChildBottom)
                    / lastChildHeight;
            // I used this to simulate a special color for the ListView's row background
            Rect r = new Rect(0, lastChildBottom, getMeasuredWidth(),
                    getMeasuredHeight());           
            canvas.drawRect(r, mPaintBackground);
            for (int i = 0; i < nrOfLines; i++) {
                canvas.drawLine(0, lastChildBottom + (i + 1) * lastChildHeight,
                        getMeasuredWidth(), lastChildBottom + (i + 1)
                                * lastChildHeight, mPaint);
            }
        }
    }

}

See if you can use the code above and adapt it to your own needs.